Added the document where I'm mapping the inscribed 600-cell to the primary one

Reviewed-on: #25

600_CELL_MAPPING.md

@@ -0,0 +1,61 @@
+# 600-cell mapping
+
+These are the nodes from a 120-cell which are on one of its inscribed 600-cells,
+sorted into layers (just the first half because the second half mirror these ones)
+
+Start: [ 27 ]
+
+0: [ 27 ]
+0.618:
+[
+  223, 253, 265, 331,
+  339, 393, 419, 427,
+  473, 511, 539, 555
+]
+
+1
+[
+   95, 105, 131, 140, 165, 179,
+  185, 207, 258, 274, 306,
+  313, 347, 367, 449, 471,
+  499, 527, 573, 585
+]
+
+1.175
+[
+  231, 285, 289, 324,
+  378, 388, 413, 425,
+  487, 513, 543, 563
+]
+
+1.414
+[
+   48,  49,  61,  68,  74,  87, 234,
+  239, 241, 248, 300, 301, 356, 357,
+  369, 376, 403, 406, 444, 453, 460,
+  469, 490, 503, 525, 532, 572, 581,
+  592, 593
+]
+
+## Manual mapping progress
+
+Starting from 27 on the inscribed 600 cell and 1 on the primary 600 cell, here are
+the two arctic circles
+
+Pole: 27: 1
+
+Arctic circle:
+
+419: 41
+223: 49
+253: 45
+331: 53
+427: 109
+339: 105
+511: 51
+265: 107
+473: 111
+539: 55
+555: 43
+393: 47
+

CHANGELOG.md

@@ -1,7 +1,12 @@
 CHANGELOG
 =========
 
-## v1.1 - 1/1/2025
+## v1.2 - 18/1/2026
+
+Added a second visualisation of the 120-cell's 5-cells without the 120-cell links
+and with more colours added so you can get a sense of the individual 5-cells.
+
+## v1.1 - 1/1/2026
 
 The 120-cell now includes a visualisation of its inscribed 5-cells, which honestly
 looks like less of a mess than I expected it to.

NOTES.md

@@ -1,26 +1,15 @@
 # NOTES
 
 
-New approach for the 5-cells:
+## Labelling the inscribed 600-cells in a 120-cell
 
-Pick a tetrahedron of an inscribed 600-cell with vertices A, B, C, D
-
-This gives pairs of vertices:
-
-AB
-AC
-AD
-BC
-BD
-CD
-
-Each of these gives rise to seven pairs of 5-cells which are on neighboring vertices
-of the 5 600-cells.
-
-Try enumerating these and inspecting them to find one or more coherent sets of four
-5-cells which lie on one tetrahedron from each of the 600-cells.
-
-(I expect there to be more than one, like how there are two ways to partition the
-120-cell vertices into 600-cells)
+I want to apply the partition of the 600-cell into five 24-cells to the inscribed
+600-cells in the 120-cell, so that I can use this partition to colour the inscribed
+5-cells - since each 5-cell has a vertex in each of the 600-cells, getting a
+partition for just one will be enough.
 
+The challenge is that the 600-cells in the 120-cell are rotated differently to the
+coordinates for the original 600-cell. And I don't have enough maths to line them up.
 
+What about - given one of the inscribed 600-cell, find all of the 24-cells? (there
+are 25 possible ones so sorting them out will be a pain)

cell120_to_cell5.js

