diff --git a/CHANGELOG.md b/CHANGELOG.md index da9dd9a..269d538 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/colours.js b/colours.js index 7fda5d8..47c7542 100644 --- a/colours.js +++ b/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; } diff --git a/gui.js b/gui.js index 646dd5a..9baa3fe 100644 --- a/gui.js +++ b/gui.js @@ -12,7 +12,7 @@ const DEFAULTS = { 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); }); diff --git a/index.html b/index.html index 0460f61..b58cb6b 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@
-
release 1.1 | +
release 1.2 | by Mike Lynch | source
diff --git a/main.js b/main.js index ee7b5c9..e24abc2 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,15 @@ import * as THREE from 'three'; const RELEASE_NOTES = ` +

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.

+

v1.0 - 16/11/2025

It's been two years 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; diff --git a/polytopes.js b/polytopes.js index e121fd4..958d3c4 100644 --- a/polytopes.js +++ b/polytopes.js @@ -475,7 +475,7 @@ export const cell120_inscribed = () => { export const cell120_inscribed_cell5 = () => { const nodes = make_120cell_vertices(); - const links = auto_detect_edges(nodes, 4); + const links = []; for( const cstr in CELLINDEX.INDEX120 ) { label_nodes(nodes, CELLINDEX.INDEX120[cstr], Number(cstr)); @@ -483,17 +483,25 @@ export const cell120_inscribed_cell5 = () => { links.map((l) => l.label = 0); + 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); + } + const show_links = Array.from({ length: 128 }, (_, i) => i); return { - name: '120-cell-5-cell', + name: '120 5-cells', 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: 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.`, } } diff --git a/taperedLink.js b/taperedLink.js index 1e88975..737e5fb 100644 --- a/taperedLink.js +++ b/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]); } }