Add more examples

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/documentation.md

@@ -97,10 +97,10 @@ The main function of mathics-threejs-backend is `drawGraphics3d`, takes the foll
       0.75 // innerWidthMultiplier
   );
   ```
-  <div style='position: relative;' class='center' id='graphics-container'></div>
+  <div style='position: relative;' class='center' id='graphics-container-1'></div>
   <script>
       drawGraphics3d(
-          document.getElementById('graphics-container'),
+          document.getElementById('graphics-container-1'),
           {
               axes: {
                   hasaxes: true,
@@ -146,6 +146,19 @@ The main function of mathics-threejs-backend is `drawGraphics3d`, takes the foll
           0.75 // innerWidthMultiplier
       );
   </script>
+- ```js
+  drawGraphics3d(
+      document.getElementById('graphics-container'),
+      { viewpoint: [2, -4, 4] }
+  );
+  ```
+  <div class='center' id='graphics-container-2'></div>
+  <script>
+      drawGraphics3d(
+          document.getElementById('graphics-container-2'),
+          { viewpoint: [2, -4, 4] }
+      );
+  </script>
 
 ## Notes
 - Currently the axes labels are drawn using HTML elements with

docs/lights/ambient.md

@@ -10,10 +10,10 @@ Add ambient light to the scene.
       "color": [1, 0.5, 0] // add orange light to the scene
   }
   ```
-  <div class='center' id='graphics-container'></div>
+  <div class='center' id='graphics-container-1'></div>
   <script>
       drawGraphics3d(
-          document.getElementById('graphics-container'),
+          document.getElementById('graphics-container-1'),
           {
               elements: [
                   {
@@ -35,3 +35,34 @@ Add ambient light to the scene.
           }
       );
   </script>
+- ```jsonc
+  {
+      "type": "ambient",
+      "color": [1, 0, 1] // add purple light to the scene
+  }
+  ```
+  <div class='center' id='graphics-container-2'></div>
+  <script>
+      drawGraphics3d(
+          document.getElementById('graphics-container-2'),
+          {
+              elements: [
+                  {
+                      type: 'cuboid',
+                      color: [1, 1, 1],
+                      coords: [
+                          [[0, 0, 0]],
+                          [[1, 1, 1]]
+                      ]
+                  }
+              ],
+              lighting: [
+                  {
+                      type: 'ambient',
+                      color: [1, 0, 1] // add purple light to the scene
+                  }
+              ],
+              viewpoint: [1.3, -2.4, 2]
+          }
+      );
+  </script>

docs/lights/directional.md

@@ -43,7 +43,7 @@ Add an infinitely far camera-follower light to the scene.
       "coords": [[1, 1, 1]]
   }
   ```
-<div class='center' id='graphics-container-2'></div>
+  <div class='center' id='graphics-container-2'></div>
   <script>
       drawGraphics3d(
           document.getElementById('graphics-container-2'),

docs/lights/point.md

@@ -12,10 +12,10 @@ Add a light that gets emitted from `coords` in all directions to the scene.
       "coords": [[1.5, 1.5, 0]]
   }
   ```
-  <div class='center' id='graphics-container'></div>
+  <div class='center' id='graphics-container-1'></div>
   <script>
       drawGraphics3d(
-          document.getElementById('graphics-container'),
+          document.getElementById('graphics-container-1'),
           {
               elements: [
                   {
@@ -47,7 +47,37 @@ Add a light that gets emitted from `coords` in all directions to the scene.
                   {
                       type: 'point',
                       color: [0, 1, 0],
-                      coords: [[2, 2, 2]]
+                      coords: [[1.5, 1.5, 0]]
+                  }
+              ],
+              viewpoint: [2, -4, 4]
+          }
+      );
+  </script>
+- ```jsonc
+  {
+      "type": "point",
+      "color": [1, 1, 0], // yellow
+      "coords": [null, [1, 1, 1]]
+  }
+  ```
+  <div class='center' id='graphics-container-2'></div>
+  <script>
+      drawGraphics3d(
+          document.getElementById('graphics-container-2'),
+          {
+              elements: [
+                  {
+                      type: 'sphere',
+                      color: [1, 1, 1],
+                      coords: [[[0, 0, 0]]]
+                  }
+              ],
+              lighting: [
+                  {
+                      type: 'point',
+                      color: [1, 1, 0],
+                      coords: [null, [1, 1, 1]]
                   }
               ],
               viewpoint: [2, -4, 4]

docs/lights/spot.md

@@ -15,10 +15,10 @@ Add a spotlight to the scene.
       "target": [[0, 0, 0]]
   }
   ```
-  <div class='center' id='graphics-container'></div>
+  <div class='center' id='graphics-container-1'></div>
   <script>
       drawGraphics3d(
-          document.getElementById('graphics-container'),
+          document.getElementById('graphics-container-1'),
           {
               elements: [
                   {
@@ -40,3 +40,38 @@ Add a spotlight to the scene.
           }
       );
   </script>
+- ```json
+  {
+      "type": "spot",
+      "color": [1, 1, 1],
+      "coords": [null, [1, 1, 1]],
+      "target": [[0, 0, 0]]
+  }
+  ```
+  <div class='center' id='graphics-container-2'></div>
+  <script>
+      drawGraphics3d(
+          document.getElementById('graphics-container-2'),
+          {
+              elements: [
+                  {
+                      type: 'cuboid',
+                      color: [1, 1, 1],
+                      coords: [
+                          [[0, 0, 0]],
+                          [[1, 1, 1]]
+                      ]
+                  }
+              ],
+              lighting: [
+                  {
+                      type: 'spot',
+                      color: [1, 1, 1],
+                      coords: [null, [1, 1, 1]],
+                      target: [[0, 0, 0]]
+                  }
+              ],
+              viewpoint: [1.3, -2.4, 2]
+          }
+      );
+  </script>