CHANGELOG.md

@@ -1,12 +0,0 @@
-CHANGELOG
-=========
-
-## v1.0 - 16/11/2025
-
-It's been [two years](https://mikelynch.org/2023/Sep/02/120-cell/)</a> 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.
-`

fourDShape.js

@@ -29,11 +29,11 @@ class FourDShape extends THREE.Group {
 
 	// if a node/link has no label, use the 0th material
 
-	getMaterialLabel(entity) {
+	getMaterial(entity, materials) {
 		if( "label" in entity ) {
-    	        return entity.label
+			return materials[entity.label];
 		} else {
-     	        return 0;
+			return materials[0];
 		}
 	}
 
@@ -45,15 +45,25 @@ class FourDShape extends THREE.Group {
 		return sphere;
 	}
 
-	makeLink(materialLabel, link) {
+	makeLink(basematerial, 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 basematerial = this.link_ms[materialLabel];
+		const edge = new TaperedLink(basematerial, n1, n2, s1, s2);
-		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) {
@@ -62,6 +72,13 @@ 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); 
 	}
 
@@ -91,6 +108,15 @@ 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 );
 	}
@@ -112,7 +138,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.node_ms[this.getMaterialLabel(n)];
+			const material = this.getMaterial(n, this.node_ms);
 			this.nodes3[n.id] = {
 				v3: v3,
 				scale: k,
@@ -121,11 +147,11 @@ class FourDShape extends THREE.Group {
 			};
 		}
 		for( const l of this.links ) {
-			const mLabel = this.getMaterialLabel(l);
+			const material = this.getMaterial(l, this.link_ms);
-			l.object = this.makeLink(mLabel, l);
+			l.object = this.makeLink(material, l);
 		}
 		for( const f of this.faces ) {
-			const material = this.face_ms(this.getMaterialLabel(f));
+			const material = this.getMaterial(f, this.face_ms);
 			f.object = this.makeFace(material, f);
 		}
 	}

gui.js

@@ -2,11 +2,12 @@ import { GUI } from 'lil-gui';
 
 
 const DEFAULTS = {
-	nodesize: 0.6,
+	nodesize: 1,
 	nodeopacity: 1,
 	linksize: 1.0,
-	linkopacity: 0.75,
+	linkopacity: 1,
-	shape: '120-cell',
+	link2opacity: 0.75,
+	shape: '5-cell',
 	option: 'none',
 	visibility: 5,
 	inscribed: false,
@@ -40,6 +41,7 @@ class FourDGUI {
 			inscribe_all: this.link['inscribe_all'],
 			linksize: this.link['linksize'],
 			linkopacity: this.link['linkopacity'],
+			link2opacity: this.link['linkopacity'],
 			nodesize: this.link['nodesize'],
 			nodeopacity: this.link['nodeopacity'],
 			depth: this.link['depth'],
@@ -70,10 +72,15 @@ class FourDGUI {
 		});
 		this.gui.add(this.params, 'hyperplane', 0.5, 1 / 0.8);
 		this.gui.add(this.params, 'zoom', 0.1, 2.0);
-		this.gui.add(this.params, 'nodesize', 0, 1.5);
+		this.gui.add(this.params, 'nodesize', 0, 5);
 		this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(setNodeOpacity);
-		this.gui.add(this.params, 'linksize', 0, 2);
+		this.gui.add(this.params, 'linksize', 0, 5);
-		this.gui.add(this.params, 'linkopacity', 0, 1).onChange(setLinkOpacity);
+		this.gui.add(this.params, 'linkopacity', 0, 1).onChange(
+			(v) => setLinkOpacity(v, true)
+		);
+		this.gui.add(this.params, 'link2opacity', 0, 1).onChange(
+			(v) => setLinkOpacity(v, false)
+		);
 		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' ]);
@@ -136,6 +143,7 @@ class FourDGUI {
 		this.link['zoom'] = this.numParam('zoom', parseFloat);
 		this.link['linksize'] = this.numParam('linksize', parseFloat);
 		this.link['linkopacity'] = this.numParam('linkopacity', parseFloat);
+		this.link['link2opacity'] = this.numParam('link2opacity', parseFloat);
 		this.link['nodesize'] = this.numParam('nodesize', parseFloat);
 		this.link['nodeopacity'] = this.numParam('nodeopacity', parseFloat);
 		this.link['color'] = this.numParam('color', (s) => guiObj.stringToHex(s));
@@ -155,6 +163,7 @@ class FourDGUI {
 		url.searchParams.append("nodesize", this.params.nodesize.toString());
 		url.searchParams.append("nodeopacity", this.params.nodesize.toString());
 		url.searchParams.append("linkopacity", this.params.nodeopacity.toString());
+		url.searchParams.append("link2opacity", this.params.link2opacity.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());

index.html

@@ -14,17 +14,6 @@
 				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;
@@ -35,12 +24,9 @@
 		</style>
 	</head>
 	<body>
-		<script type="module" src="/main.js"></script>
+		<script type="module" src="/linktest.js"></script>
 		<div id="description"></div>
-		<div id="release_notes"></div>
+		<div id="info">by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> -
-		<div id="info"><a href="#" id="show_notes">release 1.0</a> |
-
-    		by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> |
 			<a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div>
 	</body>
 </html>

linktest.js

@@ -37,7 +37,7 @@ renderer.localClippingEnabled = true;
 const controls = new OrbitControls( camera, renderer.domElement );
 
 
-controls.autoRotate = true;
+controls.autoRotate = false;
 
 document.body.appendChild( renderer.domElement );
 
@@ -49,12 +49,12 @@ scene.background = new THREE.Color(BACKGROUNDC);
 const material = new THREE.MeshStandardMaterial({ color: LINKC });
 
 material.transparent = true;
-material.opacity = 0.7;
+material.opacity = 0.5;
 
 const node_mat = new THREE.MeshStandardMaterial({ color: NODEC });
 
 node_mat.transparent = true;
-node_mat.opacity = 0.5;
+node_mat.opacity = 0.8;
 
 const params = {
     r1: 0.5,

main.js

@@ -1,16 +1,5 @@
 import * as THREE from 'three';
 
-const RELEASE_NOTES = `
-<p><b>v1.0 - 16/11/2025</b></p>
-
-<p>It's been <a target="_blank" href="https://mikelynch.org/2023/Sep/02/120-cell/">two years</a> 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.</p>
-
-<p>The results flicker a bit at low opacities but otherwise I'm pretty happy with
-it.</p>
-`;
-
 
 
 import * as POLYTOPES from './polytopes.js';
@@ -51,8 +40,14 @@ document.body.appendChild( renderer.domElement );
 // set up colours and materials for gui callbacks
 
 scene.background = new THREE.Color(DEFAULTS.background);
+const material = new THREE.MeshStandardMaterial({ color: DEFAULTS.color });
 const node_colours = get_colours(DEFAULTS.color);
 
+
+material.transparent = true;
+material.opacity = 0.5;
+
+
 const node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
 const link_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
 
@@ -71,7 +66,7 @@ link_ms.map((m) => {
 
 
 const face_ms = [
-	new THREE.MeshStandardMaterial( { color: 0x44ff44 } )
+	new THREE.MeshLambertMaterial( { color: 0x44ff44 } )
 	];
 
 for( const face_m of face_ms ) {
@@ -113,6 +108,7 @@ function displayDocs(name) {
 }
 
 function showDocs(visible) {
+	console.log(`showDocs ${visible}`);
 	const docdiv = document.getElementById("description");
 	if( visible ) {
 		docdiv.style.display = '';
@@ -121,25 +117,6 @@ function showDocs(visible) {
 	}
 }
 
-function releaseNotes() {
-    showDocs(false);
-    const docdiv = document.getElementById("release_notes");
-    docdiv.style.display = '';
-    docdiv.innerHTML = RELEASE_NOTES + '<p><a id="no_notes" href="#">[hide]</a>';
-    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,
@@ -151,24 +128,22 @@ function setColors(c) {
 		node_ms[i].color = new THREE.Color(nc[i]);
 		link_ms[i].color = new THREE.Color(nc[i]);
 	}
-    if( shape ) {
+	material.color = new THREE.Color(c);
-        // taperedLink.set_color updates according to the link index
-       shape.links.map((l) => l.object.set_color(nc));
-    }
 }
 
 function setBackground(c) {
 	scene.background = new THREE.Color(c)
 }
 
-// taperedLinks have their own materials so we have to set opacity
-// on them individually. And also set the base materials as they
-// will get updated from it when the shape changes 
-
 function setLinkOpacity(o, primary) {
+	if( structure.nolink2opacity ) {
 		link_ms.map((lm) => lm.opacity = o);
-    if( shape ) {
+	} else {
-        shape.links.map((l) => l.object.material.opacity = o);
+		if( primary ) {
+			link_ms[0].opacity = o;
+		} else {
+			link_ms.slice(1).map((lm) => lm.opacity = o);
+		}
 	}
 }
 

taperedLink.js

@@ -1,24 +1,40 @@
+
+
 import * as THREE from 'three';
 
-const EPSILON = 0.001;
 
 class TaperedLink extends THREE.Group {
 
-  constructor(baseMaterial, color_i, n1, n2, r1, r2) {
+  constructor(baseMaterial, n1, n2, r1, r2) {
     super();
     const geometry = new THREE.ConeGeometry( 1, 1, 16, true );
+    //const geometry = new THREE.CylinderGeometry( 1, 1, 1, 16, 1, true);
     const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5);
-    this.color_i = color_i;
+    const material = baseMaterial.clone();
-    this.material = baseMaterial.clone();
+    material.clippingPlanes = [ cplane ];
-    this.material.clippingPlanes = [ cplane ];
+    this.object = new THREE.Mesh( geometry, material );
-    this.object = new THREE.Mesh( geometry, this.material );
     this.add( this.object );
-    this.update(n1, n2, r1, r2);
+    this.update(n1, n2, r1, r2, 1, 0, 0);
    }
 
-   update(n1, n2, r1, r2) {
+  update_cyl(n1, n2, r1, r2, rotx, roty, rotz) {
+    const length = n1.v3.distanceTo(n2.v3);
+    const centre = new THREE.Vector3();
+    centre.lerpVectors(n1.v3, n2.v3, 0.5);
+    const link_mean = (r1 + r2) * 0.5;		
+    this.scale.copy(new THREE.Vector3(link_mean, link_mean, length));
+    this.position.copy(centre);
+    this.lookAt(n2.v3);
+    this.children[0].rotation.x = rotx * Math.PI / 2.0;
+    this.children[0].rotation.y = roty * Math.PI / 2.0;
+    this.children[0].rotation.z = rotz * Math.PI / 2.0;
+    this.visible = true;
+    }
+
+
+  update(n1, n2, r1, r2, rotx, roty, rotz) {
     const kraw = r1 - r2;
-    let k = ( Math.abs(kraw) < EPSILON ) ? EPSILON : kraw;
+    let k = ( kraw == 0 ) ? 0.001 : kraw;
     let nbase = n1.v3;
     let napex = n2.v3;
     let rbase = r1;
@@ -42,24 +58,22 @@ class TaperedLink extends THREE.Group {
     this.position.copy(pos); // the group, not the cone!! 
 
     this.lookAt(nbase);
-    this.children[0].rotation.x = 3 * Math.PI / 2.0;
+    this.children[0].rotation.x = rotx * Math.PI / 2.0;
+    this.children[0].rotation.y = roty * Math.PI / 2.0;
+    this.children[0].rotation.z = rotz * Math.PI / 2.0;
     this.visible = true;
     const clipnorm = new THREE.Vector3();
     clipnorm.copy(napex);
     clipnorm.sub(nbase);
     clipnorm.negate();
     clipnorm.normalize();
-    this.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
+    this.object.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
       clipnorm, napex
     );
 
    
     }  
 
-    set_color(colors) {
-        this.material.color = new THREE.Color(colors[this.color_i]);
-    }
-
 }