bombinans
/
fourdjs
1
1
Fork 0
Code Issues 11 Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into feature-faces

feature-faces
Mike Lynch 2023-07-31 17:33:40 +10:00
parent 19c73d0f80 c500957609
commit bf0b0559ef
5 changed files with 315 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
fourDShape.js
View File

@ -3,10 +3,6 @@ import * as THREE from 'three';
const HYPERPLANE = 2; const HYPERPLANE = 2;
const NODE_SIZE = 0.01;
const LINK_SIZE = 0.01;
class FourDShape extends THREE.Group { class FourDShape extends THREE.Group {
@ -19,6 +15,9 @@ class FourDShape extends THREE.Group {
this.nodes3 = {}; this.nodes3 = {};
this.links = structure.links; this.links = structure.links;
this.faces = ( "faces" in structure ) ? structure.faces : []; this.faces = ( "faces" in structure ) ? structure.faces : [];
this.node_size = structure.geometry.node_size;
this.link_size = structure.geometry.link_size;
this.geom_scale = 1;
this.hyperplane = HYPERPLANE; this.hyperplane = HYPERPLANE;
this.initShapes(); this.initShapes();
} }
@ -36,7 +35,7 @@ class FourDShape extends THREE.Group {
} }
makeNode(material, v3) { makeNode(material, v3) {
const geometry = new THREE.SphereGeometry(NODE_SIZE); const geometry = new THREE.SphereGeometry(this.node_size);
const sphere = new THREE.Mesh(geometry, material); const sphere = new THREE.Mesh(geometry, material);
sphere.position.copy(v3); sphere.position.copy(v3);
this.add(sphere); this.add(sphere);
@ -49,7 +48,7 @@ class FourDShape extends THREE.Group {
const length = n1.distanceTo(n2); const length = n1.distanceTo(n2);
const centre = new THREE.Vector3(); const centre = new THREE.Vector3();
centre.lerpVectors(n1, n2, 0.5); centre.lerpVectors(n1, n2, 0.5);
const geometry = new THREE.CylinderGeometry(LINK_SIZE, LINK_SIZE, 1); const geometry = new THREE.CylinderGeometry(this.link_size, this.link_size, 1);
const cyl = new THREE.Mesh(geometry, material); const cyl = new THREE.Mesh(geometry, material);
const edge = new THREE.Group(); const edge = new THREE.Group();
edge.add(cyl); edge.add(cyl);
@ -67,7 +66,7 @@ class FourDShape extends THREE.Group {
const length = n1.distanceTo(n2); const length = n1.distanceTo(n2);
const centre = new THREE.Vector3(); const centre = new THREE.Vector3();
centre.lerpVectors(n1, n2, 0.5); centre.lerpVectors(n1, n2, 0.5);
link.object.scale.copy(new THREE.Vector3(1, 1, length)); link.object.scale.copy(new THREE.Vector3(this.geom_scale, this.geom_scale, length));
link.object.position.copy(centre); link.object.position.copy(centre);
link.object.lookAt(n2); link.object.lookAt(n2);
link.object.children[0].rotation.x = Math.PI / 2.0; link.object.children[0].rotation.x = Math.PI / 2.0;
@ -130,11 +129,12 @@ class FourDShape extends THREE.Group {
render3(rotations) { render3(rotations) {
this.scalev3 = new THREE.Vector3(this.geom_scale, this.geom_scale, this.geom_scale);
for( const n of this.nodes4 ) { for( const n of this.nodes4 ) {
const v3 = this.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].v3 = v3;
this.nodes3[n.id].object.position.copy(v3); this.nodes3[n.id].object.position.copy(v3);
// could do scaling here this.nodes3[n.id].object.scale.copy(this.scalev3);
} }
for( const l of this.links ) { for( const l of this.links ) {

149
gui.js 100644
View File

@ -0,0 +1,149 @@
import { GUI } from 'lil-gui';
const DEFAULT_SHAPE = '120-cell';
const DEFAULT_COLOR = 0x3293a9;
const DEFAULT_BG = 0x808080;
class FourDGUI {
constructor(createShape, setColor, setBackground) {
this.gui = new GUI();
this.parseLinkParams();
const guiObj = this;
this.params = {
shape: this.link['shape'] || DEFAULT_SHAPE,
thickness: this.link['thickness'] || 1,
color: this.link['color'] || DEFAULT_COLOR,
background: this.link['background'] || DEFAULT_BG,
hyperplane: this.link['hyperplane'] || 2,
xRotate: this.link['xRotate'] || 'YW',
yRotate: this.link['yRotate'] || 'XZ',
damping: false,
dtheta: this.link['dtheta'] || 0,
dpsi: this.link['dpsi'] || 0,
"copy link": function () { guiObj.copyUrl() }
};
this.gui.add(this.params, 'shape',
[ '5-cell', '16-cell', 'tesseract', '24-cell', '120-cell', '600-cell' ]
).onChange(createShape)
this.gui.add(this.params, 'hyperplane', 1.5, 4);
this.gui.add(this.params, 'thickness', 0.1, 4);
this.gui.addColor(this.params, 'color').onChange(setColor);
this.gui.addColor(this.params, 'background').onChange(setBackground);
this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
this.gui.add(this.params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
this.gui.add(this.params, 'damping');
this.gui.add(this.params, 'copy link');
}
numParam(param, parser, dft) {
const value = this.urlParams.get(param);
if( value ) {
const n = parser(value);
if( n !== NaN ) {
return n;
}
}
return dft;
}
stringToHex(cstr) {
return parseInt('0x' + cstr.substr(1));
}
hexToString(hex) {
return '#' + hex.toString(16);
}
parseLinkParams() {
this.linkUrl = new URL(window.location.toLocaleString());
this.link = {};
this.urlParams = this.linkUrl.searchParams;
for( const param of [ "shape", "xRotate", "yRotate" ]) {
const value = this.urlParams.get(param);
if( value ) {
this.link[param] = value;
}
}
const guiObj = this;
this.link['hyperplane'] = this.numParam('hyperplane', parseFloat, 2);
this.link['thickness'] = this.numParam('thickness', parseFloat, 1);
this.link['color'] = this.numParam(
'color', (s) => guiObj.stringToHex(s), DEFAULT_COLOR
);
this.link['background'] = this.numParam(
'background', (s) => guiObj.stringToHex(s), DEFAULT_BG
);
this.link['dpsi'] = this.numParam('dpsi', parseFloat, 0);
this.link['dtheta'] = this.numParam('dtheta', parseFloat, 0);
}
copyUrl() {
const url = new URL(this.linkUrl.origin + this.linkUrl.pathname);
url.searchParams.append("shape", this.params.shape);
url.searchParams.append("thickness", this.params.thickness.toString());
url.searchParams.append("color", this.hexToString(this.params.color));
url.searchParams.append("background", this.hexToString(this.params.background));
url.searchParams.append("hyperplane", this.params.hyperplane.toString());
url.searchParams.append("xRotate", this.params.xRotate);
url.searchParams.append("yRotate", this.params.yRotate);
url.searchParams.append("dtheta", this.params.dtheta.toString());
url.searchParams.append("dpsi", this.params.dpsi.toString());
this.copyTextToClipboard(url);
}
copyTextToClipboard(text) {
if (!navigator.clipboard) {
this.fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
}
export { FourDGUI };

202
main.js
View File

@ -1,145 +1,39 @@
import * as THREE from 'three'; import * as THREE from 'three';
import * as POLYTOPES from './polytopes.js';
import * as POLYTOPES from './polytopes.js';
import { rotfn } from './rotation.js';
import { FourDGUI } from './gui.js';
import { FourDShape } from './fourDShape.js'; import { FourDShape } from './fourDShape.js';
import { GUI } from 'lil-gui'; // scene, lights and camera
const DEFAULT_SHAPE = '5-cell';
// hacky stuff for 4d rotations
// see https://math.stackexchange.com/questions/1402362/can-rotations-in-4d-be-given-an-explicit-matrix-form#1402376
function rotZW(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
ctheta, -stheta, 0, 0,
stheta, ctheta, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
}
function rotYW(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
ctheta, 0, -stheta, 0,
0, 1, 0, 0,
stheta, 0, ctheta, 0,
0, 0, 0, 1,
);
}
function rotYZ(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
ctheta, 0, 0, -stheta,
0, 1, 0, 0,
0, 0, 1, 0,
stheta, 0, 0, ctheta,
);
}
function rotXW(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
1, 0, 0, 0,
0, ctheta, -stheta, 0,
0, stheta, ctheta, 0,
0, 0, 0, 1
);
}
function rotXZ(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
1, 0, 0, 0,
0, ctheta, 0, -stheta,
0, 0, 1, 0,
0, stheta, 0, ctheta,
);
}
function rotXY(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, ctheta, -stheta,
0, 0, stheta, ctheta,
);
}
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const light = new THREE.PointLight(0xffffff, 2); const light = new THREE.PointLight(0xffffff, 2);
light.position.set(10, 10, 10); light.position.set(10, 10, 10);
scene.add(light); scene.add(light);
const light2 = new THREE.PointLight(0xffffff, 2); const light2 = new THREE.PointLight(0xffffff, 2);
light2.position.set(-10, 5, 10); light2.position.set(-10, 5, 10);
scene.add(light); scene.add(light);
const amblight = new THREE.AmbientLight(0xffffff, 0.5); const amblight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(amblight); scene.add(amblight);
scene.background = new THREE.Color(0xdddddd); camera.position.z = 4;
const renderer = new THREE.WebGLRenderer({antialias: true}); const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement ); document.body.appendChild( renderer.domElement );
// set up colours and materials for gui callbacks
const NODE_OPACITY = 1.0; scene.background = new THREE.Color(0x808080);
const LINK_OPACITY = 1.0; const material = new THREE.MeshStandardMaterial({ color: 0x3293a9 });
const FACE_OPACITY = 0.2;
const node_ms = [ const node_ms = [ material ];
new THREE.MeshStandardMaterial( { color: 0x90ebff } )
];
for( const node_m of node_ms ) { const link_ms = [ material ];
node_m.roughness = 0.9;
if( NODE_OPACITY < 1.0 ) {
node_m.transparent = true;
node_m.opacity = NODE_OPACITY;
}
}
const link_ms = [
new THREE.MeshStandardMaterial( { color: 0x90ebff } )
];
for( const link_m of link_ms ) {
link_m.metalness = 0.8;
link_m.roughness = 0.1;
if( LINK_OPACITY < 1.0 ) {
link_m.transparent = true;
link_m.opacity = LINK_OPACITY;
}
}
const face_ms = [ const face_ms = [
@ -161,7 +55,6 @@ const STRUCTURES = {
'600-cell': POLYTOPES.cell600() '600-cell': POLYTOPES.cell600()
}; };
let shape = false; let shape = false;
function createShape(name) { function createShape(name) {
@ -171,16 +64,21 @@ function createShape(name) {
console.log(STRUCTURES[name]); console.log(STRUCTURES[name]);
shape = new FourDShape(node_ms, link_ms, face_ms, STRUCTURES[name]); shape = new FourDShape(node_ms, link_ms, face_ms, STRUCTURES[name]);
scene.add(shape); scene.add(shape);
} }
// initialise gui and read params from URL
// callbacks to do things which are triggered by controls: reset the shape,
// change the colors. Otherwise we just read stuff from gui.params.
const gui = new FourDGUI(
createShape,
(c) => { material.color = new THREE.Color(c) },
(c) => { scene.background = new THREE.Color(c) },
);
createShape(DEFAULT_SHAPE); material.color = new THREE.Color(gui.params.color);
scene.background = new THREE.Color(gui.params.background);
camera.position.z = 4;
const dragK = 0.005; const dragK = 0.005;
const damping = 0.99; const damping = 0.99;
@ -191,8 +89,6 @@ let theta0 = 0;
let psi0 = 0; let psi0 = 0;
let dragx0 = 0; let dragx0 = 0;
let dragy0 = 0; let dragy0 = 0;
let dtheta = 0;
let dpsi = 0;
let dragging = false; let dragging = false;
@ -210,8 +106,8 @@ renderer.domElement.addEventListener("pointermove", (event) => {
if( event.buttons === 1 ) { if( event.buttons === 1 ) {
const theta1 = theta0 + (event.clientX - dragx0) * dragK; const theta1 = theta0 + (event.clientX - dragx0) * dragK;
const psi1 = psi0 + (event.clientY - dragy0) * dragK; const psi1 = psi0 + (event.clientY - dragy0) * dragK;
dtheta = theta1 - theta; gui.params.dtheta = theta1 - theta;
dpsi = psi1 - psi; gui.params.dpsi = psi1 - psi;
theta = theta1; theta = theta1;
psi = psi1; psi = psi1;
} }
@ -221,58 +117,26 @@ renderer.domElement.addEventListener("pointerup", (event) => {
dragging = false; dragging = false;
}) })
createShape(gui.params.shape);
// set up GUI
const gui = new GUI();
const gui_params = {
shape: DEFAULT_SHAPE,
hyperplane: 2,
xRotate: 'YW',
yRotate: 'XZ',
damping: false
};
gui.add(gui_params, 'shape',
[ '5-cell', '16-cell', 'tesseract', '24-cell', '120-cell', '600-cell' ]
).onChange(createShape)
gui.add(gui_params, 'hyperplane', 1.5, 4);
gui.add(gui_params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
gui.add(gui_params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
gui.add(gui_params, 'damping');
const ROTFN = {
XY: rotXY,
XZ: rotXZ,
XW: rotXW,
YZ: rotYZ,
YW: rotYW,
ZW: rotZW,
};
const rotation = new THREE.Matrix4();
function animate() { function animate() {
requestAnimationFrame( animate ); requestAnimationFrame( animate );
if( ! dragging ) { if( ! dragging ) {
theta += dtheta; theta += gui.params.dtheta;
psi += dpsi; psi += gui.params.dpsi;
if( gui_params.damping ) { if( gui.params.damping ) {
dtheta = dtheta * damping; gui.params.dtheta = gui.params.dtheta * damping;
dpsi = dpsi * damping; gui.params.dpsi = gui.params.dpsi * damping;
} }
} }
const rotations = [ const rotations = [
ROTFN[gui_params.xRotate](theta), rotfn[gui.params.xRotate](theta),
ROTFN[gui_params.yRotate](psi) rotfn[gui.params.yRotate](psi)
]; ];
shape.hyperplane = gui_params.hyperplane; shape.hyperplane = gui.params.hyperplane;
shape.geom_scale = gui.params.thickness;
shape.render3(rotations); shape.render3(rotations);
renderer.render( scene, camera ); renderer.render( scene, camera );

47
polytopes.js
View File

@ -17,7 +17,7 @@ function dist2(n1, n2) {
return (n1.x - n2.x) ** 2 + (n1.y - n2.y) ** 2 + (n1.z - n2.z) ** 2 + (n1.w - n2.w) ** 2; return (n1.x - n2.x) ** 2 + (n1.y - n2.y) ** 2 + (n1.z - n2.z) ** 2 + (n1.w - n2.w) ** 2;
} }
function auto_detect_edges(nodes, neighbours) { function auto_detect_edges(nodes, neighbours, debug=false) {
const seen = {}; const seen = {};
const nnodes = nodes.length; const nnodes = nodes.length;
const links = []; const links = [];
@ -29,6 +29,10 @@ function auto_detect_edges(nodes, neighbours) {
} }
d2.sort((a, b) => a.d2 - b.d2); d2.sort((a, b) => a.d2 - b.d2);
const closest = d2.slice(1, neighbours + 1); const closest = d2.slice(1, neighbours + 1);
if( debug ) {
console.log(`closest = ${closest.length}`);
console.log(closest);
}
for( const e of closest ) { for( const e of closest ) {
const ids = [ n1.id, e.id ]; const ids = [ n1.id, e.id ];
ids.sort(); ids.sort();
@ -40,6 +44,9 @@ function auto_detect_edges(nodes, neighbours) {
} }
} }
} }
if( debug ) {
console.log(`Found ${links.length} edges`)
}
return links; return links;
} }
@ -67,7 +74,11 @@ export const cell5 = () => {
{ id:8, source:3, target: 4}, { id:8, source:3, target: 4},
{ id:9, source:3, target: 5}, { id:9, source:3, target: 5},
{ id:10, source:4, target: 5}, { id:10, source:4, target: 5},
] ],
geometry: {
node_size: 0.02,
link_size: 0.02
}
}; };
}; };
@ -76,13 +87,15 @@ export const cell16 = () => {
let nodes = PERMUTE.coordinates([1, 1, 1, 1], 0); let nodes = PERMUTE.coordinates([1, 1, 1, 1], 0);
nodes = nodes.filter((n) => n.x * n.y * n.z * n.w > 0); nodes = nodes.filter((n) => n.x * n.y * n.z * n.w > 0);
scale_and_index(nodes, 0.75); scale_and_index(nodes, 0.75);
console.log('cell16 auto_detect_edges');
console.log(nodes);
const links = auto_detect_edges(nodes, 6); const links = auto_detect_edges(nodes, 6);
return { return {
nodes: nodes, nodes: nodes,
links: links links: links,
geometry: {
node_size: 0.02,
link_size: 0.02
}
}; };
}; };
@ -94,7 +107,11 @@ export const tesseract = () => {
return { return {
nodes: nodes, nodes: nodes,
links: links links: links,
geometry: {
node_size: 0.02,
link_size: 0.02
}
}; };
} }
@ -107,7 +124,11 @@ export const cell24 = () => {
return { return {
nodes: nodes, nodes: nodes,
links: links links: links,
geometry: {
node_size: 0.02,
link_size: 0.02
}
}; };
} }
@ -218,6 +239,10 @@ export const cell120 = () => {
return { return {
nodes: nodes, nodes: nodes,
links: links, links: links,
geometry: {
node_size: 0.02,
link_size: 0.02
},
faces: faces faces: faces
} }
} }
@ -238,10 +263,14 @@ function make_600cell_vertices() {
export const cell600 = () => { export const cell600 = () => {
const nodes = make_600cell_vertices(); const nodes = make_600cell_vertices();
const links = auto_detect_edges(nodes, 20); const links = auto_detect_edges(nodes, 12);
return { return {
nodes: nodes, nodes: nodes,
links: links links: links,
geometry: {
node_size: 0.02,
link_size: 0.02
}
} }
} }

85
rotation.js 100644
View File

@ -0,0 +1,85 @@
// hacky stuff for 4d rotations
// see https://math.stackexchange.com/questions/1402362/can-rotations-in-4d-be-given-an-explicit-matrix-form#1402376
import * as THREE from 'three';
function rotZW(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
ctheta, -stheta, 0, 0,
stheta, ctheta, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
}
function rotYW(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
ctheta, 0, -stheta, 0,
0, 1, 0, 0,
stheta, 0, ctheta, 0,
0, 0, 0, 1,
);
}
function rotYZ(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
ctheta, 0, 0, -stheta,
0, 1, 0, 0,
0, 0, 1, 0,
stheta, 0, 0, ctheta,
);
}
function rotXW(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
1, 0, 0, 0,
0, ctheta, -stheta, 0,
0, stheta, ctheta, 0,
0, 0, 0, 1
);
}
function rotXZ(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
1, 0, 0, 0,
0, ctheta, 0, -stheta,
0, 0, 1, 0,
0, stheta, 0, ctheta,
);
}
function rotXY(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, ctheta, -stheta,
0, 0, stheta, ctheta,
);
}
export const rotfn = {
XY: rotXY,
XZ: rotXZ,
XW: rotXW,
YZ: rotYZ,
YW: rotYW,
ZW: rotZW,
};