From 9bc23fdeeb881cd4a399066aacd40d76dafc3e27 Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 16 Nov 2025 15:33:03 +1100 Subject: [PATCH] Sorted out a few more interface niggles and added release notes to the interface --- CHANGELOG.md | 12 ++++++++++++ fourDShape.js | 52 +++++++++++++------------------------------------- index.html | 16 +++++++++++++++- main.js | 46 +++++++++++++++++++++++++++++++++++++------- taperedLink.js | 7 ++++++- 5 files changed, 85 insertions(+), 48 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..1336378 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,12 @@ +CHANGELOG +========= + +## v1.0 - 16/11/2025 + +It's been [two years](https://mikelynch.org/2023/Sep/02/120-cell/) since +I first made this, and I haven't updated it in a while, but I got tapered links to +work without too much performance overhead, so that seemed worth a version. + +The results flicker a bit at low opacities but otherwise I'm pretty happy with +it. +` diff --git a/fourDShape.js b/fourDShape.js index 609e1cc..7cd76db 100644 --- a/fourDShape.js +++ b/fourDShape.js @@ -29,12 +29,12 @@ class FourDShape extends THREE.Group { // if a node/link has no label, use the 0th material - getMaterial(entity, materials) { - if( "label" in entity ) { - return materials[entity.label]; - } else { - return materials[0]; - } + getMaterialLabel(entity) { + if( "label" in entity ) { + return entity.label + } else { + return 0; + } } makeNode(material, v3, scale) { @@ -45,25 +45,15 @@ class FourDShape extends THREE.Group { return sphere; } - makeLink(basematerial, link) { + makeLink(materialLabel, link) { const n1 = this.nodes3[link.source]; const n2 = this.nodes3[link.target]; const s1 = this.link_scale * n1.scale; const s2 = this.link_scale * n2.scale; - const edge = new TaperedLink(basematerial, n1, n2, s1, s2); + const basematerial = this.link_ms[materialLabel]; + const edge = new TaperedLink(basematerial, materialLabel, n1, n2, s1, s2); this.add( edge ); return edge; - // const length = n1.v3.distanceTo(n2.v3); - // const centre = nfew THREE.Vector3(); - // centre.lerpVectors(n1.v3, n2.v3, 0.5); - - // const edge = new TaperedLink(basematerial); - // edge.update(s1, s2, length); - // edge.position.copy(centre); - // edge.lookAt(n2.v3); - // edge.children[0].rotation.x = Math.PI / 2.0; - // this.add(edge); - // return edge; } updateLink(link, links_show) { @@ -72,13 +62,6 @@ class FourDShape extends THREE.Group { const s1 = this.link_scale * n1.scale; const s2 = this.link_scale * n2.scale; link.object.update(n1, n2, s1, s2); - // const length = n1.v3.distanceTo(n2.v3); - // const centre = new THREE.Vector3(); - // centre.lerpVectors(n1.v3, n2.v3, 0.5); - // link.object.update(s1, s2, length); - // link.object.position.copy(n1.v3); - // link.object.lookAt(n2.v3); - // link.object.children[0].rotation.x = Math.PI / 2.0; link.object.visible = (!links_show || link.label in links_show); } @@ -108,15 +91,6 @@ class FourDShape extends THREE.Group { } - fourDtoV3_old(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.fourDscale(v4.w); - return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k); - } - fourDscale(w) { return this.hyperplane / ( this.hyperplane + w ); } @@ -138,7 +112,7 @@ class FourDShape extends THREE.Group { for( const n of this.nodes4 ) { const k = this.fourDscale(n.w); const v3 = new THREE.Vector3(n.x * k, n.y * k, n.z * k); - const material = this.getMaterial(n, this.node_ms); + const material = this.node_ms[this.getMaterialLabel(n)]; this.nodes3[n.id] = { v3: v3, scale: k, @@ -147,11 +121,11 @@ class FourDShape extends THREE.Group { }; } for( const l of this.links ) { - const material = this.getMaterial(l, this.link_ms); - l.object = this.makeLink(material, l); + const mLabel = this.getMaterialLabel(l); + l.object = this.makeLink(mLabel, l); } for( const f of this.faces ) { - const material = this.getMaterial(f, this.face_ms); + const material = this.face_ms(this.getMaterialLabel(f)); f.object = this.makeFace(material, f); } } diff --git a/index.html b/index.html index 9dcf112..a96fe8c 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,17 @@ font-family: sans-serif; padding: 1em; } + div#release_notes { + position: fixed; + top: 0; + left: 0; + width: 50%; + z-index: 2; + font-family: sans-serif; + padding: 1em; + visibility: none; + background: #ffffff; + } div#info { position: fixed; bottom:0; @@ -26,7 +37,10 @@
-
by Mike Lynch - +
+ diff --git a/main.js b/main.js index b728f94..45ef86a 100644 --- a/main.js +++ b/main.js @@ -1,5 +1,16 @@ import * as THREE from 'three'; +const RELEASE_NOTES = ` +

v1.0 - 16/11/2025

+ +

It's been two years since +I first made this, and I haven't updated it in a while, but I got tapered links to +work without too much performance overhead, so that seemed worth a version.

+ +

The results flicker a bit at low opacities but otherwise I'm pretty happy with +it.

+`; + import * as POLYTOPES from './polytopes.js'; @@ -102,7 +113,6 @@ function displayDocs(name) { } function showDocs(visible) { - console.log(`showDocs ${visible}`); const docdiv = document.getElementById("description"); if( visible ) { docdiv.style.display = ''; @@ -111,18 +121,40 @@ function showDocs(visible) { } } +function releaseNotes() { + showDocs(false); + const docdiv = document.getElementById("release_notes"); + docdiv.style.display = ''; + docdiv.innerHTML = RELEASE_NOTES + '

[hide]'; + const goaway = document.getElementById("no_notes"); + goaway.addEventListener('click', noNotes); + } + +function noNotes() { + const docdiv = document.getElementById("release_notes"); + docdiv.style.display = 'none'; +} + +const relnotes = document.getElementById('show_notes'); + +relnotes.addEventListener('click', releaseNotes); + + // 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. function setColors(c) { - const nc = get_colours(c); - for( let i = 0; i < node_ms.length; i++ ) { - node_ms[i].color = new THREE.Color(nc[i]); - link_ms[i].color = new THREE.Color(nc[i]); - } - //material.color = new THREE.Color(c); + const nc = get_colours(c); + for( let i = 0; i < node_ms.length; i++ ) { + node_ms[i].color = new THREE.Color(nc[i]); + link_ms[i].color = new THREE.Color(nc[i]); + } + if( shape ) { + // taperedLink.set_color updates according to the link index + shape.links.map((l) => l.object.set_color(nc)); + } } function setBackground(c) { diff --git a/taperedLink.js b/taperedLink.js index d81a5fd..1e88975 100644 --- a/taperedLink.js +++ b/taperedLink.js @@ -4,10 +4,11 @@ const EPSILON = 0.001; class TaperedLink extends THREE.Group { - constructor(baseMaterial, n1, n2, r1, r2) { + constructor(baseMaterial, color_i, n1, n2, r1, r2) { super(); const geometry = new THREE.ConeGeometry( 1, 1, 16, true ); const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5); + this.color_i = color_i; this.material = baseMaterial.clone(); this.material.clippingPlanes = [ cplane ]; this.object = new THREE.Mesh( geometry, this.material ); @@ -55,6 +56,10 @@ class TaperedLink extends THREE.Group { } + set_color(colors) { + this.material.color = new THREE.Color(colors[this.color_i]); + } + }