From 680f9997f9e0ea3764cf1b1cb73266878d182979 Mon Sep 17 00:00:00 2001
From: Mike Lynch <m.lynch@sydney.edu.au>
Date: Sun, 14 Apr 2024 16:05:17 +1000
Subject: [PATCH] Added descriptions for each of the shapes

---
 index.html   | 10 ++++++++
 main.js      | 14 +++++++++++-
 polytopes.js | 64 +++++++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 76 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index b47d8fa..7791e9a 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,15 @@
 		<title>FourD</title>
 		<style>
 			body { margin: 0; }
+			div#description {
+				position: fixed;
+				top: 0;
+				left: 0;
+				width: 20%;
+				z-index: 2;
+				font-family: sans-serif;
+				padding: 1em;
+			}
 			div#info {
 				position: fixed;
 				bottom:0;
@@ -16,6 +25,7 @@
 	</head>
 	<body>
 		<script type="module" src="/main.js"></script>
+		<div id="description"></div>
 		<div id="info">by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> -
 			<a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div>
 	</body>
diff --git a/main.js b/main.js
index 174d8f5..1891d05 100644
--- a/main.js
+++ b/main.js
@@ -85,6 +85,16 @@ function createShape(name, option) {
 	setVisibility(option ? option : structure.options[0].name);
 }
 
+function displayDocs(name) {
+	const docdiv = document.getElementById("description");
+	const description = STRUCTURES_BY_NAME[name].description;
+	if( description ) {
+		docdiv.innerHTML =`<p>${name}</p><p>${description}</p>`;
+	} else {
+		docdiv.innerHTML =`<p>${name}</p>`;
+	}
+}
+
 // initialise gui and read params from URL
 
 // callbacks to do things which are triggered by controls: reset the shape,
@@ -119,7 +129,8 @@ let gui;
 
 
 function changeShape() {
-	createShape(gui.params.shape);	
+	createShape(gui.params.shape);
+	displayDocs(gui.params.shape);
 }
 
 function setVisibility(option_name) {
@@ -184,6 +195,7 @@ renderer.domElement.addEventListener("pointerup", (event) => {
 })
 
 createShape(gui.params.shape, gui.params.option);
+displayDocs(gui.params.shape);
 
 function animate() {
 	requestAnimationFrame( animate );
diff --git a/polytopes.js b/polytopes.js
index 38f475e..15c6d2f 100644
--- a/polytopes.js
+++ b/polytopes.js
@@ -85,7 +85,12 @@ export const cell5 = () => {
 			node_size: 0.02,
 			link_size: 0.02
 		},
-		options: [ { name: '--' }]
+		options: [ { name: '--' }],
+		description: `Five tetrahedra joined at ten faces with three
+		tetrahedra around each edge. The 5-cell is the simplest regular
+		four-D polytope and the four-dimensional analogue of the tetrahedron.
+		A corresponding polytope, or simplex, exists for every n-dimensional
+		space.`,
 	};
 };
 
@@ -115,7 +120,11 @@ export const cell16 = () => {
 			node_size: 0.02,
 			link_size: 0.02
 		},
-		options: [ { name: '--' }]
+		options: [ { name: '--' }],
+		description: `Sixteen tetrahedra joined at 32 faces with four
+		tetrahedra around each edge. The 16-cell is the four-dimensional
+		analogue of the octahedron and is dual to the tesseract. Every
+		n-dimensional space has a corresponding polytope in this family.`,
 	};
 };
 
