fourDShape.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 
 
 const HYPERPLANE = 2.0;
-const W_FORESHORTENING = 0.04;
+const W_FORESHORTENING = 0.4;
 
 class FourDShape extends THREE.Group {
 
@@ -50,10 +50,7 @@ class FourDShape extends THREE.Group {
 		const length = n1.v3.distanceTo(n2.v3);
 		const centre = new THREE.Vector3();
 		centre.lerpVectors(n1.v3, n2.v3, 0.5);
-		const geometry = new THREE.CylinderGeometry(
-			this.link_scale * s2, this.link_scale * s1, 1,
-			16, 1, true
-		);
+		const geometry = new THREE.CylinderGeometry(this.link_scale * s2, this.link_scale * s1, 1);
 		const cyl = new THREE.Mesh(geometry, material);
 		const edge = new THREE.Group();
 		edge.add(cyl);
@@ -73,17 +70,36 @@ class FourDShape extends THREE.Group {
 		const length = n1.v3.distanceTo(n2.v3);
 		const centre = new THREE.Vector3();
 		centre.lerpVectors(n1.v3, n2.v3, 0.5);
-		// take the average of the ends as the thickness - as a workaround,
-		// because I haven't worked out how to reshape tapered links without
-		// having to reassign a new geometry to every link
-		const link_mean = this.link_scale * (s1 + s2) * 0.5;		
-		link.object.scale.copy(new THREE.Vector3(link_mean, link_mean, length));
+		// is this really the only way to do this?
+		//const geometry = new THREE.CylinderGeometry(this.link_scale * s2, this.link_scale * s1, 1);
+		//link.object.children[0].geometry.dispose();
+		this.forshortenLink(link.object.children[0].geometry, this.link_scale * s2, this.link_scale * s1);
+		//const link_hack = this.link_scale * (s1 + s2) * 0.5;		
+		link.object.scale.copy(new THREE.Vector3(1, 1, length));
 		link.object.position.copy(centre);
 		link.object.lookAt(n2.v3);
 		link.object.children[0].rotation.x = Math.PI / 2.0;
+		// link.object.children[0].geometry.needsUpdate = true;
+		// link.object.children[0].geometry.computeVertexNormals();
 		link.object.visible = (!links_show || link.label in links_show); 
 	}
 
+	forshortenLink(geometry, top, bottom) {
+		const count = geometry.attributes.position.count;
+		for( let i = 0; i < count; i++ ) {
+			const x = geometry.attributes.position.getX(i);
+			const y = geometry.attributes.position.getY(i);
+			const z = geometry.attributes.position.getZ(i);
+			if( z == 0 ) {
+				geometry.attributes.position.setX(i, x * top);
+				geometry.attributes.position.setY(i, y * top);
+			} else {
+				geometry.attributes.position.setX(i, x * bottom);
+				geometry.attributes.position.setY(i, y * bottom);
+			}
+		}
+	}
+
 
 	setFaceGeometry(face, geometry) {
 		const values = [];

gui.js

@@ -2,11 +2,10 @@ import { GUI } from 'lil-gui';
 
 
 const DEFAULTS = {
-	nodesize: 0.25,
-	nodeopacity: 1,
-	linksize: 0.2,
-	linkopacity: 0.75,
-	link2opacity: 0.75,
+	thickness: 0.02,
+	nodesize: 0.02,
+	linkopacity: 0.5,
+	link2opacity: 0.5,
 	shape: '120-cell',
 	option: 'none',
 	visibility: 5,
@@ -19,8 +18,6 @@ const DEFAULTS = {
 	xRotate: 'YW',
 	yRotate: 'XW',
 	dtheta: 0,
-	damping: false,
-	captions: true,
 	dpsi: 0,
 }
 
@@ -28,7 +25,7 @@ const DEFAULTS = {
 
 class FourDGUI {
 
-	constructor(shapes, changeShape, setColor, setBackground, setNodeOpacity,setLinkOpacity, setVisibility, showDocs) {
+	constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) {
 		this.gui = new GUI();
 		const SHAPE_NAMES = shapes.map((s) => s.name);
 
@@ -39,11 +36,10 @@ class FourDGUI {
 			option: this.link['option'],
 			inscribed: this.link['inscribed'],
 			inscribe_all: this.link['inscribe_all'],
-			linksize: this.link['linksize'],
+			thickness: this.link['thickness'],
 			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'],
@@ -52,7 +48,6 @@ class FourDGUI {
 			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() }
@@ -72,20 +67,18 @@ 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);
-		this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(setNodeOpacity);
-		this.gui.add(this.params, 'linksize', 0, 1);
+		this.gui.add(this.params, 'thickness', 0, 0.1);
 		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, 0.1);
 		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, 'captions').onChange(showDocs);
 		this.gui.add(this.params, 'damping');
 		this.gui.add(this.params, 'copy link');
 
@@ -141,11 +134,10 @@ class FourDGUI {
 		}
 		this.link['hyperplane'] = this.numParam('hyperplane', parseFloat);
 		this.link['zoom'] = this.numParam('zoom', parseFloat);
-		this.link['linksize'] = this.numParam('linksize', parseFloat);
+		this.link['thickness'] = this.numParam('thickness', 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);
@@ -159,11 +151,10 @@ 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("linksize", this.params.linksize.toString());
+		url.searchParams.append("thickness", this.params.thickness.toString());
 		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("linkopacity", this.params.thickness.toString());
+		url.searchParams.append("link2opacity", this.params.nodesize.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());

main.js

@@ -47,19 +47,11 @@ 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 } )
@@ -103,16 +95,6 @@ function displayDocs(name) {
 	}
 }
 
-function showDocs(visible) {
-	console.log(`showDocs ${visible}`);
-	const docdiv = document.getElementById("description");
-	if( visible ) {
-		docdiv.style.display = '';
-	} else {
-		docdiv.style.display = 'none';
-	}
-}
-
 // initialise gui and read params from URL
 
 // callbacks to do things which are triggered by controls: reset the shape,
@@ -143,11 +125,6 @@ function setLinkOpacity(o, primary) {
 	}
 }
 
-function setNodeOpacity(o) {
-	node_ms.map((nm) => nm.opacity = o);
-}
-
-
 let gui; 
 
 
@@ -172,10 +149,8 @@ gui = new FourDGUI(
 	changeShape,
 	setColors,
 	setBackground,
-	setNodeOpacity,
 	setLinkOpacity,
-	setVisibility,
-	showDocs
+	setVisibility
 );
 
 // these are here to pick up colour settings from the URL params
@@ -241,8 +216,8 @@ function animate() {
 	shape.hyperplane = 1 / 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);