A few more ux refinements, and added the ability to hide captions

is making large objects like the 120-cell noticeably stuttery

fourDShape.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 
 
 const HYPERPLANE = 2.0;
-
+const W_FORESHORTENING = 0.04;
 
 class FourDShape extends THREE.Group {
 
@@ -15,11 +15,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();
 	}
 
@@ -35,7 +34,7 @@ class FourDShape extends THREE.Group {
 		}
 	}
 
-	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);
@@ -44,32 +43,43 @@ class FourDShape extends THREE.Group {
 	}
 
 	makeLink(material, link) {
-		const n1 = this.nodes3[link.source].v3;
+		const n1 = this.nodes3[link.source];
-		const n2 = this.nodes3[link.target].v3;
+		const n2 = this.nodes3[link.target];
-		const length = n1.distanceTo(n2);
+		const s1 = n1.scale;
+		const s2 = n2.scale;
+		const length = n1.v3.distanceTo(n2.v3);
 		const centre = new THREE.Vector3();
-		centre.lerpVectors(n1, n2, 0.5);
+		centre.lerpVectors(n1.v3, n2.v3, 0.5);
-		const geometry = new THREE.CylinderGeometry(this.link_size, this.link_size, 1);
+		const geometry = new THREE.CylinderGeometry(
+			this.link_scale * s2, this.link_scale * s1, 1,
+			16, 1, true
+		);
 		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);
+		edge.lookAt(n2.v3);
 		cyl.rotation.x = Math.PI / 2.0;
 		this.add(edge);
 		return edge;
 	}
 
 	updateLink(link, links_show) {
-		const n1 = this.nodes3[link.source].v3;
+		const n1 = this.nodes3[link.source];
-		const n2 = this.nodes3[link.target].v3;
+		const n2 = this.nodes3[link.target];
-		const length = n1.distanceTo(n2);
+		const s1 = n1.scale;
+		const s2 = n2.scale;
+		const length = n1.v3.distanceTo(n2.v3);
 		const centre = new THREE.Vector3();
-		centre.lerpVectors(n1, n2, 0.5);
+		centre.lerpVectors(n1.v3, n2.v3, 0.5);
-		link.object.scale.copy(new THREE.Vector3(this.link_scale, this.link_scale, length));
+		// 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));
 		link.object.position.copy(centre);
-		link.object.lookAt(n2);
+		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); 
 	}
@@ -100,24 +110,42 @@ class FourDShape extends THREE.Group {
 	}
 
 
-	fourDtoV3(x, y, z, w, rotations) {
+	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.hyperplane / (this.hyperplane + v4.w);
+		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 );
+	}
+	
+	fourDrotate(x, y, z, w, rotations) {
+		const v4 = new THREE.Vector4(x, y, z, w);
+		for ( const m4 of rotations ) {
+			v4.applyMatrix4(m4);
+		}
+		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 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);
 			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 ) {
@@ -134,10 +162,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,11 @@ import { GUI } from 'lil-gui';
 
 
 const DEFAULTS = {
-	thickness: 1.0,
+	nodesize: 0.25,
-	nodesize: 2.0,
+	nodeopacity: 1,
-	linkopacity: 0.5,
+	linksize: 0.2,
-	link2opacity: 0.5,
+	linkopacity: 0.75,
+	link2opacity: 0.75,
 	shape: '120-cell',
 	option: 'none',
 	visibility: 5,
@@ -13,11 +14,13 @@ const DEFAULTS = {
 	inscribe_all: false,
 	color: 0x3293a9,
 	background: 0xd4d4d4,
-	hyperplane: 1.5,
+	hyperplane: 0.93,
 	zoom: 1,
 	xRotate: 'YW',
-	yRotate: 'XZ',
+	yRotate: 'XW',
 	dtheta: 0,
+	damping: false,
+	captions: true,
 	dpsi: 0,
 }
 
@@ -25,7 +28,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);
 
@@ -36,10 +39,11 @@ 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'],
@@ -48,6 +52,7 @@ 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() }
@@ -65,20 +70,22 @@ 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, '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, '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.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');
 
@@ -134,10 +141,11 @@ 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);
@@ -151,10 +159,11 @@ 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("nodeopacity", this.params.nodesize.toString());
-		url.searchParams.append("link2opacity", 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());

main.js

@@ -9,7 +9,7 @@ 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
 
