diff --git a/fourDShape.js b/fourDShape.js index 03aa60b..bd88764 100644 --- a/fourDShape.js +++ b/fourDShape.js @@ -3,10 +3,6 @@ import * as THREE from 'three'; const HYPERPLANE = 2; -const NODE_SIZE = 0.01; -const LINK_SIZE = 0.01; - - class FourDShape extends THREE.Group { @@ -17,6 +13,9 @@ class FourDShape extends THREE.Group { this.nodes4 = structure.nodes; this.nodes3 = {}; 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.initShapes(); } @@ -34,7 +33,7 @@ class FourDShape extends THREE.Group { } 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); sphere.position.copy(v3); this.add(sphere); @@ -47,7 +46,7 @@ class FourDShape extends THREE.Group { 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 geometry = new THREE.CylinderGeometry(this.link_size, this.link_size, 1); const cyl = new THREE.Mesh(geometry, material); const edge = new THREE.Group(); edge.add(cyl); @@ -65,7 +64,7 @@ class FourDShape extends THREE.Group { 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.scale.copy(new THREE.Vector3(this.geom_scale, this.geom_scale, length)); link.object.position.copy(centre); link.object.lookAt(n2); link.object.children[0].rotation.x = Math.PI / 2.0; @@ -98,11 +97,12 @@ class FourDShape extends THREE.Group { render3(rotations) { + this.scalev3 = new THREE.Vector3(this.geom_scale, this.geom_scale, this.geom_scale); for( const n of this.nodes4 ) { 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 + this.nodes3[n.id].object.scale.copy(this.scalev3); } for( const l of this.links ) { diff --git a/gui.js b/gui.js index 8396d88..054f8da 100644 --- a/gui.js +++ b/gui.js @@ -7,84 +7,141 @@ const DEFAULT_BG = 0xdddddd; +class FourDGUI { -// set up GUI + constructor(createShape, setColor, setBackground) { + this.gui = new GUI(); + this.parseLinkParams(); + 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'], + dpsi: this.link['dpsi'], + "copy link": function () { this.copyUrl() } + }; -const gui = new GUI(); + this.gui.add(this.params, 'shape', + [ '5-cell', '16-cell', 'tesseract', '24-cell', '120-cell', '600-cell' ] + ).onChange(createShape) -const linkUrl = new URL(window.location.toLocaleString()); + this.gui.add(this.params, 'hyperplane', 1.5, 4); + this.gui.add(this.params, 'thickness', 0.01, 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'); + } -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; + 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); + }); + } + + + 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); + } + + } -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, -}; - +export { FourDGUI }; \ No newline at end of file diff --git a/main.js b/main.js index 7666c8d..b4d1009 100644 --- a/main.js +++ b/main.js @@ -1,161 +1,35 @@ 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 { GUI } from 'lil-gui'; - - -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); - }); -} - - - - +// scene, lights and camera const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); - const light = new THREE.PointLight(0xffffff, 2); light.position.set(10, 10, 10); scene.add(light); - const light2 = new THREE.PointLight(0xffffff, 2); light2.position.set(-10, 5, 10); scene.add(light); - - const amblight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(amblight); -scene.background = new THREE.Color(DEFAULT_BG); - +camera.position.z = 4; const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); +// set up colours and materials for gui callbacks -const material = new THREE.MeshStandardMaterial( - { color: DEFAULT_COLOR } -); +scene.background = new THREE.Color(0x000000); +const material = new THREE.MeshStandardMaterial({ color: 0xff0000 }); const node_ms = [ material ]; @@ -170,7 +44,6 @@ const STRUCTURES = { '600-cell': POLYTOPES.cell600() }; - let shape = false; function createShape(name) { @@ -182,40 +55,18 @@ function createShape(name) { } +// initialise gui and read params from URL -function floatParam(params, param) { - const value = params.get(param); - if( value ) { - const fl = parseFloat(value); - if( fl !== NaN ) { - return fl; - } - } - return 0; -} +// callbacks to do things which are triggered by controls: reset the shape, +// change the colors. Otherwise we just read stuff from gui.params. -function stringtoHex(cstr) { - return parseInt('0x' + cstr.substr(1)); -} - -function hexToString(hex) { - return '#' + hex.toString(16); -} +const gui = new FourDGUI( + createShape, + (c) => { material.color = new THREE.Color(c) }, + (c) => { scene.background = new THREE.Color(c) }, +); -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 damping = 0.99; @@ -226,8 +77,6 @@ let theta0 = 0; let psi0 = 0; let dragx0 = 0; let dragy0 = 0; -let dtheta = 0; -let dpsi = 0; let dragging = false; @@ -245,8 +94,8 @@ renderer.domElement.addEventListener("pointermove", (event) => { if( event.buttons === 1 ) { const theta1 = theta0 + (event.clientX - dragx0) * dragK; const psi1 = psi0 + (event.clientY - dragy0) * dragK; - dtheta = theta1 - theta; - dpsi = psi1 - psi; + gui.params.dtheta = theta1 - theta; + gui.params.dpsi = psi1 - psi; theta = theta1; psi = psi1; } @@ -256,111 +105,26 @@ renderer.domElement.addEventListener("pointerup", (event) => { dragging = false; }) - -// 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(); +createShape(gui.params.shape); function animate() { requestAnimationFrame( animate ); if( ! dragging ) { - theta += dtheta; - psi += dpsi; - if( gui_params.damping ) { - dtheta = dtheta * damping; - dpsi = dpsi * damping; + theta += gui.params.dtheta; + psi += gui.params.dpsi; + if( gui.params.damping ) { + gui.params.dtheta = gui.params.dtheta * damping; + gui.params.dpsi = gui.params.dpsi * damping; } } const rotations = [ - ROTFN[gui_params.xRotate](theta), - ROTFN[gui_params.yRotate](psi) + rotfn[gui.params.xRotate](theta), + rotfn[gui.params.yRotate](psi) ]; - shape.hyperplane = gui_params.hyperplane; - shape.geom_scale = gui_params.thickness; + shape.hyperplane = gui.params.hyperplane; + shape.geom_scale = gui.params.thickness; shape.render3(rotations); renderer.render( scene, camera ); diff --git a/polytopes.js b/polytopes.js index 38309c0..0266880 100644 --- a/polytopes.js +++ b/polytopes.js @@ -67,7 +67,11 @@ export const cell5 = () => { { id:8, source:3, target: 4}, { id:9, source:3, 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 { nodes: nodes, - links: links + links: links, + geometry: { + node_size: 0.03, + link_size: 0.03 + } }; }; @@ -92,7 +100,11 @@ export const tesseract = () => { return { nodes: nodes, - links: links + links: links, + geometry: { + node_size: 0.03, + link_size: 0.03 + } }; } @@ -105,7 +117,11 @@ export const cell24 = () => { return { 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); return { 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); return { nodes: nodes, - links: links + links: links, + geometry: { + node_size: 0.003, + link_size: 0.003 + } } }