Added new rainbow colour scheme

This commit is contained in:
Mike Lynch 2026-02-11 11:56:48 +11:00
parent 5458b2c6a6
commit 9ade532860
4 changed files with 40 additions and 31 deletions

View File

@ -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());

1
gui.js
View File

@ -13,6 +13,7 @@ const DEFAULTS = {
inscribed: false,
inscribe_all: false,
colour: 0x3293a9,
colour_n: 5,
background: 0xd4d4d4,
hyperplane: 0.93,
zoom: 1,

24
main.js
View File

@ -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}));
@ -96,12 +107,6 @@ for( const face_m of face_ms ) {
}
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,7 +167,8 @@ relnotes.addEventListener('click', releaseNotes);
// change the colors. Otherwise we just read stuff from gui.params.
function setColours(c) {
const nc = get_colours(c);
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]);
@ -172,6 +178,8 @@ function setColours(c) {
shape.links.map((l) => l.object.set_colour(nc));
}
}
}
function setBackground(c) {
scene.background = new THREE.Color(c)

View File

@ -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) => {