@@ -47,11 +47,19 @@ 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 } )
@@ -95,6 +103,16 @@ 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,
@@ -125,6 +143,11 @@ function setLinkOpacity(o, primary) {
 	}
 }
 
+function setNodeOpacity(o) {
+	node_ms.map((nm) => nm.opacity = o);
+}
+
+
 let gui; 
 
 
@@ -149,8 +172,10 @@ gui = new FourDGUI(
 	changeShape,
 	setColors,
 	setBackground,
+	setNodeOpacity,
 	setLinkOpacity,
-	setVisibility
+	setVisibility,
+	showDocs
 );
 
 // these are here to pick up colour settings from the URL params
@@ -213,11 +238,11 @@ function animate() {
 		rotfn[gui.params.xRotate](theta), 
 		rotfn[gui.params.yRotate](psi)
 	];
-	shape.hyperplane = gui.params.hyperplane;
+	shape.hyperplane = 1 / gui.params.hyperplane;
-	camera.position.set(0, 0, gui.params.zoom * CAMERA_K / 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);
 
 

polytopes.js

@@ -58,16 +58,15 @@ export function auto_detect_edges(nodes, neighbours, debug=false) {
 // too small and simple to calculate
 
 export const cell5 = () => {
-	const r5 = Math.sqrt(5);
+	const c1 = Math.sqrt(5) / 4;
-	const r2 = Math.sqrt(2) / 2;
 	return {
 		name: '5-cell',
 		nodes: [
-	      {id:1, label: 1, x: r2, y: r2, z: r2, w: -r2 / r5 },
+	      {id:1, label: 1, x: c1, y: c1, z: c1, w: -0.25 },
-	      {id:2, label: 2, x: r2, y: -r2, z: -r2, w: -r2 / r5 },
+	      {id:2, label: 2, x: c1, y: -c1, z: -c1, w: -0.25 },
-	      {id:3, label: 3, x: -r2, y: r2, z: -r2, w: -r2 / r5 },
+	      {id:3, label: 3, x: -c1, y: c1, z: -c1, w: -0.25 },
-	      {id:4, label: 4, x: -r2, y: -r2, z: r2, w: -r2 / r5 },
+	      {id:4, label: 4, x: -c1, y: -c1, z: c1, w: -0.25 },
-	      {id:5, label: 5, x: 0, y: 0, z: 0, w: 4 * r2 / r5 },
+	      {id:5, label: 5, x: 0, y: 0, z: 0, w: 1 },
 		],
 		links: [
 			{ id:1, source:1, target: 2},
@@ -81,10 +80,6 @@ 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: '--' }],
 		description: `Five tetrahedra joined at ten faces with three
 		tetrahedra around each edge. The 5-cell is the simplest regular
@@ -109,17 +104,13 @@ 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: '--' }],
 		description: `Sixteen tetrahedra joined at 32 faces with four
 		tetrahedra around each edge. The 16-cell is the four-dimensional
@@ -142,7 +133,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 });
 
@@ -158,10 +149,6 @@ export const 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 ] },
@@ -198,6 +185,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);
@@ -221,10 +209,6 @@ 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 ] },
@@ -338,7 +322,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;
 }
 
@@ -412,10 +396,6 @@ 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,
 		description: `This version of the 120-cell lets you explore its
@@ -447,10 +427,6 @@ 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 ] },
@@ -540,7 +516,7 @@ export function make_600cell_vertices() {
 
 
 	index_nodes(nodes);
-	scale_nodes(nodes, 0.75);
+	scale_nodes(nodes, 0.5);
 	return nodes;
 }
 
@@ -582,10 +558,6 @@ 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 ] },
@@ -635,10 +607,6 @@ 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,
 		description: `This version of the 600-cell lets you explore its
@@ -666,10 +634,6 @@ export const snub24cell = () => {
 		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
@@ -715,6 +679,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;
 }
@@ -735,10 +700,6 @@ export const 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 ] },
@@ -754,8 +715,139 @@ export const dodecahedron = () => {
 }
 
 
+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.`
+
+	}
+}
+
+
 export const build_all = () => {
 	return [
+		tetrahedron(),
+		octahedron(),
+		cube(),
+		icosahedron(),
 	 	dodecahedron(),
 	 	cell5(),
 		cell16(),
@@ -767,4 +859,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))
 }