Docs: Improve Lut page. (#22148)

docs/examples/en/math/Lut.html

@@ -23,116 +23,99 @@
 		<h2>Constructor</h2>
 
 
-		<h3>[name]( colormap, numberOfColors )</h3>
+		<h3>[name]( [param:String colormap], [param:Number count] )</h3>
 		<p>
-		colormap - optional argument that sets a colormap from predefined colormaps. Available colormaps are : "rainbow", "cooltowarm", "blackbody".
-		numberOfColors - optional argument that sets the number of colors used to represent the data array.
+		colormap - Sets a colormap from predefined colormaps. Available colormaps are : *rainbow*, *cooltowarm*, *blackbody*, *grayscale*. Default is *rainbow*.<br />
+		count - Sets the number of colors used to represent the data array. Default is *32*.
 		</p>
 
 		<h2>Properties</h2>
 
-		<h3>[property:Float minV]</h3>
+		<h3>[property:Array lut]</h3>
 		<p>
-		The minimum value to be represented with the lookup table. Default is 0.
+		The lookup table for the selected color map represented as an array of [page:Color]s.
 		</p>
 
-		<h3>[property:Float maxV]</h3>
+		<h3>[property:Array map]</h3>
 		<p>
-		The maximum value to be represented with the lookup table. Default is 1.
+		The currently selected color map. Default is the *rainbow* color map.
 		</p>
 
-		<h3>.[legend]</h3>
+		<h3>[property:Number minV]</h3>
 		<p>
-		The legend of the lookup table.
+		The minimum value to be represented with the lookup table. Default is *0*.
 		</p>
 
-		<h2>Methods</h2>
-
-		<h3>[method:null copy]( [param:Lut lut] ) [param:Lut this]</h3>
-		<p>
-		color — Lut to copy.
-		</p>
+		<h3>[property:Number maxV]</h3>
 		<p>
-		Copies given lut.
+		The maximum value to be represented with the lookup table. Default is *1*.
 		</p>
 
-		<h3>.setLegendOn [parameters]</h3>
+		<h3>[property:Number n]</h3>
 		<p>
-		parameters - { layout: value, position: { x: value, y: value, z: value }, dimensions: { width: value, height: value } }
-		layout — Horizontal or vertical layout. Default is vertical.<br />
-		position — The position x,y,z of the legend.<br />
-		dimensions — The dimensions (width and height) of the legend.<br />
-		</p>
-		<p>
-		Sets this Lut with the legend on.
+		The number of colors of the current selected color map. Default is *32*.
 		</p>
 
-		<h3>.setLegendOff</h3>
+		<h2>Methods</h2>
+
+		<h3>[method:null copy]( [param:Lut lut] ) [param:Lut this]</h3>
 		<p>
+		color — Lut to copy.
 		</p>
 		<p>
-		Sets this Lut with the legend off.
+		Copies the given lut.
 		</p>
 
-    <h3>.setLegendLabels [parameters, callback]</h3>
+		<h3>[method:Lut addColorMap]( [param:String name], [param:Array arrayOfColors] )</h3>
 		<p>
-		parameters - { fontsize: value, fontface: value, title: value, um: value, ticks: value, decimal: value, notation: value }
-		fontsize — Font size to be used for labels.<br />
-		fontface — Font type to be used for labels.<br />
-		title — The title of the legend.<br />
-		um — The unit of measurements of the legend.<br />
-		ticks — The number of ticks to be displayed.<br />
-		decimal — The number of decimals to be used for legend values.<br />
-		notation — Legend notation: standard (default) or scientific.<br />
-		callback — An optional callback to be used to format the legend labels.<br />
+		name — The name of the color map.<br />
+		arrayOfColors — An array of color values. Each value is an array holding a threshold and the actual color value as a hexadecimal number.
 		</p>
 		<p>
-		Sets the labels of the legend of this Lut.
+		Adds a color map to this [name] instance.
 		</p>
 
-		<h3>[method:Lut setMin]( [param:Float minV] )</h3>
-		<p>
-		minV — The minimum value to be represented with the lookup table.<br />
-		</p>
+		<h3>[method:HTMLCanvasElement createCanvas]()</h3>
 		<p>
-		Sets this Lut with the minimum value to be represented.
+		Creates a canvas in order to visualize the lookup table as a texture.
 		</p>
 
-		<h3>[method:Lut setMax]( [param:Float maxV] )</h3>
+		<h3>[method:Color getColor]( [param:Number alpha] )</h3>
 		<p>
-		maxV — The maximum value to be represented with the lookup table.<br />
+		value -- the data value to be displayed as a color.
 		</p>
 		<p>
-		Sets this Lut with the maximum value to be represented.
+		Returns an instance of [page:Color] for the given data value.
 		</p>
 
-		<h3>[method:Lut changeNumberOfColors]( [param:Float numberOfColors] )</h3>
+		<h3>[method:Lut setColorMap]( [param:String colormap], [param:Number count] )</h3>
 		<p>
-		numberOfColors — The number of colors to be used to represent the data array.<br />
+		colormap — The name of the color map.<br />
+		count — The number of colors. Default is *32*.
 		</p>
 		<p>
-		Sets this Lut with the number of colors to be used.
+		Configure the lookup table for the given color map and number of colors.
 		</p>
 
-		<h3>[method:Lut changeColorMap]( [param:Float colorMap] )</h3>
+		<h3>[method:Lut setMin]( [param:Number minV] )</h3>
 		<p>
-		colorMap — The name of the color map to be used to represent the data array.<br />
+		minV — The minimum value to be represented with the lookup table
 		</p>
 		<p>
-		Sets this Lut with the colormap to be used.
+		Sets this Lut with the minimum value to be represented.
 		</p>
 
-		<h3>[method:Lut addColorMap]( colorMapName, arrayOfColors )</h3>
+		<h3>[method:Lut setMax]( [param:Number maxV] )</h3>
 		<p>
-		Insert a new color map into the set of available color maps.
+		maxV — The maximum value to be represented with the lookup table.
 		</p>
-
-		<h3>[method:Lut getColor]( value ) [param:Lut this]</h3>
 		<p>
-		value -- the data value to be displayed as a color.
+		Sets this Lut with the maximum value to be represented.
 		</p>
+
+		<h3>[method:HTMLCanvasElement updateCanvas]( [param:HTMLCanvasElement canvas] )</h3>
 		<p>
-		Returns a [page:Color].
+		Updates the canvas with the [name]'s data.
 		</p>
 
 		<h2>Source</h2>

docs/examples/zh/math/Lut.html

@@ -23,116 +23,99 @@
 		<h2>构造函数</h2>
 
 
-		<h3>[name]( colormap, numberOfColors )</h3>
+		<h3>[name]( [param:String colormap], [param:Number count] )</h3>
 		<p>
-		colormap - （可选）从预定义的颜色表中设置一个颜色表。可选值有："rainbow"、 "cooltowarm"、 "blackbody"。
-		numberOfColors - （可选）设置用于表示数据数组的颜色数量。
+		colormap - Sets a colormap from predefined colormaps. Available colormaps are : *rainbow*, *cooltowarm*, *blackbody*, *grayscale*. Default is *rainbow*.<br />
+		count - Sets the number of colors used to represent the data array. Default is *32*.
 		</p>
 
 		<h2>属性</h2>
 
-		<h3>[property:Float minV]</h3>
+		<h3>[property:Array lut]</h3>
 		<p>
-		查找表所表示的最小值，默认为0。
+		The lookup table for the selected color map represented as an array of [page:Color]s.
 		</p>
 
-		<h3>[property:Float maxV]</h3>
+		<h3>[property:Array map]</h3>
 		<p>
-		查找表所表示的最小值，默认为1。
+		The currently selected color map. Default is the *rainbow* color map.
 		</p>
 
-		<h3>.[legend]</h3>
+		<h3>[property:Number minV]</h3>
 		<p>
-		查找表的图例。
+		The minimum value to be represented with the lookup table. Default is *0*.
 		</p>
 
-		<h2>方法</h2>
-
-		<h3>[method:null copy]( [param:Lut lut] ) [param:Lut this]</h3>
+		<h3>[property:Number maxV]</h3>
 		<p>
-		color — 要拷贝的 Lut。
-		</p>
-		<p>
-		拷贝给定的 Lut。
+		The maximum value to be represented with the lookup table. Default is *1*.
 		</p>
 
-		<h3>.setLegendOn [parameters]</h3>
-		<p>
-		parameters - { layout: value, position: { x: value, y: value, z: value }, dimensions: { width: value, height: value } }
-		layout — Horizontal or vertical layout. Default is vertical.<br />
-		position — The position x,y,z of the legend.<br />
-		dimensions — The dimensions (width and height) of the legend.<br />
-		</p>
+		<h3>[property:Number n]</h3>
 		<p>
-		Sets this Lut with the legend on.
+		The number of colors of the current selected color map. Default is *32*.
 		</p>
 
-		<h3>.setLegendOff</h3>
+		<h2>方法</h2>
+
+		<h3>[method:null copy]( [param:Lut lut] ) [param:Lut this]</h3>
 		<p>
+		color — Lut to copy.
 		</p>
 		<p>
-		Sets this Lut with the legend off.
+		Copies the given lut.
 		</p>
 
-    <h3>.setLegendLabels [parameters, callback]</h3>
+		<h3>[method:Lut addColorMap]( [param:String name], [param:Array arrayOfColors] )</h3>
 		<p>
-		parameters - { fontsize: value, fontface: value, title: value, um: value, ticks: value, decimal: value, notation: value }
-		fontsize — Font size to be used for labels.<br />
-		fontface — Font type to be used for labels.<br />
-		title — The title of the legend.<br />
-		um — The unit of measurements of the legend.<br />
-		ticks — The number of ticks to be displayed.<br />
-		decimal — The number of decimals to be used for legend values.<br />
-		notation — Legend notation: standard (default) or scientific.<br />
-		callback — An optional callback to be used to format the legend labels.<br />
+		name — The name of the color map.<br />
+		arrayOfColors — An array of color values. Each value is an array holding a threshold and the actual color value as a hexadecimal number.
 		</p>
 		<p>
-		Sets the labels of the legend of this Lut.
+		Adds a color map to this [name] instance.
 		</p>
 
-		<h3>[method:Lut setMin]( [param:Float minV] )</h3>
+		<h3>[method:HTMLCanvasElement createCanvas]()</h3>
 		<p>
-		minV — 查找表所表示的最小值。<br />
-		</p>
-		<p>
-		将查找表要表示的最小值设为该值。
+		Creates a canvas in order to visualize the lookup table as a texture.
 		</p>
 
-		<h3>[method:Lut setMax]( [param:Float maxV] )</h3>
+		<h3>[method:Color getColor]( [param:Number alpha] )</h3>
 		<p>
-		maxV — 查找表所表示的最小值。<br />
+		value -- the data value to be displayed as a color.
 		</p>
 		<p>
-		将查找表要表示的最大值设为该值。
+		Returns an instance of [page:Color] for the given data value.
 		</p>
 
-		<h3>[method:Lut changeNumberOfColors]( [param:Float numberOfColors] )</h3>
+		<h3>[method:Lut setColorMap]( [param:String colormap], [param:Number count] )</h3>
 		<p>
-		numberOfColors — 用于表示数据数组的颜色数量。<br />
+		colormap — The name of the color map.<br />
+		count — The number of colors. Default is *32*.
 		</p>
 		<p>
-		设置查找表中要使用的颜色的数量。
+		Configure the lookup table for the given color map and number of colors.
 		</p>
 
-		<h3>[method:Lut changeColorMap]( [param:Float colorMap] )</h3>
+		<h3>[method:Lut setMin]( [param:Number minV] )</h3>
 		<p>
-		colorMap — 用于表示数据数组的颜色表名称。<br />
+		minV — The minimum value to be represented with the lookup table
 		</p>
 		<p>
-		设置查找表的颜色表为传入的颜色表。
+		Sets this Lut with the minimum value to be represented.
 		</p>
 
-		<h3>[method:Lut addColorMap]( colorMapName, arrayOfColors )</h3>
+		<h3>[method:Lut setMax]( [param:Number maxV] )</h3>
 		<p>
-		插入一个新的颜色表到可用颜色表中。
+		maxV — The maximum value to be represented with the lookup table.
 		</p>
-
-		<h3>[method:Lut getColor]( value ) [param:Lut this]</h3>
 		<p>
-		value -- 作为颜色展示的数据值。
+		Sets this Lut with the maximum value to be represented.
 		</p>
+
+		<h3>[method:HTMLCanvasElement updateCanvas]( [param:HTMLCanvasElement canvas] )</h3>
 		<p>
-		返回一个[page:Color]。
+		Updates the canvas with the [name]'s data.
 		</p>
 
 		<h2>源码</h2>

examples/jsm/math/Lut.js

@@ -4,16 +4,21 @@ import {
 
 class Lut {
 
- 	constructor( colormap, numberofcolors ) {
+ 	constructor( colormap, count = 32 ) {
 
 		this.lut = [];
-		this.setColorMap( colormap, numberofcolors );
+		this.map = [];
+		this.n = 0;
+		this.minV = 0;
+		this.maxV = 1;
+
+		this.setColorMap( colormap, count );
 
 	}
 
 	set( value ) {
 
-		if ( value instanceof Lut ) {
+		if ( value.isLut === true ) {
 
 			this.copy( value );
 
@@ -39,10 +44,10 @@ class Lut {
 
 	}
 
-	setColorMap( colormap, numberofcolors = 32 ) {
+	setColorMap( colormap, count = 32 ) {
 
 		this.map = ColorMapKeywords[ colormap ] || ColorMapKeywords.rainbow;
-		this.n = numberofcolors;
+		this.n = count;
 
 		const step = 1.0 / this.n;
 
@@ -107,9 +112,11 @@ class Lut {
 
 	}
 
-	addColorMap( colormapName, arrayOfColors ) {
+	addColorMap( name, arrayOfColors ) {
+
+		ColorMapKeywords[ name ] = arrayOfColors;
 
-		ColorMapKeywords[ colormapName ] = arrayOfColors;
+		return this;
 
 	}
 
@@ -172,11 +179,7 @@ class Lut {
 
 }
 
-Lut.prototype.lut = [];
-Lut.prototype.map = [];
-Lut.prototype.n = 256;
-Lut.prototype.minV = 0;
-Lut.prototype.maxV = 1;
+Lut.prototype.isLut = true;
 
 const ColorMapKeywords = {