Rename examples/tests to tests

Move the live benchmarks to the documentation

README.md

@@ -76,7 +76,7 @@ drawGraphics3D(document.getElementById('main'), {
 ```
 <p align="center"><a href="https://mathics3.github.io/mathics-threejs-backend/examples/tube-dodecahedrons-and-spheres"><img alt="demonstration" src="https://user-images.githubusercontent.com/62714153/155851002-13b0200b-7835-40f9-8780-97aefb12bac5.gif" /></a></p>
 
-Lots of other examples can be found in the [examples](https://github.com/Mathics3/mathics-threejs-backend/tree/main/examples) folder of this repository and in the [documentation](https://mathics3.github.io/mathics-threejs-backend/examples).
+Lots of other examples can be found in the [tests](https://github.com/Mathics3/mathics-threejs-backend/tree/main/tests) folder of this repository and in the [documentation](https://mathics3.github.io/mathics-threejs-backend/examples).
 
 ## Displaying Examples
 Install an HTTP server and run it:
@@ -98,12 +98,12 @@ Otherwise, start the HTTP server that was just installed:
 $ npm start  # Do this once per session
 ...
 Server running at http://localhost:8080/
-See our gallery in http://localhost:8080/examples/
+See our gallery in http://localhost:8080/tests/
 
 Hit CTRL-C to stop the server
 ```
 
-Finally, look at a file that you want to see rendered, e.g. http://127.0.0.1:8080/examples/test/cone.html
+Finally, look at a file that you want to see rendered, e.g. http://127.0.0.1:8080/tests/cone.html
 
 For installing the development version from GitHub, see the [documentation](https://mathics3.github.io/mathics-threejs-backend/documentation).
 

docs/benchmarks.md

@@ -0,0 +1,7 @@
+See the live benchmakrs:
+<!-- each graphics container MUST have an UNIQUE id -->
+<!-- filename aplhabetic order -->
+- [Cuboid](benchmarks/cuboid)
+- [Line](benchmarks/line)
+- [Point](benchmarks/point)
+- [Sphere](benchmarks/sphere)

docs/benchmarks/cuboid.md

@@ -0,0 +1,100 @@
+<style>
+	input,
+	button,
+	main,
+	p,
+	label {
+		display: block;
+		margin: 0 auto;
+		text-align: center;
+	}
+
+	input {
+		width: 100%;
+	}
+
+	#time {
+		margin-bottom: 20px;
+	}
+</style>
+
+<div id="container">
+	<label for="grid-size">Size of the grid:</label>
+	<input type="number" id="grid-size" placeholder="30" value="30" />
+	<button id="run-test">Run the test</button>
+</div>
+
+<div id="time-container"></div>
+
+<script>
+	document.getElementById('run-test').addEventListener('click', () => {
+		document.querySelector('main')?.remove();
+		document.getElementById('container').appendChild(document.createElement('main'));
+
+		const gridSize = document.getElementById('grid-size').value;
+
+		const coords = new Array(gridSize ** 3);
+
+		for (let i = 0; i < gridSize; i++) {
+			for (let j = 0; j < gridSize; j++) {
+				for (let k = 0; k < gridSize; k++) {
+					coords[2 * i * gridSize ** 2 + 2 * j * gridSize + 2 * k] = [[i, j, k]];
+					coords[2 * i * gridSize ** 2 + 2 * j * gridSize + 2 * k + 1] = [[i + 0.5, j + 0.5, k + 0.5]];
+				}
+			}
+		}
+
+		const startTime = performance.now();
+
+		drawGraphics3d(
+			document.querySelector('main'),
+			{
+				elements: [
+					{
+						type: 'cuboid',
+						color: [1, 1, 1],
+						coords,
+						edgeForm: { showEdges: false }
+					}
+				],
+				lighting: [
+					{
+						type: 'spot',
+						angle: 1,
+						color: [1, 0, 0],
+						coords: [null, [1, 1, 1]],
+						target: [null, [0.5, 0.5, 0.5]]
+					},
+					{
+						type: 'spot',
+						angle: 1,
+						color: [0, 1, 0],
+						coords: [null, [0, 0, 0]],
+						target: [null, [0.5, 0.5, 0.5]]
+					},
+					{
+						type: 'spot',
+						angle: 1,
+						color: [0, 0, 1],
+						coords: [null, [0, 1, 1]],
+						target: [null, [0.5, 0.5, 0.5]]
+					}
+				],
+				viewpoint: [2, 2, 2]
+			},
+			200
+		);
+
+		const duration = performance.now() - startTime;
+
+		let timeElement = document.getElementById('time');
+
+		if (!timeElement) {
+			timeElement = document.createElement('p');
+			timeElement.id = 'time';
+			document.getElementById('time-container').appendChild(timeElement);
+		}
+
+		timeElement.innerText = `Time taken to draw ${gridSize ** 3} cuboids: ${duration / 1000} seconds`;
+	});
+</script>

docs/benchmarks/line.md

@@ -0,0 +1,80 @@
+<style>
+	input,
+	button,
+	main,
+	p,
+	label {
+		display: block;
+		margin: 0 auto;
+		text-align: center;
+	}
+
+	input {
+		width: 100%;
+	}
+
+	#time {
+		margin-bottom: 20px;
+	}
+</style>
+
+<div id="container">
+	<label for="elements-number">Number of points:</label>
+	<input type="number" id="elements-number" placeholder="10000" value="10000" />
+	<button id="run-test">Run the test</button>
+</div>
+
+<div id="time-container"></div>
+
+<script>
+	document.getElementById('run-test').addEventListener('click', () => {
+		document.querySelector('main')?.remove();
+		document.getElementById('container').appendChild(document.createElement('main'));
+
+		const numberOfPoints = Math.floor(document.getElementById('elements-number').value / 10) * 10;
+
+		const coords = new Array(numberOfPoints);
+
+		for (let i = 0; i < numberOfPoints / 7; i++) {
+			coords[i * 10] = [[0, 0, 0]];
+			coords[i * 10 + 1] = [[0, 0, i * 1024]];
+			coords[i * 10 + 2] = [[1, 1, i * 1024]];
+			coords[i * 10 + 3] = [[0, i * 1024, 0]];
+			coords[i * 10 + 4] = [[1, i * 1024, 1]];
+			coords[i * 10 + 5] = [[i * 1024, 0, 0]];
+			coords[i * 10 + 6] = [[i * 1024, 1, 1]];
+			coords[i * 10 + 7] = [[i * 1024, 0, i * 1024]];
+			coords[i * 10 + 8] = [[i * 1024, i * 1024, 0]];
+			coords[i * 10 + 9] = [[i * 1024, i * 1024, i * 1024]];
+		}
+
+		const startTime = performance.now();
+
+		drawGraphics3d(
+			document.querySelector('main'),
+			{
+				elements: [
+					{
+						type: 'line',
+						color: [0, 0, 0],
+						coords
+					}
+				],
+				viewpoint: [2, 2, 2]
+			},
+			200
+		);
+
+		const duration = performance.now() - startTime;
+
+		let timeElement = document.getElementById('time');
+
+		if (!timeElement) {
+			timeElement = document.createElement('p');
+			timeElement.id = 'time';
+			document.getElementById('time-container').appendChild(timeElement);
+		}
+
+		timeElement.innerText = `Time taken to draw a line crossing ${numberOfPoints} points: ${duration / 1000} seconds`;
+	});
+</script>

docs/benchmarks/point.md

@@ -0,0 +1,76 @@
+<style>
+	input,
+	button,
+	main,
+	p,
+	label {
+		display: block;
+		margin: 0 auto;
+		text-align: center;
+	}
+
+	input {
+		width: 100%;
+	}
+
+	#time {
+		margin-bottom: 20px;
+	}
+</style>
+
+<div id="container">
+	<label for="grid-size">Size of the grid:</label>
+	<input type="number" id="grid-size" placeholder="100" value="100" />
+	<button id="run-test">Run the test</button>
+</div>
+
+<div id="time-container"></div>
+
+<script>
+	document.getElementById('run-test').addEventListener('click', () => {
+		document.querySelector('main')?.remove();
+		document.getElementById('container').appendChild(document.createElement('main'));
+
+		const gridSize = document.getElementById('grid-size').value;
+
+		const coords = new Array(gridSize ** 3);
+
+		for (let i = 0; i < gridSize; i++) {
+			for (let j = 0; j < gridSize; j++) {
+				for (let k = 0; k < gridSize; k++) {
+					coords[i * gridSize ** 2 + j * gridSize + k] = [[i, j, k]];
+				}
+			}
+		}
+
+		const startTime = performance.now();
+
+		drawGraphics3d(
+			document.querySelector('main'),
+			{
+				elements: [
+					{
+						type: 'point',
+						color: [0, 0, 0],
+						coords,
+						pointSize: 0.01
+					}
+				],
+				viewpoint: [2, -4, 4]
+			},
+			200
+		);
+
+		const duration = performance.now() - startTime;
+
+		let timeElement = document.getElementById('time');
+
+		if (!timeElement) {
+			timeElement = document.createElement('p');
+			timeElement.id = 'time';
+			document.getElementById('time-container').appendChild(timeElement);
+		}
+
+		timeElement.innerText = `Time taken to draw ${gridSize ** 3} points: ${duration / 1000} seconds`;
+	});
+</script>