@@ -437,7 +437,7 @@ function coherent_5cells_r(cell120, all5, c5s, c50) {
 
 
 
-function coherent_5cells(cell120, all5d) {
+function coherent_5cells(cell120, all5) {
     // pick a starting point, collect coherent 5_cells, continue till
     // there aren't any new ones
 
@@ -489,7 +489,7 @@ function coherent_all() {
         idict[i] = celli[i - 1];
     }
 
-    console.log(JSON.stringify(idict, null, 2));
+   console.log(JSON.stringify(idict, null, 2));
 }
 
 
@@ -515,5 +515,40 @@ function coherent_one_set() {
     console.log(JSON.stringify(idict, null, 2));
 }
 
+function cell120_csv() {
+    const cell120 = POLYTOPES.cell120_inscribed();
+    const coords = [ 'x', 'y', 'z', 'w' ];
+    console.log("id,label,x,y,z,w,zeroes");
+    for( const n of cell120.nodes ) {
+        const zc = coords.filter((c) => n[c] === 0);
+        console.log(`${n.id},${n.label},${n.x},${n.y},${n.z},${n.w},${zc.length}`);
+    }
+}
+
+
+function cell600_links(cell600, n) {
+    const links = cell600.links.filter((l) => l.source === n.id || l.target === n.id);
+    const nbors = links.map((l) => {
+        if( l.source === n.id ) {
+            return l.target;
+        } else {
+            return l.source;
+        }
+    });
+    return nbors.sort((a, b) => a - b);
+}
+
+
+function cell600_csv() {
+    const cell600 = POLYTOPES.cell600();
+    console.log("id,label,x,y,z,w,d");
+    const n0 = cell600.nodes[0];
+    for( const n of cell600.nodes ) {
+        const d = dist(n0, n);
+        const nbors = cell600_links(cell600, n);
+        const nids = nbors.join(',');
+        console.log(`${n.id},${n.label},${n.x},${n.y},${n.z},${n.w},${d},${nids}`);
+    }
+}
+cell600_csv();
 
-coherent_one_set();

colours.js

@@ -9,12 +9,11 @@ export const get_colours = (basis) => {
 	const luminance = hslb['color'][2];
 	const scheme = new ColorScheme;
 	scheme.from_hue(hue).scheme("tetrade").distance(0.75);
-	const colours = scheme.colors().slice(1, 9);
-	colours.reverse();
+	const scolours = scheme.colors();
+	const colours = [ ...scolours,  ...scolours, ...scolours, ...scolours, ...scolours,  ...scolours, ...scolours, ...scolours ]; 
 	const hsl = colours.map((c) => Color("#" + c).hsl());
 	const resaturated = hsl.map((hslc) => hslc.saturationl(saturation).rgbNumber()); 
 	resaturated.unshift(basis);
-	console.log(resaturated);
 	return resaturated;
 }
 

gui.js

@@ -6,13 +6,13 @@ const DEFAULTS = {
 	nodeopacity: 1,
 	linksize: 1.0,
 	linkopacity: 0.75,
-	shape: '120-cell',
+	shape: '600-cell',
 	link2opacity: 0.75,
 	option: 'none',
 	visibility: 5,
 	inscribed: false,
 	inscribe_all: false,
-	color: 0x3293a9,
+	colour: 0x3293a9,
 	background: 0xd4d4d4,
 	hyperplane: 0.93,
 	zoom: 1,
@@ -46,7 +46,7 @@ class FourDGUI {
 			nodesize: this.link['nodesize'],
 			nodeopacity: this.link['nodeopacity'],
 			depth: this.link['depth'],
-			color: this.link['color'],
+			colour: this.link['colour'],
 			background: this.link['background'],
 			hyperplane: this.link['hyperplane'],
 			zoom: this.link['zoom'],
@@ -60,8 +60,6 @@ class FourDGUI {
 		};
 		if( funcs.extras ) {
     		    for( const label in funcs.extras ) {
-    		        console.log(label);
-    		        console.log(funcs.extras[label]);
     		        this.params[label] = funcs.extras[label];
     		    }
 		}
@@ -83,10 +81,9 @@ class FourDGUI {
 		this.gui.add(this.params, 'nodesize', 0, 1.5);
 		this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(funcs.setNodeOpacity);
 		this.gui.add(this.params, 'linksize', 0, 2);
-		console.log(funcs.setLinkOpacity);
 		this.gui.add(this.params, 'linkopacity', 0, 1).onChange((v) => funcs.setLinkOpacity(v, true));
 		this.gui.add(this.params, 'link2opacity', 0, 1).onChange((v) => funcs.setLinkOpacity(v, false));
-		this.gui.addColor(this.params, 'color').onChange(funcs.setColor);
+		this.gui.addColor(this.params, 'colour').onChange(funcs.setColours);
 		this.gui.addColor(this.params, 'background').onChange(funcs.setBackground);
 		this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
 		this.gui.add(this.params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
@@ -155,7 +152,7 @@ class FourDGUI {
 		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['colour'] = this.numParam('colour', (s) => guiObj.stringToHex(s));
 		this.link['background'] = this.numParam('background', (s) => guiObj.stringToHex(s));
 		this.link['dpsi'] = this.numParam('dpsi', parseFloat);
 		this.link['dtheta'] = this.numParam('dtheta', parseFloat);
@@ -172,7 +169,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("color", this.hexToString(this.params.color));
+		url.searchParams.append("colour", this.hexToString(this.params.colour));
 		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());
@@ -190,7 +187,6 @@ class FourDGUI {
     		return;
   		}
   		navigator.clipboard.writeText(text).then(function() {
-    		console.log('Async: Copying to clipboard was successful!');
   		}, function(err) {
     	console.error('Async: Could not copy text: ', err);
   		});

index.html

@@ -36,7 +36,7 @@
 		<script type="module" src="/main.js"></script>
 		<div id="description"></div>
 		<div id="release_notes"></div>
-		<div id="info"><a href="#" id="show_notes">release 1.1</a> |
+		<div id="info"><a href="#" id="show_notes">release 1.2</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>

main.js

@@ -1,6 +1,15 @@
 import * as THREE from 'three';
 
 const RELEASE_NOTES = `
+<p><b>v1.2 - 18/1/2026</b></p>
+
+<p>Added a second visualisation of the 120-cell's 5-cells without the 120-cell links and with more colours added so you can get a sense of the individual 5-cells.</p>
+
+<p><b>v1.1 - 1/1/2026</b></p>
+
+<p>The 120-cell now includes a visualisation of its inscribed 5-cells, which honestly
+looks like less of a mess than I expected it to.</p>
+
 <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
@@ -51,7 +60,8 @@ document.body.appendChild( renderer.domElement );
 // set up colours and materials for gui callbacks
 
 scene.background = new THREE.Color(DEFAULTS.background);
-const node_colours = get_colours(DEFAULTS.color);
+const node_colours = get_colours(DEFAULTS.colour);
+
 
 const node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
 const link_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
@@ -68,7 +78,6 @@ link_ms.map((m) => {
 	}
 );
 
-console.log("link_ms", link_ms);
 
 
 const face_ms = [
@@ -146,7 +155,7 @@ relnotes.addEventListener('click', releaseNotes);
 // 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) {
+function setColours(c) {
     const nc = get_colours(c);
     for( let i = 0; i < node_ms.length; i++ ) {
     	node_ms[i].color = new THREE.Color(nc[i]);
@@ -154,7 +163,7 @@ function setColors(c) {
     }
     if( shape ) {
         // taperedLink.set_color updates according to the link index
-       shape.links.map((l) => l.object.set_color(nc));
+       shape.links.map((l) => l.object.set_colour(nc));
     }
 }
 
@@ -191,8 +200,6 @@ function changeShape() {
 }
 
 function setVisibility(option_name) {
-    console.log("setVisibility", option_name);
-    console.log(structure.options);
 	const option = structure.options.filter((o) => o.name === option_name);
 	if( option.length ) {
 		node_show = option[0].nodes;
@@ -207,7 +214,7 @@ gui = new FourDGUI(
     {
 	shapes: STRUCTURES,
 	changeShape: changeShape,
-	setColors: setColors,
+	setColours: setColours,
 	setBackground: setBackground,
 	setNodeOpacity: setNodeOpacity,
 	setLinkOpacity: setLinkOpacity,
@@ -217,7 +224,7 @@ gui = new FourDGUI(
 );
 
 // these are here to pick up colour settings from the URL params
-setColors(gui.params.color);
+setColours(gui.params.colour);
 setBackground(gui.params.background);
 
 const dragK = 0.005;

polytopes.js

@@ -216,6 +216,7 @@ export const cell24 = () => {
 		links16.map((l) => l.label = p);
 		links.push(...links16);
 	}
+	// colour links `
 	// links.map((l) => {
 	// 	const ls = [ l.source, l.target ].map((nid) => node_by_id(nodes, nid).label);
 	// 	for ( const c of [1, 2, 3] ) {
@@ -325,11 +326,11 @@ function auto_120cell_faces(links) {
 
 
 export function make_120cell_vertices() {
-	const phi = 0.5 * (1 + Math.sqrt(5));  
-	const r5 = Math.sqrt(5);   
-	const phi2 = phi * phi;    
-	const phiinv = 1 / phi;    
-	const phi2inv = 1 / phi2;  
+	const phi = 0.5 * (1 + Math.sqrt(5));
+	const r5 = Math.sqrt(5);
+	const phi2 = phi * phi;
+	const phiinv = 1 / phi;
+	const phi2inv = 1 / phi2;
 
 	const nodes = [
 		PERMUTE.coordinates([0, 0, 2, 2],  0),
@@ -348,9 +349,39 @@ export function make_120cell_vertices() {
 
 
 
+export function make_120cell_vertices_alt() {
+    // unit radius version to make it easier to partition one of the 600-cells
+	const phi = 0.5 * (1 + Math.sqrt(5));
+	const r5 = Math.sqrt(5);
+	const phi2 = phi * phi;
+	const phiinv = 1 / phi;
+	const phi2inv = 1 / phi2;
+	const r8 = Math.sqrt(8);
+	const p8 = phi / r8;
+	const r58 = r5 / r8;
+	const ir8 = 1 / r8;
+	const ip8 = phiinv / r8;
+	const p28 = phi2 / r8;
+	const ip28 = phi2inv / r8;
+
+	const nodes = [
+	    PERMUTE.coordinates([1, 0, 0, 0], 1),
+	    PERMUTE.coordinates([0.5, 0.5, 0.5, 0.5], 1),
+	    PERMUTE.coordinates([0, phiinv * 0.5, 0.5, phi * 0.5], 1, true),
+	    PERMUTE.coordinates([p8,  p8,  p8,  ip28], 0, true),
+	    PERMUTE.coordinates([ir8, ir8, ir8, r58], 0, true),
+	    PERMUTE.coordinates([ip8, ip8, ip8, p28], 0, true),
+	    PERMUTE.coordinates([0,   ip8, p8,  r58], 0, true),
+	    PERMUTE.coordinates([0,   ip28, ir8, p28], 0, true),
+	    PERMUTE.coordinates([ip8, ir8, p8, 2 * ir8], 0, true),
+	].flat();
+	index_nodes(nodes);
+	return nodes;
+}
 
 
-function label_nodes(nodes, ids, label) {
+
+export function label_nodes(nodes, ids, label) {
 	nodes.filter((n) => ids.includes(n.id)).map((n) => n.label = label);
 }
 
@@ -472,28 +503,48 @@ export const cell120_inscribed = () => {
 }
 
 
-
-export const cell120_inscribed_cell5 = () => {
-	const nodes  = make_120cell_vertices();
+export const cell120_alt = () => {
+	const nodes  = make_120cell_vertices_alt();
 	const links = auto_detect_edges(nodes, 4);
 
-  	for( const cstr in CELLINDEX.INDEX120 ) {
-		label_nodes(nodes, CELLINDEX.INDEX120[cstr], Number(cstr));
-	}
-
 	links.map((l) => l.label = 0);
 
-
-
-
 	return {
-		name: '120-cell-5-cell',
+		name: '120-cell-alt',
 		nodes: nodes,
 		links: links,
 		options: [
-		    { name: "5-cells", links: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ] },
-		],
-		description: `The 120-cell with one of its 5-cells.`,
+			{ name: "none", links: [ 0 ]},
+	],
+		description: `alt 120-cell`,
+	}
+}
+
+
+export const cell120_inscribed_cell5 = () => {
+	const nodes  = make_120cell_vertices();
+	const links = [];
+
+        const CELL5S = CELLINDEX.CELL120_CELL5.cell5s;
+
+        for( const c5 in CELL5S ) {
+            const nodes5 = nodes.filter((n) => CELL5S[c5].includes(n.id));
+            const links5 = auto_detect_edges(nodes5, 5);
+            links5.map((l) => l.label = Number(c5));
+            links.push(...links5);
+            nodes5.map((n) => n.label = Number(c5));
+        }
+
+        const show_links = Array.from({ length: 128 }, (_, i) => i);
+
+	return {
+		name: '120 5-cells',
+		nodes: nodes,
+		links: links,
+		options: [
+			{ name: "none", links: show_links},
+	        ],
+		description: `The 120 5-cells from the 120-cell, without the latter's links. This colouring is pretty arbitrary, being based on the algorithm which partitioned the nodes: a later version will have something that's based on the symmetries of the 600-cells which each of the 5-cells has its nodes in.`,
 	}
 }
 
@@ -522,8 +573,8 @@ export const cell120_inscribe_cell5_subset = () => {
             }
         }
 
-        // now add the links of the inscribed 600-cells which have the 
-        // node subset in them 
+        // now add the links of the inscribed 600-cells which have the
+        // node subset in them
 
         const link_subset = (l) => {
             const source = nodes_subset.filter((n) => n.id === l.source);
@@ -541,7 +592,6 @@ export const cell120_inscribe_cell5_subset = () => {
 	        }
 	    }
         }
-        console.log(link5s);
 
 	return {
 		name: '120-cell 5-cell subset',
@@ -550,7 +600,7 @@ export const cell120_inscribe_cell5_subset = () => {
 		options: [
 			{ name: "none", links: [ 0, 1, 2, 3, 4, 5, 8 ]},
 		],
-		description: `Showing the subset of 5-cells in one icosahedron`,
+		description: `Showing only thirteen of the inscribed 5-cells and the links between them on the inscribed 600-cells`,
 	}
 }
 
@@ -687,7 +737,12 @@ export const cell600_layered = () => {
 	const nodes  = make_600cell_vertices();
 	const links = auto_detect_edges(nodes, 12);
 
-	nodes.map((n) => n.label = 9); // make all invisible by default
+        const plabels = {};
+
+	nodes.map((n) => {
+            plabels[n.id] = n.label;
+    	    n.label = 9
+	}); // make all invisible by default
 
 	for (const cstr in CELLINDEX.LAYERS600 ) {
 		label_nodes(nodes, CELLINDEX.LAYERS600[cstr], Number(cstr));
@@ -702,6 +757,12 @@ export const cell600_layered = () => {
 		}
 	});
 
+	// recolour nodes according to 24-cell partition
+
+        nodes.map((n) => n.label = 8 + plabels[n.id]); 
+
+        const node_c = [ 8, 9, 10, 11, 12, 13, 14, 15 ];
+
 	const options = [];
 	const layers = [];
 
@@ -710,7 +771,7 @@ export const cell600_layered = () => {
 		options.push({
 			name: CELLINDEX.LAYER_NAMES[i],
 			links: [...layers],
-			nodes: [...layers]
+			nodes: [...node_c, ...layers]
 		})
 	}
 
@@ -969,7 +1030,6 @@ export const build_all = () => {
 		cell600_layered(),
 	 	cell120_inscribed(),
 	 	cell120_inscribed_cell5(),
-	 	cell120_inscribe_cell5_subset(),
 	 	cell120_layered()
 	 	];
 }

taperedLink.js

@@ -4,11 +4,11 @@ const EPSILON = 0.001;
 
 class TaperedLink extends THREE.Group {
 
-  constructor(baseMaterial, color_i, n1, n2, r1, r2) {
+  constructor(baseMaterial, colour_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.colour_i = colour_i;
     this.material = baseMaterial.clone();
     this.material.clippingPlanes = [ cplane ];
     this.object = new THREE.Mesh( geometry, this.material );
@@ -53,11 +53,12 @@ class TaperedLink extends THREE.Group {
       clipnorm, napex
     );
 
-   
+
     }  
 
-    set_color(colors) {
-        this.material.color = new THREE.Color(colors[this.color_i]);
+    set_colour(colours) {
+        console.log(`taperedLink.set_colour {this.colour_i} {colours[this.colour_i]}`);
+        this.material.color = new THREE.Color(colours[this.colour_i]);
     }
 
 }