Compare commits
3 Commits
92c0fa6c27
...
5458b2c6a6
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
5458b2c6a6 | ||
|
|
b07b8d4a5b | ||
|
|
f40d182192 |
23
TODO.md
23
TODO.md
@ -1,24 +1,13 @@
|
|||||||
# FOURD-JS
|
# FOURD-JS
|
||||||
|
|
||||||
To-do:
|
## 120-cell 5-cell
|
||||||
|
|
||||||
* render a basic wireframe (vertices and edges)
|
We can label the 5-cells by using the 600-cell layers - might be more interesting
|
||||||
|
|
||||||
- cylinder and spheres
|
Try colouring the nodes according to the 120-cell standard way and the links
|
||||||
- group these
|
in a different set of 5 colours by the new mapping
|
||||||
|
|
||||||
-- DONE
|
For a subset of 24 5-cells, the vertices seem to be grouped in clusters on the 120-cells - each cluster has one of each of the 5 labels from the 120 cell
|
||||||
|
|
||||||
|
Write a script which checks this for each set
|
||||||
|
|
||||||
* algorithm for 4d -> 3d transform
|
|
||||||
|
|
||||||
--DONE
|
|
||||||
|
|
||||||
* 4D shape -> 3D projection -> wireframe -> three.js
|
|
||||||
|
|
||||||
--DONE
|
|
||||||
|
|
||||||
Next:
|
|
||||||
|
|
||||||
how to do this efficiently so that we can rotate the shape in 4d and have
|
|
||||||
this animate in 3d?
|
|
||||||
25
colours.js
25
colours.js
@ -2,6 +2,13 @@ import ColorScheme from 'color-scheme';
|
|||||||
import Color from 'color';
|
import Color from 'color';
|
||||||
|
|
||||||
export const get_colours = (basis) => {
|
export const get_colours = (basis) => {
|
||||||
|
const colours = get_colours_spectrum(basis);
|
||||||
|
console.log(colours);
|
||||||
|
return colours;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const get_colours_tetrade = (basis) => {
|
||||||
const basis_c = Color(basis);
|
const basis_c = Color(basis);
|
||||||
const hslb = basis_c.hsl();
|
const hslb = basis_c.hsl();
|
||||||
const hue = hslb['color'][0];
|
const hue = hslb['color'][0];
|
||||||
@ -10,13 +17,29 @@ export const get_colours = (basis) => {
|
|||||||
const scheme = new ColorScheme;
|
const scheme = new ColorScheme;
|
||||||
scheme.from_hue(hue).scheme("tetrade").distance(0.75);
|
scheme.from_hue(hue).scheme("tetrade").distance(0.75);
|
||||||
const colours = scheme.colors();
|
const colours = scheme.colors();
|
||||||
colours.reverse();
|
//colours.reverse();
|
||||||
const hsl = colours.map((c) => Color("#" + c).hsl());
|
const hsl = colours.map((c) => Color("#" + c).hsl());
|
||||||
const resaturated = hsl.map((hslc) => hslc.saturationl(saturation).rgbNumber());
|
const resaturated = hsl.map((hslc) => hslc.saturationl(saturation).rgbNumber());
|
||||||
resaturated.unshift(basis);
|
resaturated.unshift(basis);
|
||||||
return resaturated;
|
return resaturated;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const get_colours_spectrum = (basis) => {
|
||||||
|
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;
|
||||||
|
hsl.push(Color.hsl(h, saturation, luminance));
|
||||||
|
}
|
||||||
|
return hsl.map((hslc) => hslc.rgbNumber());
|
||||||
|
}
|
||||||
|
|
||||||
// basic colours where 0 = blue
|
// basic colours where 0 = blue
|
||||||
// 1 - dark blue
|
// 1 - dark blue
|
||||||
// 2 - white
|
// 2 - white
|
||||||
|
|||||||
78
polytopes.js
78
polytopes.js
@ -89,16 +89,16 @@ export const cell5 = () => {
|
|||||||
{id:5, label: 5, x: 0, y: 0, z: 0, w: 1 },
|
{id:5, label: 5, x: 0, y: 0, z: 0, w: 1 },
|
||||||
],
|
],
|
||||||
links: [
|
links: [
|
||||||
{ id:1, source:1, target: 2},
|
{ id:1, source:1, target: 2, label:0},
|
||||||
{ id:2, source:1, target: 3},
|
{ id:2, source:1, target: 3, label:0},
|
||||||
{ id:3, source:1, target: 4},
|
{ id:3, source:1, target: 4, label:0},
|
||||||
{ id:4, source:1, target: 5},
|
{ id:4, source:1, target: 5, label:0},
|
||||||
{ id:5, source:2, target: 3},
|
{ id:5, source:2, target: 3, label:0},
|
||||||
{ id:6, source:2, target: 4},
|
{ id:6, source:2, target: 4, label:0},
|
||||||
{ id:7, source:2, target: 5},
|
{ id:7, source:2, target: 5, label:0},
|
||||||
{ id:8, source:3, target: 4},
|
{ id:8, source:3, target: 4, label:0},
|
||||||
{ id:9, source:3, target: 5},
|
{ id:9, source:3, target: 5, label:0},
|
||||||
{ id:10, source:4, target: 5},
|
{ id:10, source:4, target: 5, label:0},
|
||||||
],
|
],
|
||||||
options: [ { name: '--' }],
|
options: [ { name: '--' }],
|
||||||
description: `Five tetrahedra joined at ten faces with three
|
description: `Five tetrahedra joined at ten faces with three
|
||||||
@ -126,6 +126,7 @@ export const cell16 = () => {
|
|||||||
index_nodes(nodes);
|
index_nodes(nodes);
|
||||||
scale_nodes(nodes, 0.5);
|
scale_nodes(nodes, 0.5);
|
||||||
const links = auto_detect_edges(nodes, 6);
|
const links = auto_detect_edges(nodes, 6);
|
||||||
|
links.map((l) => l.label = 0);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name: '16-cell',
|
name: '16-cell',
|
||||||
@ -513,29 +514,41 @@ export const cell120_inscribed_cell5 = () => {
|
|||||||
const nodes = make_120cell_vertices();
|
const nodes = make_120cell_vertices();
|
||||||
const links = auto_detect_edges(nodes, 4);
|
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);
|
links.map((l) => l.label = 0);
|
||||||
|
|
||||||
const CELL5S = CELLINDEX.CELL120_CELL5;
|
const CELL5S = CELLINDEX.CELL120_CELL5;
|
||||||
|
|
||||||
|
const nodesc5s = [];
|
||||||
|
const linksc5s = [];
|
||||||
|
const nids = [];
|
||||||
|
|
||||||
for( const c5 in CELL5S ) {
|
for( const c5 in CELL5S ) {
|
||||||
const nodes5 = nodes.filter((n) => CELL5S[c5].nodes.includes(n.id));
|
if( CELL5S[c5].label === 3 ) {
|
||||||
const links5 = auto_detect_edges(nodes5, 5);
|
const nodes5 = nodes.filter((n) => CELL5S[c5].nodes.includes(n.id));
|
||||||
links5.map((l) => l.label = CELL5S[c5].label);
|
const links5 = auto_detect_edges(nodes5, 5);
|
||||||
links.push(...links5);
|
links5.map((l) => l.label = CELL5S[c5].label);
|
||||||
nodes5.map((n) => n.label = CELL5S[c5].label);
|
linksc5s.push(...links5);
|
||||||
|
nodesc5s.push(...nodes5);
|
||||||
|
nids.push(...nodes5.map((n) => n.id));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
const links120 = links.filter((l) => nids.includes(l.source) && nids.includes(l.target));
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name: '120-cell with 5-cells',
|
name: '120-cell with 5-cells',
|
||||||
nodes: nodes,
|
nodes: nodesc5s,
|
||||||
links: links,
|
links: [...linksc5s, ...links120],
|
||||||
options: [
|
options: [
|
||||||
{ name: "all", links: [0, 1, 2, 3, 4, 5] },
|
// { name: "all", links: [0, 1, 2, 3, 4, 5] },
|
||||||
{ name: "24", links: [0, 1 ] },
|
{ name: "24", links: [0, 3 ] },
|
||||||
{ name: "48", links: [0, 1, 2 ] },
|
// { name: "48", links: [0, 1, 2 ] },
|
||||||
{ name: "72", links: [0, 1, 2, 3 ] },
|
// { name: "72", links: [0, 1, 2, 3 ] },
|
||||||
{ name: "96", links: [0, 1, 2, 3, 4 ] },
|
{ name: "96", links: [0, 1, 2, 3, 4 ] },
|
||||||
{ name: "hide 1200-cell", links: [ 1, 2, 3, 4, 5 ] },
|
// { name: "hide 1200-cell", links: [ 1, 2, 3, 4, 5 ] },
|
||||||
],
|
],
|
||||||
description: `The vertices of the 120-cell can also be partitioned
|
description: `The vertices of the 120-cell can also be partitioned
|
||||||
into 120 5-cells: each 5-cell has one vertex in each of the five
|
into 120 5-cells: each 5-cell has one vertex in each of the five
|
||||||
@ -946,12 +959,12 @@ export const tetrahedron = () => {
|
|||||||
{id:4, label: 4, x: 0, y: 0, z: 1, w: 0 },
|
{id:4, label: 4, x: 0, y: 0, z: 1, w: 0 },
|
||||||
],
|
],
|
||||||
links: [
|
links: [
|
||||||
{ id:1, source:1, target: 2},
|
{ id:1, source:1, target: 2, label: 0},
|
||||||
{ id:2, source:1, target: 3},
|
{ id:2, source:1, target: 3, label: 0},
|
||||||
{ id:3, source:1, target: 4},
|
{ id:3, source:1, target: 4, label: 0},
|
||||||
{ id:4, source:2, target: 3},
|
{ id:4, source:2, target: 3, label: 0},
|
||||||
{ id:5, source:2, target: 4},
|
{ id:5, source:2, target: 4, label: 0},
|
||||||
{ id:6, source:3, target: 4},
|
{ id:6, source:3, target: 4, label: 0},
|
||||||
],
|
],
|
||||||
options: [ { name: '--' }],
|
options: [ { name: '--' }],
|
||||||
description: `The simplest three-dimensional polytope, consisting of four triangles joined at six edges. The 5-cell is its four-dimensional analogue.`,
|
description: `The simplest three-dimensional polytope, consisting of four triangles joined at six edges. The 5-cell is its four-dimensional analogue.`,
|
||||||
@ -1081,6 +1094,15 @@ export const build_all = () => {
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
};
|
||||||
|
|
||||||
export const radii = (shape) => {
|
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))
|
return shape.nodes.map(n => Math.sqrt(n.x * n.x + n.y * n.y + n.z * n.z + n.w * n.w))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -57,7 +57,6 @@ class TaperedLink extends THREE.Group {
|
|||||||
}
|
}
|
||||||
|
|
||||||
set_colour(colours) {
|
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]);
|
this.material.color = new THREE.Color(colours[this.colour_i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user