From 63c3eb1dfee1dc2e035434e777f5ab1fb74d7957 Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Tue, 25 Jul 2023 09:05:06 +1000 Subject: [PATCH] refactored shapes out --- fourDShape.js | 100 +++++++++++++++++++++++++++++++++++++ main.js | 101 ++------------------------------------ shapes.js => polytopes.js | 0 3 files changed, 104 insertions(+), 97 deletions(-) create mode 100644 fourDShape.js rename shapes.js => polytopes.js (100%) diff --git a/fourDShape.js b/fourDShape.js new file mode 100644 index 0000000..2893b6b --- /dev/null +++ b/fourDShape.js @@ -0,0 +1,100 @@ +import * as THREE from 'three'; + + +const HYPERPLANE = 2; + +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 { + + constructor(node_ms, link_m, structure) { + super(); + this.node_ms = node_ms; + this.link_m = link_m; + this.nodes4 = structure.nodes; + this.nodes3 = {}; + this.links = structure.links; + this.initShapes(); + } + + makeNode(material, v3) { + const geometry = new THREE.SphereGeometry(NODE_SIZE); + const sphere = new THREE.Mesh(geometry, material); + sphere.position.copy(v3); + this.add(sphere); + return sphere; + } + + makeLink(link) { + const n1 = this.nodes3[link.source].v3; + const n2 = this.nodes3[link.target].v3; + const length = n1.distanceTo(n2); + const centre = new THREE.Vector3(); + centre.lerpVectors(n1, n2, 0.5); + const geometry = new THREE.CylinderGeometry(LINK_SIZE, LINK_SIZE, 1); + const cyl = new THREE.Mesh(geometry, this.link_m); + const edge = new THREE.Group(); + edge.add(cyl); + edge.position.copy(centre); + edge.scale.copy(new THREE.Vector3(1, 1, length)); + edge.lookAt(n2); + cyl.rotation.x = Math.PI / 2.0; + this.add(edge); + return edge; + } + + updateLink(link) { + const n1 = this.nodes3[link.source].v3; + const n2 = this.nodes3[link.target].v3; + const length = n1.distanceTo(n2); + const centre = new THREE.Vector3(); + centre.lerpVectors(n1, n2, 0.5); + link.object.scale.copy(new THREE.Vector3(1, 1, length)); + link.object.position.copy(centre); + link.object.lookAt(n2); + link.object.children[0].rotation.x = Math.PI / 2.0; + } + + initShapes() { + for( const n of this.nodes4 ) { + const v3 = fourDtoV3(n.x, n.y, n.z, n.w, []); + const material = this.node_ms[n.label]; + this.nodes3[n.id] = { + v3: v3, + object: this.makeNode(material, v3) + }; + } + for( const l of this.links ) { + l.object = this.makeLink(l); + } + } + + render3(rotations) { + for( const n of this.nodes4 ) { + const v3 = 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 + } + + for( const l of this.links ) { + this.updateLink(l); + } + } + + +} + +export { FourDShape }; \ No newline at end of file diff --git a/main.js b/main.js index 317d08f..92a5fe9 100644 --- a/main.js +++ b/main.js @@ -1,14 +1,12 @@ import * as THREE from 'three'; -import * as SHAPES from './shapes.js'; +import * as POLYTOPES from './polytopes.js'; +import { FourDShape } from './fourDShape.js'; -const NODE_SIZE = 0.08; -const LINK_SIZE = 0.02; const NODE_OPACITY = 1.0; const LINK_OPACITY = 0.7; -const HYPERPLANE = 2; @@ -85,98 +83,6 @@ function rotXY(theta) { } -// putting rotation here first - it's a matrix4 - -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 { - - constructor(node_ms, link_m, structure) { - super(); - this.node_ms = node_ms; - this.link_m = link_m; - this.nodes4 = structure.nodes; - this.nodes3 = {}; - this.links = structure.links; - this.initShapes(); - } - - makeNode(material, v3) { - const geometry = new THREE.SphereGeometry(NODE_SIZE); - const sphere = new THREE.Mesh(geometry, material); - sphere.position.copy(v3); - this.add(sphere); - return sphere; - } - - makeLink(link) { - const n1 = this.nodes3[link.source].v3; - const n2 = this.nodes3[link.target].v3; - const length = n1.distanceTo(n2); - const centre = new THREE.Vector3(); - centre.lerpVectors(n1, n2, 0.5); - const geometry = new THREE.CylinderGeometry(LINK_SIZE, LINK_SIZE, 1); - const cyl = new THREE.Mesh(geometry, this.link_m); - const edge = new THREE.Group(); - edge.add(cyl); - edge.position.copy(centre); - edge.scale.copy(new THREE.Vector3(1, 1, length)); - edge.lookAt(n2); - cyl.rotation.x = Math.PI / 2.0; - this.add(edge); - return edge; - } - - updateLink(link) { - const n1 = this.nodes3[link.source].v3; - const n2 = this.nodes3[link.target].v3; - const length = n1.distanceTo(n2); - const centre = new THREE.Vector3(); - centre.lerpVectors(n1, n2, 0.5); - link.object.scale.copy(new THREE.Vector3(1, 1, length)); - link.object.position.copy(centre); - link.object.lookAt(n2); - link.object.children[0].rotation.x = Math.PI / 2.0; - } - - initShapes() { - for( const n of this.nodes4 ) { - const v3 = fourDtoV3(n.x, n.y, n.z, n.w, []); - const material = this.node_ms[n.label]; - this.nodes3[n.id] = { - v3: v3, - object: this.makeNode(material, v3) - }; - } - for( const l of this.links ) { - l.object = this.makeLink(l); - } - } - - render3(rotations) { - for( const n of this.nodes4 ) { - const v3 = 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 - } - - for( const l of this.links ) { - this.updateLink(l); - } - } - - -} - @@ -195,11 +101,12 @@ scene.add(amblight); scene.background = new THREE.Color(0xdddddd); + const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); -const struct = SHAPES.cell24(); +const struct = POLYTOPES.cell24(); // TODO = automate going from struct labels to colours, this now only // works with the 24-cell diff --git a/shapes.js b/polytopes.js similarity index 100% rename from shapes.js rename to polytopes.js