Fixed base URL and link back for genuary release

Added link to this branch
Finished for now
2026-01-04 15:00:39 +11:00 · 2026-01-04 14:51:11 +11:00 · 2026-01-04 14:48:25 +11:00 · 2026-01-04 13:48:10 +11:00
6 changed files with 82 additions and 94 deletions
--- a/index.html
+++ b/index.html
@ -14,6 +14,22 @@
 				font-family: sans-serif;
 				padding: 1em;
 			}
+			div#container {
+		            position: fixed;
+		            top: 20px;
+		            left: 20px;
+			}
+			canvas {
+                            width: 512px;
+                            height: 512px;
+                            image-rendering: crisp-edges; /* for firefox */ 
+                            image-rendering: pixelated;
+                        }
+                        div#giflink {
+                            position.fixed;
+                            top: 600px;
+                            left: 300px;
+                        }
 			div#release_notes {
 				position: fixed;
 				top: 0;
@ -34,11 +50,15 @@
 	</head>
 	<body>
 		<script type="module" src="/main.js"></script>
+		<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="https://etc.mikelynch.org/genuary26/">Back</a> |
+			<a target="_blank" href="https://git.tilde.town/bombinans/fourdjs/src/branch/feature-pixels/">source</a></div>
 	</body>
 </html>
--- a/main.js
+++ b/main.js
@ -30,7 +30,7 @@ const CAMERA_K = 5;
 // scene, lights and camera

 const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );
 const light = new THREE.PointLight(0xffffff, 2);
 light.position.set(10, 10, 10);
 scene.add(light);
@ -45,16 +45,19 @@ camera.position.set(0, 0, CAMERA_K / 2);
 camera.lookAt(0, 0, 0);
 //camera.position.z = 4;

-const renderer = new THREE.WebGLRenderer({antialias: true});
-renderer.setSize( window.innerWidth, window.innerHeight );
+const canvas = document.getElementById("canvas");
+
+const renderer = new THREE.WebGLRenderer({antialias: true, canvas: canvas});
+renderer.setSize(40,40);
+
+canvas.style.width="400px";
+canvas.style.height="400px";

 renderer.localClippingEnabled = true;

-
-document.body.appendChild( renderer.domElement );
+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);

@ -108,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
@ -192,7 +159,6 @@ let gui;

 function changeShape() {
 	createShape(gui.params.shape);
-	displayDocs(gui.params.shape);
 }

 function setVisibility(option_name) {
@ -217,7 +183,7 @@ gui = new FourDGUI(
 	setNodeOpacity: setNodeOpacity,
 	setLinkOpacity: setLinkOpacity,
 	setVisibility: setVisibility,
-	showDocs: showDocs,
+	showDocs: () => {},
    }
 );

@ -227,6 +193,8 @@ setBackground(gui.params.background);

 const dragK = 0.005;
 const damping = 0.99;
+const dtheta =  2 * Math.PI / 480;
+const dpsi = 2 * Math.PI / 480;

 let theta = 0;
 let psi = 0;
@ -235,49 +203,21 @@ let psi0 = 0;
 let dragx0 = 0;
 let dragy0 = 0;
 let dragging = false;
+let frame = 0;
+const FRAME_MAX = 8;
+let completed = false;


-renderer.domElement.addEventListener("pointerdown", (event) => {
-	if( event.buttons === 1 ) {
-		theta0 = theta;
-		psi0 = psi;
-		dragx0 = event.clientX;
-		dragy0 = event.clientY;
-		dragging = true;
-	}
-})
-
-renderer.domElement.addEventListener("pointermove", (event) => {
-	if( event.buttons === 1 ) {
-		const theta1 = theta0 + (event.clientX - dragx0) * dragK;
-		const psi1 = psi0 + (event.clientY - dragy0) * dragK;
-		gui.params.dtheta = theta1 - theta;
-		gui.params.dpsi = psi1 - psi;
-		theta = theta1;
-		psi = psi1;
-	}
-})
-
-renderer.domElement.addEventListener("pointerup", (event) => {
-	dragging = false;
-})

 createShape(gui.params.shape, gui.params.option);
-displayDocs(gui.params.shape);

 function animate() {
 	requestAnimationFrame( animate );

-	if( ! dragging ) {
-		theta += gui.params.dtheta;
-		psi += gui.params.dpsi;
-		if( gui.params.damping ) {
-			gui.params.dtheta = gui.params.dtheta * damping;
-			gui.params.dpsi = gui.params.dpsi * damping;
-		}
-	}
+	theta += dtheta;
+	psi += dpsi;

-	const rotations = [
+const rotations = [
 		rotfn[gui.params.xRotate](theta), 
 		rotfn[gui.params.yRotate](psi)
 	];
@ -291,5 +231,7 @@ function animate() {


 	renderer.render( scene, camera );
+
 }
+
 animate();
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
  },
--- a/polytopes.js
+++ b/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_layered(),
 	 	cell120_inscribed(),
-	 	cell120_layered()
 	 	];
 }

--- a/vite.config.js
+++ b/vite.config.js
@ -3,7 +3,7 @@
 import { defineConfig, loadEnv } from 'vite';

 export default defineConfig({
-	base: '/fourjs/',
+	base: '/genuary26/04/',
 	build: {
 		rollupOptions: {
 			output: {
Author	SHA1	Message	Date
Mike Lynch	32cae6854f	Fixed base URL and link back for genuary release	2026-01-04 15:00:39 +11:00
Mike Lynch	e0b3ad967b	Added link to this branch	2026-01-04 14:51:11 +11:00
Mike Lynch	eb176ece32	Finished for now	2026-01-04 14:48:25 +11:00
Mike Lynch	37218678d5	Got a pixelated version of the main renderer	2026-01-04 13:48:10 +11:00