Finished for now
This commit is contained in:
Mike Lynch
parent
37218678d5
commit
eb176ece32
12
index.html
12
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>
|
||||
|
||||
49
main.js
49
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();
|
||||
|
||||
35
package-lock.json
generated
35
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -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()
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user