Add color picker to the documentation

docs/_includes/Sidebar.html

@@ -26,8 +26,8 @@
 				<ul>
 					<li><a href="/mathics-threejs-backend/lights/ambient">ambient</a></li>
 					<li><a href="/mathics-threejs-backend/lights/directional">directional</a></li>
-					<li><a href="/mathics-threejs-backend/lights/spot">spot</a></li>
 					<li><a href="/mathics-threejs-backend/lights/point">point</a></li>
+					<li><a href="/mathics-threejs-backend/lights/spot">spot</a></li>
 				</ul>
 			</li>
 			<li>

docs/_includes/color_picker.html

@@ -0,0 +1,152 @@
+<div style='display: flex; justify-content: center; flex-direction: row; align-items: center;'>
+  	<canvas width='300px' height='300px' id='color-canvas'></canvas>
+  	<canvas style='margin-left: 10px;' width='35px' height='300px' id='color-strip-canvas'></canvas>
+  </div>
+
+  <div style='height: 5px; width: 5px; border-radius: 50%; border: 1px solid black; position: absolute; z-index: 1; display: none;' id='marker-1'></div>
+  <div style='height: 5px; width: 5px; border-radius: 50%; border: 1px solid black; position: absolute; z-index: 1; display: none;' id='marker-2'></div>
+
+  <p style='text-align: center;'>
+  	Red:
+  	<span id='red'>0.50</span>
+  	Green:
+  	<span id='green'>0.50</span>
+  	Blue:
+  	<span id='blue'>0.50</span>
+  </p>
+
+  <script>
+  	const marker1 = document.getElementById('marker-1');
+  	const marker2 = document.getElementById('marker-2');
+
+  	function updateMarker1Position(event) {
+  		marker1.style.display = 'block';
+
+  		const { left, top } = colorCanvas.getBoundingClientRect();
+  		marker1.style.left = `${event.clientX - left + colorCanvas.offsetLeft}px`;
+  		marker1.style.top = `${event.clientY - top + colorCanvas.offsetTop}px`;
+
+  		const pixel = colorContext.getImageData(
+  			event.clientX - left,
+  			event.clientY - top,
+  			1,
+  			1
+  		).data;
+
+  		document.getElementById('red').innerText = (pixel[0] / 255).toFixed(2);
+  		document.getElementById('green').innerText = (pixel[1] / 255).toFixed(2);
+  		document.getElementById('blue').innerText = (pixel[2] / 255).toFixed(2);
+  	}
+
+  	function updateMarker2Position(event) {
+  		marker2.style.display = 'block';
+
+  		const { left, top } = colorStripCanvas.getBoundingClientRect();
+  		marker2.style.top = `${event.clientY - top + colorStripCanvas.offsetTop}px`;
+
+  		const colorStripPixel = colorStripContext.getImageData(
+  			event.clientX - left,
+  			event.clientY - top,
+  			1,
+  			1
+  		).data;
+
+  		color = `rgba(${colorStripPixel[0]}, ${colorStripPixel[1]}, ${colorStripPixel[2]}, 1)`;
+
+  		fillGradient();
+
+  		const pixel = colorStripContext.getImageData(
+  			marker1.offsetTop - colorCanvas.offsetTop,
+  			marker1.offsetLeft - colorCanvas.offsetLeft,
+  			1,
+  			1
+  		).data;
+
+  		document.getElementById('red').innerText = (pixel[0] / 255).toFixed(2);
+  		document.getElementById('green').innerText = (pixel[1] / 255).toFixed(2);
+  		document.getElementById('blue').innerText = (pixel[2] / 255).toFixed(2);
+  	}
+
+  	function fillGradient() {
+  		colorContext.fillStyle = color;
+  		colorContext.fillRect(
+  			0,
+  			0,
+  			colorCanvas.width,
+  			colorCanvas.height
+  		);
+
+  		const gradientWhite = colorContext.createLinearGradient(
+  			0,
+  			0,
+  			colorCanvas.width,
+  			0
+  		);
+  		gradientWhite.addColorStop(0, 'rgba(255, 255, 255, 1)');
+  		gradientWhite.addColorStop(1, 'rgba(255, 255, 255, 0)');
+
+  		colorContext.fillStyle = gradientWhite;
+  		colorContext.fillRect(
+  			0,
+  			0,
+  			colorCanvas.width,
+  			colorCanvas.height
+  		);
+
+  		const gradientBlack = colorContext.createLinearGradient(
+  			0,
+  			0,
+  			0,
+  			colorCanvas.height
+  		);
+  		gradientBlack.addColorStop(0, 'rgba(0,0,0,0)');
+  		gradientBlack.addColorStop(1, 'rgba(0,0,0,1)');
+
+  		colorContext.fillStyle = gradientBlack;
+  		colorContext.fillRect(
+  			0,
+  			0,
+  			colorCanvas.width,
+  			colorCanvas.height
+  		);
+  	}
+
+  	const colorCanvas = document.getElementById('color-canvas');
+  	const colorContext = colorCanvas.getContext('2d');
+
+  	const colorStripCanvas = document.getElementById('color-strip-canvas');
+  	const colorStripContext = colorStripCanvas.getContext('2d');
+
+  	marker2.style.left = `${colorStripCanvas.offsetLeft + 15}px`;
+
+  	colorStripContext.rect(
+  		0,
+  		0,
+  		colorStripCanvas.width,
+  		colorStripCanvas.height
+  	);
+
+  	const colorStripGradient = colorStripContext.createLinearGradient(
+  		0,
+  		0,
+  		0,
+  		colorStripCanvas.height
+  	);
+  	colorStripGradient.addColorStop(0, 'rgba(255, 0, 0, 1)');
+  	colorStripGradient.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
+  	colorStripGradient.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
+  	colorStripGradient.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
+  	colorStripGradient.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
+  	colorStripGradient.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
+  	colorStripGradient.addColorStop(1, 'rgba(255, 0, 0, 1)');
+
+  	colorStripContext.fillStyle = colorStripGradient;
+  	colorStripContext.fill();
+
+  	let color = 'rgba(255, 255, 255, 1)';
+
+  	fillGradient();
+
+  	colorCanvas.addEventListener('click', updateMarker1Position);
+  	colorStripCanvas.addEventListener('click', updateMarker2Position);
+  </script>

