diff --git a/colours.js b/colours.js index 225a3b5..20513b5 100644 --- a/colours.js +++ b/colours.js @@ -1,14 +1,14 @@ import ColorScheme from 'color-scheme'; import Color from 'color'; -export const get_colours = (basis) => { - const colours = get_colours_spectrum(basis); - console.log(colours); +export const get_colours = (basis, n) => { + const colours = get_colours_spectrum(basis, n); return colours; } -const get_colours_tetrade = (basis) => { +const get_colours_tetrade = (basis, n) => { + // this always returns what the scheme has so it ignores n const basis_c = Color(basis); const hslb = basis_c.hsl(); const hue = hslb['color'][0]; @@ -25,16 +25,16 @@ const get_colours_tetrade = (basis) => { } -const get_colours_spectrum = (basis) => { +const get_colours_spectrum = (basis, n) => { + // this returns n colours evenly spaced by hue 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 SPECTRUM = 10; const hsl = []; - for( let i = 0; i < SPECTRUM; i++ ) { - const h = (hue + i * 360 / SPECTRUM) % 360; + for( let i = 0; i < n; i++ ) { + const h = (hue + i * 360 / n) % 360; hsl.push(Color.hsl(h, saturation, luminance)); } return hsl.map((hslc) => hslc.rgbNumber()); diff --git a/gui.js b/gui.js index c92b570..163ad42 100644 --- a/gui.js +++ b/gui.js @@ -13,6 +13,7 @@ const DEFAULTS = { inscribed: false, inscribe_all: false, colour: 0x3293a9, + colour_n: 5, background: 0xd4d4d4, hyperplane: 0.93, zoom: 1, diff --git a/main.js b/main.js index 054683a..215bde8 100644 --- a/main.js +++ b/main.js @@ -66,9 +66,20 @@ 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.colour); +const STRUCTURES = POLYTOPES.build_all(); + +const STRUCTURES_BY_NAME = {}; + +STRUCTURES.map((s) => STRUCTURES_BY_NAME[s.name] = s); + +const max_ms = Math.max(...STRUCTURES.map((s) => s.colour_n)); + +// make enough materials for the largest value of colour_n + +const node_colours = get_colours(DEFAULTS.colour, max_ms); + const node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c})); const link_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c})); @@ -91,17 +102,11 @@ const face_ms = [ ]; for( const face_m of face_ms ) { - face_m.transparent = true; + face_m.transparent = true; face_m.opacity = FACE_OPACITY; } -const STRUCTURES = POLYTOPES.build_all(); - -const STRUCTURES_BY_NAME = {}; - -STRUCTURES.map((s) => STRUCTURES_BY_NAME[s.name] = s); - let shape = false; let structure = false; let node_show = []; @@ -162,17 +167,20 @@ relnotes.addEventListener('click', releaseNotes); // change the colors. Otherwise we just read stuff from gui.params. 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]); - 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_colour(nc)); + if( structure ) { + const nc = get_colours(c, structure.colour_n); + 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_colour(nc)); + } } } + function setBackground(c) { scene.background = new THREE.Color(c) } diff --git a/polytopes.js b/polytopes.js index 1defa51..241cc30 100644 --- a/polytopes.js +++ b/polytopes.js @@ -819,10 +819,6 @@ 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 = []; @@ -831,7 +827,7 @@ export const cell600_layered = () => { options.push({ name: CELLINDEX.LAYER_NAMES[i], links: [...layers], - nodes: [...node_c, ...layers] + nodes: [...layers] }) } @@ -1075,7 +1071,7 @@ export const icosahedron = () => { export const build_all = () => { - return [ + const shapes = [ tetrahedron(), octahedron(), cube(), @@ -1092,13 +1088,17 @@ export const build_all = () => { cell120_inscribed_cell5(), cell120_layered() ]; + for( const shape of shapes ) { + shape.colour_n = count_labels(shape); + } + return shapes; } export const count_labels = (shape) => { const labels = {}; shape.nodes.map((n) => labels[n.label] = true); shape.links.map((n) => labels[n.label] = true); - return Object.keys(labels); + return Object.keys(labels).length; }; export const radii = (shape) => {