Finished for now

index.html

@@ -17,7 +17,7 @@
 			div#container {
 		            position: fixed;
 		            top: 20px;
-		            left: 300px;
+		            left: 20px;
 			}
 			canvas {
                             width: 512px;
@@ -25,6 +25,11 @@
                             image-rendering: crisp-edges; /* for firefox */ 
                             image-rendering: pixelated;
                         }
+                        div#giflink {
+                            position.fixed;
+                            top: 600px;
+                            left: 300px;
+                        }
 			div#release_notes {
 				position: fixed;
 				top: 0;
@@ -48,11 +53,12 @@
 		<div id="container">
                     <canvas id="canvas" style="width: 512px; height: 512px"></canvas>
 		</div>
+		<div id="giflink"></div>
 		<div id="description"></div>
 		<div id="release_notes"></div>
-		<div id="info"><a href="#" id="show_notes">release 1.1</a> |
+		<div id="info">this is a bitcrushed version of <a href="">FourJS</a> which I hacked up for <a href="https://genuary.art">Genuary 2026</a>
 
     		by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> |
-			<a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div>
+			<a target="_blank" href="">source</a></div>
 	</body>
 </html>

main.js

@@ -55,8 +55,9 @@ canvas.style.height="400px";
 
 renderer.localClippingEnabled = true;
 
-// set up colours and materials for gui callbacks
+const gl = renderer.getContext();
 
+// set up colours and materials for gui callbacks
 scene.background = new THREE.Color(DEFAULTS.background);
 const node_colours = get_colours(DEFAULTS.color);
 
@@ -110,42 +111,6 @@ 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>`;
-	}
-}
-
-function showDocs(visible) {
-	const docdiv = document.getElementById("description");
-	if( visible ) {
-		docdiv.style.display = '';
-	} else {
-		docdiv.style.display = 'none';
-	}
-}
-
-function releaseNotes() {
-    showDocs(false);
-    const reldiv = document.getElementById("release_notes");
-    reldiv.style.display = '';
-    reldiv.innerHTML = RELEASE_NOTES + '<p><a id="no_notes" href="#">[hide]</a>';
-    const goaway = document.getElementById("no_notes");
-    goaway.addEventListener('click', noNotes);
-    }
-
-function noNotes() {
-    	const reldiv = document.getElementById("release_notes");
- 	reldiv.style.display = 'none';
-}
-
-const relnotes = document.getElementById('show_notes');
-
-relnotes.addEventListener('click', releaseNotes);
 
 
 // initialise gui and read params from URL
@@ -194,7 +159,6 @@ let gui;
 
 function changeShape() {
 	createShape(gui.params.shape);
-	displayDocs(gui.params.shape);
 }
 
 function setVisibility(option_name) {
@@ -219,7 +183,7 @@ gui = new FourDGUI(
 	setNodeOpacity: setNodeOpacity,
 	setLinkOpacity: setLinkOpacity,
 	setVisibility: setVisibility,
-	showDocs: showDocs,
+	showDocs: () => {},
     }
 );
 
@@ -239,10 +203,13 @@ let psi0 = 0;
 let dragx0 = 0;
 let dragy0 = 0;
 let dragging = false;
+let frame = 0;
+const FRAME_MAX = 8;
+let completed = false;
+
 
 
 createShape(gui.params.shape, gui.params.option);
-displayDocs(gui.params.shape);
 
 function animate() {
 	requestAnimationFrame( animate );
@@ -264,5 +231,7 @@ const rotations = [
 
 
 	renderer.render( scene, camera );
+
 }
+
 animate();

package-lock.json

@@ -4,10 +4,10 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "fourdjs",
       "dependencies": {
         "color": "^4.2.3",
         "color-scheme": "^1.0.1",
+        "gl-gif": "^3.1.0",
         "lil-gui": "^0.19.0",
         "three": "^0.154.0"
       },
@@ -367,6 +367,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/canvas-pixels": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/canvas-pixels/-/canvas-pixels-0.0.0.tgz",
+      "integrity": "sha512-3XBmW3GbXKHyOJagEKQxYpSP2uVE2Vs9PDvlrJk7PycIVbDMN6rUMUYCfVanjXAIJ4/77Bl6/qMiJCHDwr1MHA==",
+      "license": "MIT"
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -409,6 +415,14 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "node_modules/dtype": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/dtype/-/dtype-0.1.0.tgz",
+      "integrity": "sha512-BXcer1Q6oDjU7DnJDq/G9YMQX9RSB4DCPvj/bxuflAdCv2tLzV9ZYFjw5sEeSdkcaB59tIzBe8hkd2S4j054tA==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -460,6 +474,16 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/gl-gif": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/gl-gif/-/gl-gif-3.1.0.tgz",
+      "integrity": "sha512-ejNqRMlB2Fs/saaSzNlTMF4+OlOwVoCZNOtnWhl5lt/gvlzw/Z7u0TTHYxo6JkOoJIu/5nB8YFFZliSQCbIpPw==",
+      "license": "MIT",
+      "dependencies": {
+        "canvas-pixels": "0.0.0",
+        "tab64": "0.0.1"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
@@ -555,6 +579,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tab64": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/tab64/-/tab64-0.0.1.tgz",
+      "integrity": "sha512-GTZEo5wqncJDESZqBEC95bPZim+OPP23QDAIiL5s6mlrLzIovn03YM9xP6ZRA/+7rHt0Ug+eSRzwBDi0l1BpfA==",
+      "license": "MIT",
+      "dependencies": {
+        "dtype": "~0.1.0"
+      }
+    },
     "node_modules/three": {
       "version": "0.154.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",

package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "color": "^4.2.3",
     "color-scheme": "^1.0.1",
+    "gl-gif": "^3.1.0",
     "lil-gui": "^0.19.0",
     "three": "^0.154.0"
   },

polytopes.js

@@ -900,20 +900,12 @@ export const icosahedron = () => {
 
 export const build_all = () => {
 	return [
-		tetrahedron(),
-		octahedron(),
-		cube(),
-		icosahedron(),
-	 	dodecahedron(),
 	 	cell5(),
 		cell16(),
 		tesseract(),
 		cell24(),
-		snub24cell(),
+        	cell600(),
-		cell600(),
-		cell600_layered(),
 	 	cell120_inscribed(),
-	 	cell120_layered()
 	 	];
 }