docs/lights/point.md

@@ -54,7 +54,7 @@ Add a light that gets emitted from `coords` in all directions to the scene.
           }
       );
   </script>
-- ```json
+- ```jsonc
   {
       "type": "point",
       "color": [1, 1, 0], // yellow
@@ -70,7 +70,7 @@ Add a light that gets emitted from `coords` in all directions to the scene.
                   {
                       type: 'sphere',
                       color: [1, 1, 1],
-                      coords: [[null, [0.5, 0.5, 0.5]]]
+                      coords: [[[0, 0, 0]]]
                   }
               ],
               lighting: [

docs/lights/spot.md

@@ -66,7 +66,7 @@ Add a spotlight to the scene.
               lighting: [
                   {
                       type: 'spot',
-                      color: [1, 1, 1],,
+                      color: [1, 1, 1],
                       coords: [null, [1, 1, 1]],
                       target: [[0, 0, 0]]
                   }

docs/types/color.md

@@ -1,4 +1,4 @@
-A color is an array of 3 floats, for the red, green and blue value. A value should be in the range 0 to 1.
+A color is an array of 3 floats (red, green and blue) in the range 0-1.
 
 To convert a 0-255 number to 0-1 you just need to divide the number by 255.
 
@@ -10,4 +10,6 @@ To convert a 0-255 number to 0-1 you just need to divide the number by 255.
       0, // blue
   ]
   ```
-  ![yellow](https://user-images.githubusercontent.com/62714153/124355174-3c908f80-dbe6-11eb-9af8-1b65150454b6.png)
+  <img class='center' style='display: block;' alt='yellow' src='https://user-images.githubusercontent.com/62714153/124355174-3c908f80-dbe6-11eb-9af8-1b65150454b6.png' />
+- <p style='text-align: center;'>Color picker</p>
+  {% include color_picker.html %}