diff --git a/fourDShape.js b/fourDShape.js index c4b61dc..00040d8 100644 --- a/fourDShape.js +++ b/fourDShape.js @@ -7,15 +7,6 @@ const NODE_SIZE = 0.08; const LINK_SIZE = 0.02; -function fourDtoV3(x, y, z, w, rotations) { - const v4 = new THREE.Vector4(x, y, z, w); - for ( const m4 of rotations ) { - v4.applyMatrix4(m4); - } - const k = HYPERPLANE / (HYPERPLANE + v4.w); - return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k); -} - class FourDShape extends THREE.Group { @@ -26,9 +17,12 @@ class FourDShape extends THREE.Group { this.nodes4 = structure.nodes; this.nodes3 = {}; this.links = structure.links; + this.hyperplane = HYPERPLANE; this.initShapes(); } + + // if a node/link has no label, use the 0th material getMaterial(entity, materials) { @@ -77,9 +71,19 @@ class FourDShape extends THREE.Group { link.object.children[0].rotation.x = Math.PI / 2.0; } + fourDtoV3(x, y, z, w, rotations) { + const v4 = new THREE.Vector4(x, y, z, w); + for ( const m4 of rotations ) { + v4.applyMatrix4(m4); + } + const k = this.hyperplane / (this.hyperplane + v4.w); + return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k); + } + + initShapes() { for( const n of this.nodes4 ) { - const v3 = fourDtoV3(n.x, n.y, n.z, n.w, []); + const v3 = this.fourDtoV3(n.x, n.y, n.z, n.w, []); const material = this.getMaterial(n, this.node_ms); this.nodes3[n.id] = { v3: v3, @@ -92,9 +96,10 @@ class FourDShape extends THREE.Group { } } + render3(rotations) { for( const n of this.nodes4 ) { - const v3 = fourDtoV3(n.x, n.y, n.z, n.w, rotations); + const v3 = this.fourDtoV3(n.x, n.y, n.z, n.w, rotations); this.nodes3[n.id].v3 = v3; this.nodes3[n.id].object.position.copy(v3); // could do scaling here diff --git a/main.js b/main.js index 2df7bbe..873137c 100644 --- a/main.js +++ b/main.js @@ -4,6 +4,7 @@ import * as POLYTOPES from './polytopes.js'; import { FourDShape } from './fourDShape.js'; +import { GUI } from 'lil-gui'; @@ -149,12 +150,29 @@ for( const link_m of link_ms ) { } } -const struct = POLYTOPES.cell24(); +const STRUCTURES = { + '5-cell': POLYTOPES.cell5(), + '16-cell': POLYTOPES.cell16(), + 'tesseract': POLYTOPES.tesseract(), + '24-cell': POLYTOPES.cell24(), +}; + +let shape = false; + +function createShape(name) { + if( shape ) { + scene.remove(shape); + } + + shape = new FourDShape(node_ms, link_ms, STRUCTURES[name]); + scene.add(shape); + +} -const shape = new FourDShape(node_ms, link_ms, struct); -scene.add(shape); + +createShape('24-cell'); camera.position.z = 4; @@ -185,6 +203,34 @@ renderer.domElement.addEventListener("mousemove", (event) => { } }) +// set up GUI + +const gui = new GUI(); + +const gui_params = { + shape: '24-cell', + hyperplane: 2, + xRotate: 'YW', + yRotate: 'XZ', +}; + +gui.add(gui_params, 'shape', + [ '5-cell', '16-cell', 'tesseract', '24-cell' ] + ).onChange(createShape) + +gui.add(gui_params, 'hyperplane', 1, 4); +gui.add(gui_params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]); +gui.add(gui_params, 'yRotate', [ 'XZ', 'XY', 'XW' ]); + +const ROTFN = { + XY: rotXY, + XZ: rotXZ, + XW: rotXW, + YZ: rotYZ, + YW: rotYW, + ZW: rotZW, +}; + const rotation = new THREE.Matrix4(); @@ -192,7 +238,11 @@ const rotation = new THREE.Matrix4(); function animate() { requestAnimationFrame( animate ); - const rotations = [rotYZ(theta), rotXZ(psi)]; + const rotations = [ + ROTFN[gui_params.xRotate](theta), + ROTFN[gui_params.yRotate](psi) + ]; + shape.hyperplane = gui_params.hyperplane; shape.render3(rotations); renderer.render( scene, camera ); diff --git a/package-lock.json b/package-lock.json index 8a313b4..643cdbd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "dependencies": { + "lil-gui": "^0.18.2", "three": "^0.154.0" }, "devDependencies": { @@ -414,6 +415,11 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/lil-gui": { + "version": "0.18.2", + "resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.18.2.tgz", + "integrity": "sha512-DgdrLy3/KGC0PiQLKgOcJMPItP4xY4iWgJ9+91Zaxfr8GCTmMps05QS9w9jW7yspILlbscbquwjOwxmWnSx5Uw==" + }, "node_modules/nanoid": { "version": "3.3.6", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", diff --git a/package.json b/package.json index dc3017c..5bb9681 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "lil-gui": "^0.18.2", "three": "^0.154.0" }, "devDependencies": {