From eb176ece329bb92c39a91f534c6b464794e8e8a7 Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 4 Jan 2026 14:48:25 +1100 Subject: [PATCH] Finished for now --- index.html | 12 +++++++++--- main.js | 49 +++++++++-------------------------------------- package-lock.json | 35 ++++++++++++++++++++++++++++++++- package.json | 1 + polytopes.js | 10 +--------- 5 files changed, 54 insertions(+), 53 deletions(-) diff --git a/index.html b/index.html index 449f7e9..a575ec6 100644 --- a/index.html +++ b/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 @@
+
-
release 1.1 | +
this is a bitcrushed version of FourJS which I hacked up for Genuary 2026 by Mike Lynch | - source
+ source
diff --git a/main.js b/main.js index 16db696..0b894ff 100644 --- a/main.js +++ b/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 =`

${name}

${description}

`; - } else { - docdiv.innerHTML =`

${name}

`; - } -} - -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 + '

[hide]'; - 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(); diff --git a/package-lock.json b/package-lock.json index 236b222..0cf6920 100644 --- 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", diff --git a/package.json b/package.json index 16d7f03..cb82131 100644 --- 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" }, diff --git a/polytopes.js b/polytopes.js index 8fc7669..137e485 100644 --- 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(), + cell600(), cell120_inscribed(), - cell120_layered() ]; }