@@ -146,7 +155,7 @@ export const tesseract = () => {
 
 
 	return {
-		name: 'tesseract',
+		name: 'Tesseract',
 		nodes: nodes,
 		links: links,
 		geometry: {
@@ -158,6 +167,12 @@ export const tesseract = () => {
 			{ name: 'one 16-cell', links: [ 0, 1 ] },
 			{ name: 'both 16-cells', links: [ 0, 1, 2 ] },
 		],
+		description: `The most well-known four-dimensional shape, the
+		tesseract is analogous to the cube, and is constructed by placing two
+		cubes in parallel hyperplanes and joining their corresponding
+		vertices. It consists of eight cubes joined at 32 face with three 
+		cubes around each edge, and is dual to the 16-cell. Every
+		n-dimensional space has a cube analogue or measure polytope.`,
 	};
 }
 
@@ -215,7 +230,11 @@ export const cell24 = () => {
 			{ name: 'none', links: [ 0 ] },
 			{ name: 'one 16-cell', links: [ 0, 1 ] },
 			{ name: 'three 16-cells', links: [ 0, 1, 2, 3 ] }
-		]
+		],
+		description: `A unique object without an exact analogue in higher
+		or lower dimensions, the 24-cell is made of twenty-four octahedra
+		joined at 96 faces, with three around each edge. The 24-cell is
+		self-dual.`,
 	};
 }
 
@@ -398,7 +417,9 @@ export const cell120_layered = (max) => {
 			link_size: 0.02
 		},
 		nolink2opacity: true,
-		options: options
+		options: options,
+		description: `This version of the 120-cell lets you explore its
+		structure by building each layer from the 'north pole' onwards.`,
 	}
 }
 
@@ -434,7 +455,11 @@ export const cell120_inscribed = () => {
 			{ name: "none", links: [ 0 ]},
 			{ name: "one inscribed 600-cell", links: [ 0, 1 ] },
 			{ name: "five inscribed 600-cells", links: [ 0, 1, 2, 3, 4, 5 ] }
-		]
+		],
+		description: `The 120-cell is the four-dimensional analogue of the
+		dodecahedron, and consists of 120 dodecahedra joined at 720 faces,
+		with three dodecahedra around each edge. It is dual to the 600-cell,
+		and five 600-cells can be inscribed in its vertices.`,
 	}
 }
 
@@ -565,7 +590,12 @@ export const cell600 = () => {
 			{ name: "none", links: [ 0 ]},
 			{ name: "one 24-cell", links: [ 0, 1 ] },
 			{ name: "five 24-cells", links: [ 0, 1, 2, 3, 4, 5 ] }
-		]
+		],
+		description: `The 600-cell is the four-dimensional analogue of the
+		icosahedron, and consists of 600 tetrahedra joined at 1200 faces
+		with five tetrahedra around each edge. It is dual to the 120-cell.
+		Its 120 vertices can be partitioned into five sets which form the
+		vertices of five inscribed 24-cells.`,
 	}
 }
 
@@ -610,7 +640,9 @@ export const cell600_layered = () => {
 			link_size: 0.02
 		},
 		nolink2opacity: true,
-		options: options
+		options: options,
+		description: `This version of the 600-cell lets you explore its
+		structure by building each layer from the 'north pole' onwards.`,
 	}
 
 
@@ -631,7 +663,7 @@ export const snub24cell = () => {
 	links.map((l) => l.label = 0);
 
 	return {
-		name: 'snub 24-cell',
+		name: 'Snub 24-cell',
 		nodes: nodes,
 		links: links,
 		geometry: {
@@ -639,6 +671,11 @@ export const snub24cell = () => {
 			link_size: 0.02
 		},
 		options: [ { name: "--" } ],
+		description: `The snub 24-cell is a semiregular polytope which
+		connects the 24-cell with the 600-cell. It consists of 24 icosahedra
+		and 120 tetrahedra, and is constructed by removing one of the
+		five inscribed 24-cells from a 600-cell.`
+
 	}
 
 
@@ -695,7 +732,7 @@ export const dodecahedron = () => {
 	}
 
 	return {
-		name: 'dodecahedron',
+		name: 'Dodecahedron',
 		nodes: nodes,
 		links: links,
 		geometry: {
@@ -706,7 +743,12 @@ export const dodecahedron = () => {
 			{ name: "none", links: [ 0 ]},
 			{ name: "one tetrahedron", links: [ 0, 1 ] },
 			{ name: "five tetrahedra", links: [ 0, 1, 2, 3, 4, 5 ] }
-		]
+		],
+		description: `The dodecahedron is a three-dimensional polyhedron
+		which is included here so that you can see the partition of its
+		vertices into five interlocked tetrahedra. This structure is the
+		basis for the partition of the 120-cell's vertices into five
+		600-cells.`
 
 	}
 }
