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

almost through big refactor

feature-faces
Mike Lynch 2023-07-29 16:23:08 +10:00
parent de0f3dc848
commit d253a851e9
4 changed files with 197 additions and 351 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 {
@ -17,6 +13,9 @@ class FourDShape extends THREE.Group {
this.nodes4 = structure.nodes; this.nodes4 = structure.nodes;
this.nodes3 = {}; this.nodes3 = {};
this.links = structure.links; this.links = structure.links;
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();
} }
@ -34,7 +33,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);
@ -47,7 +46,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);
@ -65,7 +64,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;
@ -98,11 +97,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 ) {

199
gui.js
View File

@ -7,84 +7,141 @@ const DEFAULT_BG = 0xdddddd;
class FourDGUI {
// set up GUI constructor(createShape, setColor, setBackground) {
this.gui = new GUI();
const gui = new GUI(); this.parseLinkParams();
this.params = {
const linkUrl = new URL(window.location.toLocaleString()); shape: this.link['shape'] || DEFAULT_SHAPE,
thickness: this.link['thickness'] || 1,
const link_params = {}; color: this.link['color'] || DEFAULT_COLOR,
background: this.link['background'] || DEFAULT_BG,
const urlParams = linkUrl.searchParams; hyperplane: this.link['hyperplane'] || 2,
for( const param of [ "shape", "xRotate", "yRotate" ]) { xRotate: this.link['xRotate'] || 'YW',
const value = urlParams.get(param); yRotate: this.link['yRotate'] || 'XZ',
if( value ) {
link_params[param] = value;
}
}
link_params['hyperplane'] = floatParam(urlParams, 'hyperplane');
link_params['thickness'] = floatParam(urlParams, 'thickness');
link_params['color'] = colorParam(urlParams, 'color', DEFAULT_COLOR);
link_params['background'] = colorParam(urlParams, 'background', DEFAULT_BG);
dpsi = floatParam(urlParams, 'dpsi');
dtheta = floatParam(urlParams, 'dtheta');
const gui_params = {
shape: link_params['shape'] || DEFAULT_SHAPE,
thickness: link_params['thickness'] || 1,
color: link_params['color'] || DEFAULT_COLOR,
background: link_params['background'] || DEFAULT_BG,
hyperplane: link_params['hyperplane'] || 2,
xRotate: link_params['xRotate'] || 'YW',
yRotate: link_params['yRotate'] || 'XZ',
damping: false, damping: false,
"copy link": function () { dtheta: this.link['dtheta'],
const url = new URL(linkUrl.origin + linkUrl.pathname); dpsi: this.link['dpsi'],
url.searchParams.append("shape", gui_params.shape); "copy link": function () { this.copyUrl() }
url.searchParams.append("thickness", gui_params.thickness.toString());
url.searchParams.append("color", hexToString(gui_params.color));
url.searchParams.append("background", hexToString(gui_params.background));
url.searchParams.append("hyperplane", gui_params.hyperplane.toString());
url.searchParams.append("xRotate", gui_params.xRotate);
url.searchParams.append("yRotate", gui_params.yRotate);
url.searchParams.append("dtheta", dtheta.toString());
url.searchParams.append("dpsi", dpsi.toString());
copyTextToClipboard(url);
}
}; };
this.gui.add(this.params, 'shape',
gui.add(gui_params, 'shape',
[ '5-cell', '16-cell', 'tesseract', '24-cell', '120-cell', '600-cell' ] [ '5-cell', '16-cell', 'tesseract', '24-cell', '120-cell', '600-cell' ]
).onChange(createShape) ).onChange(createShape)
gui.add(gui_params, 'hyperplane', 1.5, 4); this.gui.add(this.params, 'hyperplane', 1.5, 4);
gui.add(gui_params, 'thickness', 0.01, 4); this.gui.add(this.params, 'thickness', 0.01, 4);
gui.addColor(gui_params, 'color').onChange((c) => { this.gui.addColor(this.params, 'color').onChange(setColor);
console.log(`Setting material colour to ${c}`); this.gui.addColor(this.params, 'background').onChange(setBackground);
material.color = new THREE.Color(c); 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;
}
}
this.link['hyperplane'] = this.numParam('hyperplane', parseFloat, 2);
this.link['thickness'] = this.numParam('thickness', parseFloat, 1);
this.link['color'] = this.numParam(
'color', (s) => this.stringToHex(s), DEFAULT_COLOR
);
this.link['background'] = this.numParam(
'background', (s) => this.stringToHex(s), DEFAULT_BG
);
this.link['dpsi'] = this.numParam('dpsi', 0);
this.link['dtheta'] = this.numParam('dtheta', 0);
}
copyUrl() {
const url = new URL(linkUrl.origin + linkUrl.pathname);
url.searchParams.append("shape", this.params.shape);
url.searchParams.append("thickness", this.params.thickness.toString());
url.searchParams.append("color", hexToString(this.params.color));
url.searchParams.append("background", 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.dtheta.toString());
url.searchParams.append("dpsi", this.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);
}); });
gui.addColor(gui_params, 'background').onChange((c) => { }
console.log(`Setting background colour to ${c}`);
scene.background = new THREE.Color(c);
});
gui.add(gui_params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
gui.add(gui_params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
gui.add(gui_params, 'damping');
gui.add(gui_params, 'copy link');
const ROTFN = {
XY: rotXY,
XZ: rotXZ,
XW: rotXW,
YZ: rotYZ,
YW: rotYW,
ZW: rotZW,
};
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 };

294
main.js
View File

@ -1,161 +1,35 @@
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 = '120-cell';
const DEFAULT_COLOR = 0x90ebff;
const DEFAULT_BG = 0xdddddd;
// 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,
);
}
function 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);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
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);
});
}
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(DEFAULT_BG); 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 material = new THREE.MeshStandardMaterial( scene.background = new THREE.Color(0x000000);
{ color: DEFAULT_COLOR } const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
);
const node_ms = [ material ]; const node_ms = [ material ];
@ -170,7 +44,6 @@ const STRUCTURES = {
'600-cell': POLYTOPES.cell600() '600-cell': POLYTOPES.cell600()
}; };
let shape = false; let shape = false;
function createShape(name) { function createShape(name) {
@ -182,40 +55,18 @@ function createShape(name) {
} }
// initialise gui and read params from URL
function floatParam(params, param) { // callbacks to do things which are triggered by controls: reset the shape,
const value = params.get(param); // change the colors. Otherwise we just read stuff from gui.params.
if( value ) {
const fl = parseFloat(value);
if( fl !== NaN ) {
return fl;
}
}
return 0;
}
function stringtoHex(cstr) { const gui = new FourDGUI(
return parseInt('0x' + cstr.substr(1)); createShape,
} (c) => { material.color = new THREE.Color(c) },
(c) => { scene.background = new THREE.Color(c) },
function hexToString(hex) { );
return '#' + hex.toString(16);
}
function colorParam(params, param, dft) {
const value = params.get(param);
if( value ) {
const hex = stringtoHex(value);
if( hex !== NaN ) {
return hex;
}
}
return dft;
}
camera.position.z = 4;
const dragK = 0.005; const dragK = 0.005;
const damping = 0.99; const damping = 0.99;
@ -226,8 +77,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;
@ -245,8 +94,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;
} }
@ -256,111 +105,26 @@ renderer.domElement.addEventListener("pointerup", (event) => {
dragging = false; dragging = false;
}) })
createShape(gui.params.shape);
// set up GUI
const gui = new GUI();
const linkUrl = new URL(window.location.toLocaleString());
const link_params = {};
const urlParams = linkUrl.searchParams;
for( const param of [ "shape", "xRotate", "yRotate" ]) {
const value = urlParams.get(param);
if( value ) {
link_params[param] = value;
}
}
link_params['hyperplane'] = floatParam(urlParams, 'hyperplane');
link_params['thickness'] = floatParam(urlParams, 'thickness');
link_params['color'] = colorParam(urlParams, 'color', DEFAULT_COLOR);
link_params['background'] = colorParam(urlParams, 'background', DEFAULT_BG);
dpsi = floatParam(urlParams, 'dpsi');
dtheta = floatParam(urlParams, 'dtheta');
const gui_params = {
shape: link_params['shape'] || DEFAULT_SHAPE,
thickness: link_params['thickness'] || 1,
color: link_params['color'] || DEFAULT_COLOR,
background: link_params['background'] || DEFAULT_BG,
hyperplane: link_params['hyperplane'] || 2,
xRotate: link_params['xRotate'] || 'YW',
yRotate: link_params['yRotate'] || 'XZ',
damping: false,
"copy link": function () {
const url = new URL(linkUrl.origin + linkUrl.pathname);
url.searchParams.append("shape", gui_params.shape);
url.searchParams.append("thickness", gui_params.thickness.toString());
url.searchParams.append("color", hexToString(gui_params.color));
url.searchParams.append("background", hexToString(gui_params.background));
url.searchParams.append("hyperplane", gui_params.hyperplane.toString());
url.searchParams.append("xRotate", gui_params.xRotate);
url.searchParams.append("yRotate", gui_params.yRotate);
url.searchParams.append("dtheta", dtheta.toString());
url.searchParams.append("dpsi", dpsi.toString());
copyTextToClipboard(url);
}
};
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, 'thickness', 0.01, 4);
gui.addColor(gui_params, 'color').onChange((c) => {
console.log(`Setting material colour to ${c}`);
material.color = new THREE.Color(c);
});
gui.addColor(gui_params, 'background').onChange((c) => {
console.log(`Setting background colour to ${c}`);
scene.background = new THREE.Color(c);
});
gui.add(gui_params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
gui.add(gui_params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
gui.add(gui_params, 'damping');
gui.add(gui_params, 'copy link');
const ROTFN = {
XY: rotXY,
XZ: rotXZ,
XW: rotXW,
YZ: rotYZ,
YW: rotYW,
ZW: rotZW,
};
createShape(gui_params["shape"]);
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.geom_scale = gui.params.thickness;
shape.render3(rotations); shape.render3(rotations);
renderer.render( scene, camera ); renderer.render( scene, camera );

37
polytopes.js
View File

@ -67,7 +67,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.05,
link_size: 0.05
}
}; };
}; };
@ -80,7 +84,11 @@ export const cell16 = () => {
return { return {
nodes: nodes, nodes: nodes,
links: links links: links,
geometry: {
node_size: 0.03,
link_size: 0.03
}
}; };
}; };
@ -92,7 +100,11 @@ export const tesseract = () => {
return { return {
nodes: nodes, nodes: nodes,
links: links links: links,
geometry: {
node_size: 0.03,
link_size: 0.03
}
}; };
} }
@ -105,7 +117,11 @@ export const cell24 = () => {
return { return {
nodes: nodes, nodes: nodes,
links: links links: links,
geometry: {
node_size: 0.02,
link_size: 0.02
}
}; };
} }
@ -138,7 +154,12 @@ export const cell120 = () => {
const links = auto_detect_edges(nodes, 4); const links = auto_detect_edges(nodes, 4);
return { return {
nodes: nodes, nodes: nodes,
links: links links: links,
geometry: {
node_size: 0.01,
link_size: 0.01
}
} }
} }
@ -161,7 +182,11 @@ export const cell600 = () => {
const links = auto_detect_edges(nodes, 20); const links = auto_detect_edges(nodes, 20);
return { return {
nodes: nodes, nodes: nodes,
links: links links: links,
geometry: {
node_size: 0.003,
link_size: 0.003
}
} }
} }