docs/benchmarks/sphere.md

@@ -0,0 +1,82 @@
+<style>
+	input,
+	button,
+	main,
+	p,
+	label {
+		display: block;
+		margin: 0 auto;
+		text-align: center;
+	}
+
+	input {
+		width: 100%;
+	}
+
+	#time {
+		margin-bottom: 20px;
+	}
+</style>
+
+<div id="container">
+	<label for="grid-size">Size of the grid:</label>
+	<input type="number" id="grid-size" placeholder="10" value="10" />
+	<button id="run-test">Run the test</button>
+</div>
+
+<div id="time-container"></div>
+
+<script>
+	document.getElementById('run-test').addEventListener('click', () => {
+		document.querySelector('main')?.remove();
+		document.getElementById('container').appendChild(document.createElement('main'));
+
+		const gridSize = document.getElementById('grid-size').value;
+
+		const coords = new Array(gridSize ** 3);
+
+		for (let i = 0; i < gridSize; i++) {
+			for (let j = 0; j < gridSize; j++) {
+				for (let k = 0; k < gridSize; k++) {
+					coords[i * gridSize ** 2 + j * gridSize + k] = [[i, j, k]];
+				}
+			}
+		}
+
+		const startTime = performance.now();
+
+		drawGraphics3d(
+			document.querySelector('main'),
+			{
+				elements: [
+					{
+						type: 'sphere',
+						color: [0.5, 0.5, 0.5],
+						coords,
+						radius: 0.1
+					}
+				],
+				lighting: [
+					{
+						type: 'ambient',
+						color: [0.8, 0.2, 0.6]
+					}
+				],
+				viewpoint: [2, -4, 4]
+			},
+			200
+		);
+
+		const duration = performance.now() - startTime;
+
+		let timeElement = document.getElementById('time');
+
+		if (!timeElement) {
+			timeElement = document.createElement('p');
+			timeElement.id = 'time';
+			document.getElementById('time-container').appendChild(timeElement);
+		}
+
+		timeElement.innerText = `Time taken to draw ${gridSize ** 3} spheres: ${duration / 1000} seconds`;
+	});
+</script>

docs/examples.md

@@ -1,9 +1,5 @@
 See our gallery:
-<!--
-in the examples you'll see that the path to the build file is 'build.js',
-not '../build.js'. This happens because Jekyll "copy all files to the root
-folder of the documentation (/docs)".
--->
+
 <!-- each graphics container MUST have an UNIQUE id -->
 <!-- filename aplhabetic order -->
 - [Black point](examples/black-point)

docs/index.md

@@ -6,6 +6,8 @@ This can be used in Mathics front ends like [Mathics-Django](https://pypi.org/pr
 
 See [our gallery](examples).
 
+See [the live benchmarks](benchmarks).
+
 See [the documentation](documentation).
 
 [View the project on GitHub](https://github.com/Mathics3/mathics-threejs-backend).