Merge pull request 'Fixed minor bug where the release notes div was persisting' (#23) from bugfix-visible-release-notes-div into main

Reviewed-on: #23

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/)</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.
+`

colours.js

@@ -1,14 +1,20 @@
 import ColorScheme from 'color-scheme';
+import Color from 'color';
 
 export const get_colours = (basis) => {
+	const basis_c = Color(basis);
+	const hslb = basis_c.hsl();
+	const hue = hslb['color'][0];
+	const saturation = hslb['color'][1];
+	const luminance = hslb['color'][2];
 	const scheme = new ColorScheme;
-	const hexbasis = basis.toString(16).padStart(6, "0");
-	scheme.from_hex(hexbasis).scheme("tetrade").variation("hard").distance(0.5);
-	const colours = scheme.colors().map((cs) => parseInt('0x' + cs));
-	const set = colours.slice(1, 9);
-	set.reverse();
-	set.unshift(colours[0]);
-	return set;
+	scheme.from_hue(hue).scheme("tetrade").distance(0.75);
+	const colours = scheme.colors().slice(1, 9);
+	colours.reverse();
+	const hsl = colours.map((c) => Color("#" + c).hsl());
+	const resaturated = hsl.map((hslc) => hslc.saturationl(saturation).rgbNumber()); 
+	resaturated.unshift(basis);
+	return resaturated;
 }
 
 // basic colours where 0 = blue

fourDShape.js

@@ -1,7 +1,10 @@
 import * as THREE from 'three';
 
+import { TaperedLink } from './taperedLink.js';
+
 
 const HYPERPLANE = 2.0;
+const W_FORESHORTENING = 0.04;
 
 
 class FourDShape extends THREE.Group {
@@ -15,11 +18,10 @@ class FourDShape extends THREE.Group {
 		this.nodes3 = {};
 		this.links = structure.links;
 		this.faces = ( "faces" in structure ) ? structure.faces : [];
-		this.node_size = structure.geometry.node_size;
-		this.link_size = structure.geometry.link_size;
 		this.node_scale = 1;
 		this.link_scale = 1;
 		this.hyperplane = HYPERPLANE;
+		this.foreshortening = W_FORESHORTENING;
 		this.initShapes();
 	}
 
@@ -27,15 +29,15 @@ 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) {
+	makeNode(material, v3, scale) {
 		const geometry = new THREE.SphereGeometry(this.node_size);
 		const sphere = new THREE.Mesh(geometry, material);
 		sphere.position.copy(v3);
@@ -43,34 +45,23 @@ class FourDShape extends THREE.Group {
 		return sphere;
 	}
 
-	makeLink(material, link) {
-		const n1 = this.nodes3[link.source].v3;
-		const n2 = this.nodes3[link.target].v3;
-		const length = n1.distanceTo(n2);
-		const centre = new THREE.Vector3();
-		centre.lerpVectors(n1, n2, 0.5);
-		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);
-		edge.position.copy(centre);
-		edge.scale.copy(new THREE.Vector3(1, 1, length));
-		edge.lookAt(n2);
-		cyl.rotation.x = Math.PI / 2.0;
-		this.add(edge);
+	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 basematerial = this.link_ms[materialLabel];
+		const edge = new TaperedLink(basematerial, materialLabel, n1, n2, s1, s2);
+		this.add( edge );
 		return edge;
 	}
 
 	updateLink(link, links_show) {
-		const n1 = this.nodes3[link.source].v3;
-		const n2 = this.nodes3[link.target].v3;
-		const length = n1.distanceTo(n2);
-		const centre = new THREE.Vector3();
-		centre.lerpVectors(n1, n2, 0.5);
-		link.object.scale.copy(new THREE.Vector3(this.link_scale, this.link_scale, length));
-		link.object.position.copy(centre);
-		link.object.lookAt(n2);
-		link.object.children[0].rotation.x = Math.PI / 2.0;
+		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;
+		link.object.update(n1, n2, s1, s2);
 		link.object.visible = (!links_show || link.label in links_show); 
 	}
 
@@ -100,32 +91,41 @@ class FourDShape extends THREE.Group {
 	}
 
 
-	fourDtoV3(x, y, z, w, rotations) {
+	fourDscale(w) {
+		return this.hyperplane / ( this.hyperplane + w );
+	}
+	
+	fourDrotate(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.hyperplane / (this.hyperplane + v4.w);
-		return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);
+		return v4;
 	}
 
+	fourDtoV3(v4) {
+		const k = this.fourDscale(v4.w);
+		return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);		
+	}
 
 	initShapes() {
 		for( const n of this.nodes4 ) {
-			const v3 = this.fourDtoV3(n.x, n.y, n.z, n.w, []);
-			const material = this.getMaterial(n, this.node_ms);
+			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)];
 			this.nodes3[n.id] = {
 				v3: v3,
+				scale: k,
 				label: n.label,
-				object: this.makeNode(material, v3)
+				object: this.makeNode(material, v3, k)
 			};
 		}
 		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);
 		}
 	}
@@ -134,10 +134,15 @@ class FourDShape extends THREE.Group {
 	render3(rotations, nodes_show, links_show) {
 		this.scalev3 = new THREE.Vector3(this.node_scale, this.node_scale, this.node_scale);
 		for( const n of this.nodes4 ) {
-			const v3 = this.fourDtoV3(n.x, n.y, n.z, n.w, rotations);
+			const v4 = this.fourDrotate(n.x, n.y, n.z, n.w,  rotations);
+			const k = this.fourDscale(v4.w);
+			const v3 = new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);
+			const s4 = k * this.node_scale * this.foreshortening;
+			const s3 = new THREE.Vector3(s4, s4, s4);
 			this.nodes3[n.id].v3 = v3;
+			this.nodes3[n.id].scale = k * this.foreshortening;
 			this.nodes3[n.id].object.position.copy(v3);
-			this.nodes3[n.id].object.scale.copy(this.scalev3);
+			this.nodes3[n.id].object.scale.copy(s3);
 			this.nodes3[n.id].object.visible = ( !nodes_show || n.label in nodes_show );
 		}
 		for( const l of this.links ) {

gui.js

@@ -2,10 +2,10 @@ import { GUI } from 'lil-gui';
 
 
 const DEFAULTS = {
-	thickness: 1.0,
-	nodesize: 2.0,
-	linkopacity: 0.5,
-	link2opacity: 0.5,
+	nodesize: 0.6,
+	nodeopacity: 1,
+	linksize: 1.0,
+	linkopacity: 0.75,
 	shape: '120-cell',
 	option: 'none',
 	visibility: 5,
@@ -13,10 +13,13 @@ const DEFAULTS = {
 	inscribe_all: false,
 	color: 0x3293a9,
 	background: 0xd4d4d4,
-	hyperplane: 1.5,
+	hyperplane: 0.93,
 	zoom: 1,
-	rotation: 'rigid',
+	xRotate: 'YW',
+	yRotate: 'XW',
 	dtheta: 0,
+	damping: false,
+	captions: true,
 	dpsi: 0,
 }
 
@@ -24,7 +27,7 @@ const DEFAULTS = {
 
 class FourDGUI {
 
-	constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) {
+	constructor(shapes, changeShape, setColor, setBackground, setNodeOpacity,setLinkOpacity, setVisibility, showDocs) {
 		this.gui = new GUI();
 		const SHAPE_NAMES = shapes.map((s) => s.name);
 
@@ -35,17 +38,19 @@ class FourDGUI {
 			option: this.link['option'],
 			inscribed: this.link['inscribed'],
 			inscribe_all: this.link['inscribe_all'],
-			thickness: this.link['thickness'],
+			linksize: this.link['linksize'],
 			linkopacity: this.link['linkopacity'],
-			link2opacity: this.link['linkopacity'],
 			nodesize: this.link['nodesize'],
+			nodeopacity: this.link['nodeopacity'],
 			depth: this.link['depth'],
 			color: this.link['color'],
 			background: this.link['background'],
 			hyperplane: this.link['hyperplane'],
 			zoom: this.link['zoom'],
-			rotation: this.link['rotation'],
+			xRotate: this.link['xRotate'],
+			yRotate: this.link['yRotate'],
 			damping: false,
+			captions: true,
 			dtheta: this.link['dtheta'],
 			dpsi: this.link['dpsi'],
 			"copy link": function () { guiObj.copyUrl() }
@@ -63,19 +68,17 @@ class FourDGUI {
 		options_ctrl = this.gui.add(this.params, 'option').options(options).onChange((option) => {
 			setVisibility(option)
 		});
-		this.gui.add(this.params, 'hyperplane', 1.4, 2.0);
+		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, 'thickness', 0, 2);
-		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.add(this.params, 'nodesize', 0.1, 4);
+		this.gui.add(this.params, 'nodesize', 0, 1.5);
+		this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(setNodeOpacity);
+		this.gui.add(this.params, 'linksize', 0, 2);
+		this.gui.add(this.params, 'linkopacity', 0, 1).onChange(setLinkOpacity);
 		this.gui.addColor(this.params, 'color').onChange(setColor);
 		this.gui.addColor(this.params, 'background').onChange(setBackground);
-		this.gui.add(this.params, 'rotation', [ 'rigid', 'tumbling', 'inside-out', 'axisymmetrical' ]);
+		this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
+		this.gui.add(this.params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
+		this.gui.add(this.params, 'captions').onChange(showDocs);
 		this.gui.add(this.params, 'damping');
 		this.gui.add(this.params, 'copy link');
 
@@ -118,7 +121,7 @@ class FourDGUI {
 		const guiObj = this;
 
 		this.urlParams = this.linkUrl.searchParams;
-		for( const param of [ "shape", "rotation", "option" ]) {
+		for( const param of [ "shape", "xRotate", "yRotate", "option" ]) {
 			const value = this.urlParams.get(param);
 			if( value ) {
 				this.link[param] = value;
@@ -131,10 +134,10 @@ class FourDGUI {
 		}
 		this.link['hyperplane'] = this.numParam('hyperplane', parseFloat);
 		this.link['zoom'] = this.numParam('zoom', parseFloat);
-		this.link['thickness'] = this.numParam('thickness', 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));
 		this.link['background'] = this.numParam('background', (s) => guiObj.stringToHex(s));
 		this.link['dpsi'] = this.numParam('dpsi', parseFloat);
@@ -148,15 +151,16 @@ class FourDGUI {
 		url.searchParams.append("option", this.params.option);
 		url.searchParams.append("inscribed", this.params.inscribed ? 'y': 'n');
 		url.searchParams.append("inscribe_all", this.params.inscribe_all ? 'y': 'n');
-		url.searchParams.append("thickness", this.params.thickness.toString());
+		url.searchParams.append("linksize", this.params.linksize.toString());
 		url.searchParams.append("nodesize", this.params.nodesize.toString());
-		url.searchParams.append("linkopacity", this.params.thickness.toString());
-		url.searchParams.append("link2opacity", this.params.nodesize.toString());
+		url.searchParams.append("nodeopacity", this.params.nodesize.toString());
+		url.searchParams.append("linkopacity", this.params.nodeopacity.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("zoom", this.params.zoom.toString());
-		url.searchParams.append("rotation", this.params.rotation);
+		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);
@@ -204,4 +208,4 @@ class FourDGUI {
 }
 
 
-export { FourDGUI, DEFAULTS };
+export { FourDGUI, DEFAULTS };

index.html

@@ -5,6 +5,24 @@
 		<title>FourD</title>
 		<style>
 			body { margin: 0; }
+			div#description {
+				position: fixed;
+				top: 0;
+				left: 0;
+				width: 20%;
+				z-index: 2;
+				font-family: sans-serif;
+				padding: 1em;
+			}
+			div#release_notes {
+				position: fixed;
+				top: 0;
+				left: 0;
+				width: 20%;
+				z-index: 2;
+				padding: 1em;
+				font-family: sans-serif;
+			}
 			div#info {
 				position: fixed;
 				bottom:0;
@@ -16,7 +34,11 @@
 	</head>
 	<body>
 		<script type="module" src="/main.js"></script>
-		<div id="info">by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> -
+		<div id="description"></div>
+		<div id="release_notes"></div>
+		<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>
+</html>

linktest.js

@@ -0,0 +1,119 @@
+import * as THREE from 'three';
+
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { GUI } from 'lil-gui';
+
+import { TaperedLink } from './taperedLink.js';
+
+const FACE_OPACITY = 0.3;
+const CAMERA_K = 5;
+
+// 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);
+
+camera.position.set(0, 0, CAMERA_K / 2);
+
+camera.lookAt(0, 0, 0);
+camera.position.z = 8;
+
+const renderer = new THREE.WebGLRenderer({antialias: true});
+renderer.setSize( window.innerWidth, window.innerHeight );
+
+renderer.localClippingEnabled = true;
+
+const controls = new OrbitControls( camera, renderer.domElement );
+
+
+controls.autoRotate = true;
+
+document.body.appendChild( renderer.domElement );
+
+const NODEC = 0x3293a9;
+const LINKC = 0x00ff88;
+const BACKGROUNDC = 0xd4d4d4;
+	
+scene.background = new THREE.Color(BACKGROUNDC);
+const material = new THREE.MeshStandardMaterial({ color: LINKC });
+
+material.transparent = true;
+material.opacity = 0.7;
+
+const node_mat = new THREE.MeshStandardMaterial({ color: NODEC });
+
+node_mat.transparent = true;
+node_mat.opacity = 0.5;
+
+const params = {
+    r1: 0.5,
+    r2: 0.6,
+    sync: false,
+    l: 9,
+    rotx: 1,
+    roty: 0,
+    rotz: 0,
+};
+
+const gui = new GUI();
+
+gui.add(params, "r1", 0.01, 1.5);
+gui.add(params, "r2", 0.01, 1.5);
+gui.add(params, "sync");
+gui.add(params, "l", 0, 10);
+gui.add(params, "rotx", 0, 4);
+gui.add(params, "roty", 0, 4);
+gui.add(params, "rotz", 0, 4);
+
+function makeNode(material, pos, r) {
+    const geometry = new THREE.SphereGeometry(1);
+    const sphere = new THREE.Mesh(geometry, material);
+    const node = {
+        v3: pos,
+        object: sphere
+    };
+    updateNode(node, pos, r);
+    return node;
+}
+
+function updateNode(node, pos, r) {
+    node.v3 = pos; 
+    node.object.scale.copy(new THREE.Vector3(r, r, r));
+    node.object.position.copy(pos);
+}
+    
+
+const n1 = makeNode(node_mat, new THREE.Vector3(-params["l"], -1, -1), params["r1"]);
+const n2 = makeNode(node_mat, new THREE.Vector3(params["l"], 1, 1), params["r2"]);
+
+const tl = new TaperedLink(material, n1, n2, params["r1"], params["r2"]);
+
+scene.add(n1.object);
+scene.add(n2.object);
+
+scene.add(tl);
+
+function animate() {
+    requestAnimationFrame(animate);
+
+    const r1 = params["r1"];
+    const r2 = params["sync"] ? r1 : params["r2"]
+
+    updateNode(n1, new THREE.Vector3(- params["l"], -1, -1), r1);
+    updateNode(n2, new THREE.Vector3(params["l"], 1, 1), r2);
+    tl.update(n1, n2, r1, r2, params["rotx"], params["roty"], params["rotz"]);
+    controls.update();
+    renderer.render(scene, camera);
+}
+animate();

main.js

@@ -1,15 +1,26 @@
 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';
-import { get_rotation } from './rotation.js';
+import { rotfn } from './rotation.js';
 import { FourDGUI, DEFAULTS } from './gui.js';
 import { FourDShape } from './fourDShape.js';
 import { get_colours } from './colours.js';
 
 const FACE_OPACITY = 0.3;
-const CAMERA_K = 10;
+const CAMERA_K = 5;
 
 // scene, lights and camera
 
@@ -31,30 +42,36 @@ camera.lookAt(0, 0, 0);
 
 const renderer = new THREE.WebGLRenderer({antialias: true});
 renderer.setSize( window.innerWidth, window.innerHeight );
+
+renderer.localClippingEnabled = true;
+
+
 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}));
 
+node_ms.map((m) => {
+	m.transparent =  true;
+	m.opacity = 1.0;
+	}
+);
+
 link_ms.map((m) => {
 	m.transparent =  true;
 	m.opacity = 0.5;
 	}
-)
+);
+
+
 
 const face_ms = [
-	new THREE.MeshLambertMaterial( { color: 0x44ff44 } )
+	new THREE.MeshStandardMaterial( { color: 0x44ff44 } )
 	];
 
 for( const face_m of face_ms ) {
@@ -85,41 +102,87 @@ function createShape(name, option) {
 	setVisibility(option ? option : structure.options[0].name);
 }
 
+function displayDocs(name) {
+	const docdiv = document.getElementById("description");
+	const description = STRUCTURES_BY_NAME[name].description;
+	if( description ) {
+		docdiv.innerHTML =`<p>${name}</p><p>${description}</p>`;
+	} else {
+		docdiv.innerHTML =`<p>${name}</p>`;
+	}
+}
+
+function showDocs(visible) {
+	const docdiv = document.getElementById("description");
+	if( visible ) {
+		docdiv.style.display = '';
+	} else {
+		docdiv.style.display = 'none';
+	}
+}
+
+function releaseNotes() {
+    showDocs(false);
+    const reldiv = document.getElementById("release_notes");
+    reldiv.style.display = '';
+    reldiv.innerHTML = RELEASE_NOTES + '<p><a id="no_notes" href="#">[hide]</a>';
+    const goaway = document.getElementById("no_notes");
+    goaway.addEventListener('click', noNotes);
+    }
+
+function noNotes() {
+    	const reldiv = document.getElementById("release_notes");
+ 	reldiv.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) {
 	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);
-	} else {
-		if( primary ) {
-			link_ms[0].opacity = o;
-		} else {
-			link_ms.slice(1).map((lm) => lm.opacity = o);
-		}
-	}
+    link_ms.map((lm) => lm.opacity = o);
+    if( shape ) {
+        shape.links.map((l) => l.object.material.opacity = o);
+    }
 }
 
+function setNodeOpacity(o) {
+	node_ms.map((nm) => nm.opacity = o);
+}
+
+
 let gui; 
 
 
 function changeShape() {
-	createShape(gui.params.shape);	
+	createShape(gui.params.shape);
+	displayDocs(gui.params.shape);
 }
 
 function setVisibility(option_name) {
@@ -138,8 +201,10 @@ gui = new FourDGUI(
 	changeShape,
 	setColors,
 	setBackground,
+	setNodeOpacity,
 	setLinkOpacity,
-	setVisibility
+	setVisibility,
+	showDocs
 );
 
 // these are here to pick up colour settings from the URL params
@@ -184,6 +249,7 @@ renderer.domElement.addEventListener("pointerup", (event) => {
 })
 
 createShape(gui.params.shape, gui.params.option);
+displayDocs(gui.params.shape);
 
 function animate() {
 	requestAnimationFrame( animate );
@@ -197,13 +263,15 @@ function animate() {
 		}
 	}
 
-	const rotations = get_rotation(gui.params.rotation, theta, psi);
+	const rotations = [
+		rotfn[gui.params.xRotate](theta), 
+		rotfn[gui.params.yRotate](psi)
+	];
+	shape.hyperplane = 1 / gui.params.hyperplane;
+	camera.position.set(0, 0, gui.params.zoom * CAMERA_K * gui.params.hyperplane);
 
-	shape.hyperplane = gui.params.hyperplane;
-	camera.position.set(0, 0, gui.params.zoom * CAMERA_K / gui.params.hyperplane);
-
-	shape.link_scale = gui.params.thickness;
 	shape.node_scale = gui.params.nodesize;
+	shape.link_scale = gui.params.linksize * gui.params.nodesize * 0.5;
 	shape.render3(rotations, node_show, link_show);
 
 

package-lock.json

@@ -4,7 +4,9 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "fourdjs",
       "dependencies": {
+        "color": "^4.2.3",
         "color-scheme": "^1.0.1",
         "lil-gui": "^0.19.0",
         "three": "^0.154.0"
@@ -365,11 +367,48 @@
         "node": ">=12"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/color-scheme": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/color-scheme/-/color-scheme-1.0.1.tgz",
       "integrity": "sha512-4x+ya6+z6g9DaTFSfVzTZc8TSjxHuDT40NB43N3XPUkQlF6uujhwH8aeMeq8HBgoQQog/vrYgJ16mt/eVTRXwQ=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -421,6 +460,11 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/lil-gui": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.19.0.tgz",
@@ -494,6 +538,14 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -509,9 +561,9 @@
       "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug=="
     },
     "node_modules/vite": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
-      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "color": "^4.2.3",
     "color-scheme": "^1.0.1",
     "lil-gui": "^0.19.0",
     "three": "^0.154.0"

polytopes.js

@@ -55,19 +55,38 @@ export function auto_detect_edges(nodes, neighbours, debug=false) {
 	return links;
 }
 
+
+export const linkTest = () => {
+    return {
+        name: 'linky',
+        nodes: [
+            { id:1, label: 1, x: -1, y: -1, z:-1, w: 0 },
+            { id:2, label: 2, x: 1, y: 1, z: 1, w: 0 },
+        ],
+        links: [
+            { id: 1, source: 1, target: 2 }
+        ],
+  		options: [ { name: '--' }],
+		description: `link`,
+	  }
+};
+
+
+
 // too small and simple to calculate
 
+
+
 export const cell5 = () => {
-	const r5 = Math.sqrt(5);
-	const r2 = Math.sqrt(2) / 2;
+	const c1 = Math.sqrt(5) / 4;
 	return {
 		name: '5-cell',
 		nodes: [
-	      {id:1, label: 1, x: r2, y: r2, z: r2, w: -r2 / r5 },
-	      {id:2, label: 2, x: r2, y: -r2, z: -r2, w: -r2 / r5 },
-	      {id:3, label: 3, x: -r2, y: r2, z: -r2, w: -r2 / r5 },
-	      {id:4, label: 4, x: -r2, y: -r2, z: r2, w: -r2 / r5 },
-	      {id:5, label: 5, x: 0, y: 0, z: 0, w: 4 * r2 / r5 },
+	      {id:1, label: 1, x: c1, y: c1, z: c1, w: -0.25 },
+	      {id:2, label: 2, x: c1, y: -c1, z: -c1, w: -0.25 },
+	      {id:3, label: 3, x: -c1, y: c1, z: -c1, w: -0.25 },
+	      {id:4, label: 4, x: -c1, y: -c1, z: c1, w: -0.25 },
+	      {id:5, label: 5, x: 0, y: 0, z: 0, w: 1 },
 		],
 		links: [
 			{ id:1, source:1, target: 2},
@@ -81,11 +100,12 @@ export const cell5 = () => {
 			{ id:9, source:3, target: 5},
 			{ id:10, source:4, target: 5},
 		],
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
-		options: [ { name: '--' }]
+		options: [ { name: '--' }],
+		description: `Five tetrahedra joined at ten faces with three
+		tetrahedra around each edge. The 5-cell is the simplest regular
+		four-D polytope and the four-dimensional analogue of the tetrahedron.
+		A corresponding polytope, or simplex, exists for every n-dimensional
+		space.`,
 	};
 };
 
@@ -104,18 +124,18 @@ export const cell16 = () => {
 	nodes[1].label = 4;
 
 	index_nodes(nodes);
-	scale_nodes(nodes, 0.75);
+	scale_nodes(nodes, 0.5);
 	const links = auto_detect_edges(nodes, 6);
 
 	return {
 		name: '16-cell',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
-		options: [ { name: '--' }]
+		options: [ { name: '--' }],
+		description: `Sixteen tetrahedra joined at 32 faces with four
+		tetrahedra around each edge. The 16-cell is the four-dimensional
+		analogue of the octahedron and is dual to the tesseract. Every
+		n-dimensional space has a corresponding polytope in this family.`,
 	};
 };
 
@@ -133,7 +153,7 @@ export const tesseract = () => {
 		}
 	}
 
-	scale_nodes(nodes, Math.sqrt(2) / 2);
+	scale_nodes(nodes, 0.5);
 	const links = auto_detect_edges(nodes, 4);
 	links.map((l) => { l.label = 0 });
 
@@ -146,18 +166,20 @@ export const tesseract = () => {
 
 
 	return {
-		name: 'tesseract',
+		name: 'Tesseract',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [
 			{ name: 'none', links: [ 0 ] },
 			{ name: 'one 16-cell', links: [ 0, 1 ] },
 			{ name: 'both 16-cells', links: [ 0, 1, 2 ] },
 		],
+		description: `The most well-known four-dimensional shape, the
+		tesseract is analogous to the cube, and is constructed by placing two
+		cubes in parallel hyperplanes and joining their corresponding
+		vertices. It consists of eight cubes joined at 32 face with three 
+		cubes around each edge, and is dual to the 16-cell. Every
+		n-dimensional space has a cube analogue or measure polytope.`,
 	};
 }
 
@@ -183,6 +205,7 @@ export const cell24 = () => {
 		n.label = CELL24_INDEXING[axes[0]][axes[1]];
 	}
 
+	scale_nodes(nodes, Math.sqrt(2) / 2);
 	index_nodes(nodes);
 	const links = auto_detect_edges(nodes, 8);
 	links.map((l) => l.label = 0);
@@ -206,16 +229,16 @@ export const cell24 = () => {
 		name: '24-cell',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		base: {},
 		options: [
 			{ name: 'none', links: [ 0 ] },
 			{ name: 'one 16-cell', links: [ 0, 1 ] },
 			{ name: 'three 16-cells', links: [ 0, 1, 2, 3 ] }
-		]
+		],
+		description: `A unique object without an exact analogue in higher
+		or lower dimensions, the 24-cell is made of twenty-four octahedra
+		joined at 96 faces, with three around each edge. The 24-cell is
+		self-dual.`,
 	};
 }
 
@@ -319,7 +342,7 @@ export function make_120cell_vertices() {
 		PERMUTE.coordinates([2, 1, phi, phiinv], 0, true),
 		].flat();
 	index_nodes(nodes);
-	scale_nodes(nodes, 0.5);
+	scale_nodes(nodes, 0.25 * Math.sqrt(2));
 	return nodes;
 }
 
@@ -393,12 +416,10 @@ export const cell120_layered = (max) => {
 		name: '120-cell layered',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		nolink2opacity: true,
-		options: options
+		options: options,
+		description: `This version of the 120-cell lets you explore its
+		structure by building each layer from the 'north pole' onwards.`,
 	}
 }
 
@@ -426,15 +447,15 @@ export const cell120_inscribed = () => {
 		name: '120-cell',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [
 			{ name: "none", links: [ 0 ]},
 			{ name: "one inscribed 600-cell", links: [ 0, 1 ] },
 			{ name: "five inscribed 600-cells", links: [ 0, 1, 2, 3, 4, 5 ] }
-		]
+		],
+		description: `The 120-cell is the four-dimensional analogue of the
+		dodecahedron, and consists of 120 dodecahedra joined at 720 faces,
+		with three dodecahedra around each edge. It is dual to the 600-cell,
+		and five 600-cells can be inscribed in its vertices.`,
 	}
 }
 
@@ -515,7 +536,7 @@ export function make_600cell_vertices() {
 
 
 	index_nodes(nodes);
-	scale_nodes(nodes, 0.75);
+	scale_nodes(nodes, 0.5);
 	return nodes;
 }
 
@@ -557,15 +578,16 @@ export const cell600 = () => {
 		name: '600-cell',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [
 			{ name: "none", links: [ 0 ]},
 			{ name: "one 24-cell", links: [ 0, 1 ] },
 			{ name: "five 24-cells", links: [ 0, 1, 2, 3, 4, 5 ] }
-		]
+		],
+		description: `The 600-cell is the four-dimensional analogue of the
+		icosahedron, and consists of 600 tetrahedra joined at 1200 faces
+		with five tetrahedra around each edge. It is dual to the 120-cell.
+		Its 120 vertices can be partitioned into five sets which form the
+		vertices of five inscribed 24-cells.`,
 	}
 }
 
@@ -605,12 +627,10 @@ export const cell600_layered = () => {
 		name: '600-cell layered',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		nolink2opacity: true,
-		options: options
+		options: options,
+		description: `This version of the 600-cell lets you explore its
+		structure by building each layer from the 'north pole' onwards.`,
 	}
 
 
@@ -628,19 +648,18 @@ export const snub24cell = () => {
 		return sn && tn;
 	});
 
-	console.log(nodes);
-
 	links.map((l) => l.label = 0);
 
 	return {
-		name: 'snub 24-cell',
+		name: 'Snub 24-cell',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [ { name: "--" } ],
+		description: `The snub 24-cell is a semiregular polytope which
+		connects the 24-cell with the 600-cell. It consists of 24 icosahedra
+		and 120 tetrahedra, and is constructed by removing one of the
+		five inscribed 24-cells from a 600-cell.`
+
 	}
 
 
@@ -680,6 +699,7 @@ function make_dodecahedron_vertices() {
 			{ x: -phi, y: phiinv, z:0, w: 0 , 	label: 4},
 			{ x: -phi, y: -phiinv, z:0, w: 0 , 	label: 2},
 		];
+	scale_nodes(nodes, 1 / Math.sqrt(3));
 	index_nodes(nodes);
 	return nodes;
 }
@@ -697,18 +717,146 @@ export const dodecahedron = () => {
 	}
 
 	return {
-		name: 'dodecahedron',
+		name: 'Dodecahedron',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [
 			{ name: "none", links: [ 0 ]},
 			{ name: "one tetrahedron", links: [ 0, 1 ] },
 			{ name: "five tetrahedra", links: [ 0, 1, 2, 3, 4, 5 ] }
-		]
+		],
+		description: `The dodecahedron is a three-dimensional polyhedron
+		which is included here so that you can see the partition of its
+		vertices into five interlocked tetrahedra. This structure is the
+		basis for the partition of the 120-cell's vertices into five
+		600-cells.`
+
+	}
+}
+
+
+export const tetrahedron = () => {
+	const r2 = Math.sqrt(2);
+	const r3 = Math.sqrt(3);
+	return {
+		name: 'Tetrahedron',
+		nodes: [
+	      {id:1, label: 1, x: 2 * r2 / 3, y: 0, z: -1/3, w: 0 },
+	      {id:2, label: 2, x: -r2 / 3, y: r2 / r3, z: -1/3, w: 0 },
+	      {id:3, label: 3, x: -r2 / 3, y: -r2 / r3, z: -1/3, w: 0 },
+	      {id:4, label: 4, x: 0, y: 0, z: 1, w: 0 },
+		],
+		links: [
+			{ id:1, source:1, target: 2},
+			{ id:2, source:1, target: 3},
+			{ id:3, source:1, target: 4},
+			{ id:4, source:2, target: 3},
+			{ id:5, source:2, target: 4},
+			{ id:6, source:3, target: 4},
+		],
+		options: [ { name: '--' }],
+		description: `The simplest three-dimensional polytope, consisting of four triangles joined at six edges. The 5-cell is its four-dimensional analogue.`,
+	};
+};
+
+export const octahedron = () => {
+	const nodes = [
+		{id: 1, label: 1, x: 1, y: 0, z: 0, w: 0},
+		{id: 2, label: 1, x: -1, y: 0, z: 0, w: 0},
+		{id: 3, label: 2, x: 0, y: 1, z: 0, w: 0},
+		{id: 4, label: 2, x: 0, y: -1, z: 0, w: 0},
+		{id: 5, label: 3, x: 0, y: 0, z: 1, w: 0},
+		{id: 6, label: 3, x: 0, y: 0, z: -1, w: 0},
+	];
+	const links = [
+		{id:1, source: 1, target: 3},
+		{id:2, source: 1, target: 4},
+		{id:3, source: 1, target: 5},
+		{id:4, source: 1, target: 6},
+		{id:5, source: 2, target: 3},
+		{id:6, source: 2, target: 4},
+		{id:7, source: 2, target: 5},
+		{id:8, source: 2, target: 6},
+		{id:9, source: 3, target: 5},
+		{id:10, source: 3, target: 6},
+		{id:11, source: 4, target: 5},
+		{id:12, source: 4, target: 6},
+	]
+	links.map((l) => { l.label = 0 });
+	return {
+		name: 'Octahedron',
+		nodes: nodes,
+		links: links,
+		options: [ { name: '--' }],
+		description: `The three-dimensional cross-polytope, the 16-cell is its four-dimensional analogue.`,
+	};
+
+}
+
+export const cube = () => {
+	const nodes = [
+		{id: 1, label: 1, x: 1, y: 1, z: 1, w: 0},
+		{id: 2, label: 2, x: -1, y: 1, z: 1, w: 0},
+		{id: 3, label: 2, x: 1, y: -1, z: 1, w: 0},
+		{id: 4, label: 1, x: -1, y: -1, z: 1, w: 0},
+		{id: 5, label: 2, x: 1, y: 1, z: -1, w: 0},
+		{id: 6, label: 1, x: -1, y: 1, z: -1, w: 0},
+		{id: 7, label: 1, x: 1, y: -1, z: -1, w: 0},
+		{id: 8, label: 2, x: -1, y: -1, z: -1, w: 0},
+	];
+	scale_nodes(nodes, 1/Math.sqrt(3));
+	const links = auto_detect_edges(nodes, 3);
+	links.map((l) => { l.label = 0 });
+	return {
+		name: 'Cube',
+		nodes: nodes,
+		links: links,
+		options: [ { name: '--' }],
+		description: `The three-dimensional measure polytope, the tesseract is its four-dimensional analogue.`,
+	};
+
+}
+
+
+
+function make_icosahedron_vertices() {
+	const phi = 0.5 * (1 + Math.sqrt(5));  
+
+	const nodes = [
+		{ x: 0, y: 1, z: phi, w: 0, label: 1 },
+		{ x: 0, y: -1, z: phi, w: 0, label: 1 },
+		{ x: 0, y: 1, z: -phi, w: 0, label: 1 },
+		{ x: 0, y: -1, z: -phi, w: 0, label: 1 },
+		{ x: 1, y: phi, z: 0, w: 0, label: 2 },
+		{ x: -1, y: phi, z: 0, w: 0, label: 2 },
+		{ x: 1, y: -phi, z: 0, w: 0, label: 2 },
+		{ x: -1, y: -phi, z: 0, w: 0, label: 2 },
+		{ x: phi, y: 0, z: 1, w: 0, label: 3},
+		{ x: phi, y: 0, z: -1, w: 0, label: 3},
+		{ x: -phi, y: 0, z: 1, w: 0, label: 3},
+		{ x: -phi, y: 0, z: -1, w: 0, label: 3},
+		];
+
+   	scale_nodes(nodes, 1/Math.sqrt((5 + Math.sqrt(5)) / 2));
+	index_nodes(nodes);
+	return nodes;
+}
+
+
+
+export const icosahedron = () => {
+	const nodes  = make_icosahedron_vertices();
+	const links = auto_detect_edges(nodes, 5);
+	links.map((l) => l.label = 0);
+
+	return {
+		name: 'Icosahedron',
+		nodes: nodes,
+		links: links,
+		options: [
+			{ name: "--"},
+		],
+		description: `The icosahedron is a twenty-sided polyhedron and is dual to the dodecahedron. Its four-dimensional analogue is the 600-cell.`
 
 	}
 }
@@ -716,6 +864,11 @@ export const dodecahedron = () => {
 
 export const build_all = () => {
 	return [
+	        linkTest(),
+		tetrahedron(),
+		octahedron(),
+		cube(),
+		icosahedron(),
 	 	dodecahedron(),
 	 	cell5(),
 		cell16(),
@@ -727,4 +880,8 @@ export const build_all = () => {
 	 	cell120_inscribed(),
 	 	cell120_layered()
 	 	];
-}
+}
+
+export const radii = (shape) => {
+	return shape.nodes.map(n => Math.sqrt(n.x * n.x + n.y * n.y + n.z * n.z + n.w * n.w))
+}

rotation.js

@@ -81,24 +81,5 @@ export const rotfn = {
 	ZW: rotZW,
 };
 
-const rotMode = {
-	'rigid': [ rotYW, rotXW ],
-	'tumbling': [ rotYW, rotXZ  ],
-	'inside-out': [ rotYW, rotXY ],
-	'axisymmetrical': [ rotZW, rotXY ]
-};
-
-
-export const get_rotation = (mode, theta, psi) => {
-	const fns = rotMode[mode];
-	return [ fns[0](theta), fns[1](psi) ];
-}
-
-
-
-	// [
-	// 	rotfn[gui.params.xRotate](theta), 
-	// 	rotfn[gui.params.yRotate](psi)
-	// ];
 
 

taperedLink.js

@@ -0,0 +1,66 @@
+import * as THREE from 'three';
+
+const EPSILON = 0.001;
+
+class TaperedLink extends THREE.Group {
+
+  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 );
+    this.add( this.object );
+    this.update(n1, n2, r1, r2);
+   }
+
+   update(n1, n2, r1, r2) {
+    const kraw = r1 - r2;
+    let k = ( Math.abs(kraw) < EPSILON ) ? EPSILON : kraw;
+    let nbase = n1.v3;
+    let napex = n2.v3;
+    let rbase = r1;
+    let rapex = r2;
+    if( k < 0 ) {
+      nbase = n2.v3;
+      napex = n1.v3;
+      rbase = r2;
+      rapex = r1;
+      k = -k;
+    }
+
+    const l = nbase.distanceTo(napex);
+    const lapex = l * rapex / k;
+    const h = l + lapex;
+    this.scale.copy(new THREE.Vector3(rbase, rbase, h));
+    const h_offset = 0.5 * h / l;
+    const pos = new THREE.Vector3();
+    pos.lerpVectors(nbase, napex, h_offset);
+
+    this.position.copy(pos); // the group, not the cone!! 
+
+    this.lookAt(nbase);
+    this.children[0].rotation.x = 3 * 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(
+      clipnorm, napex
+    );
+
+   
+    }  
+
+    set_color(colors) {
+        this.material.color = new THREE.Color(colors[this.color_i]);
+    }
+
+}
+
+
+export { TaperedLink };