Refactored the gui defaults and added a 120-cell with one inscribed
600-cellexperiments-120-cell
Mike Lynch
parent
41d8f7ed92
commit
62ae3486d8
78
gui.js
78
gui.js
|
|
@ -1,41 +1,53 @@
|
|||
import { GUI } from 'lil-gui';
|
||||
|
||||
|
||||
const DEFAULT_SHAPE = '120-cell';
|
||||
const DEFAULT_COLOR = 0x3293a9;
|
||||
const DEFAULT_BG = 0x808080;
|
||||
|
||||
const DEFAULTS = {
|
||||
thickness: 0.25,
|
||||
nodesize: 1.25,
|
||||
linkopacity: 0.5,
|
||||
shape: '120-cell',
|
||||
color: 0x3293a9,
|
||||
background: 0xd4d4d4,
|
||||
hyperplane: 2,
|
||||
xRotate: 'YW',
|
||||
yRotate: 'XZ',
|
||||
dtheta: 0,
|
||||
dpsi: 0,
|
||||
}
|
||||
|
||||
|
||||
|
||||
class FourDGUI {
|
||||
|
||||
constructor(createShape, setColor, setBackground) {
|
||||
constructor(createShape, setColor, setBackground, setLinkOpacity) {
|
||||
this.gui = new GUI();
|
||||
this.parseLinkParams();
|
||||
const guiObj = this;
|
||||
console.log(this.link);
|
||||
this.params = {
|
||||
shape: this.link['shape'] || DEFAULT_SHAPE,
|
||||
thickness: this.link['thickness'] || 1,
|
||||
nodesize: this.link['nodesize'] || 2,
|
||||
color: this.link['color'] || DEFAULT_COLOR,
|
||||
background: this.link['background'] || DEFAULT_BG,
|
||||
hyperplane: this.link['hyperplane'] || 2,
|
||||
xRotate: this.link['xRotate'] || 'YW',
|
||||
yRotate: this.link['yRotate'] || 'XZ',
|
||||
shape: this.link['shape'],
|
||||
thickness: this.link['thickness'],
|
||||
linkopacity: this.link['linkopacity'],
|
||||
nodesize: this.link['nodesize'],
|
||||
color: this.link['color'],
|
||||
background: this.link['background'],
|
||||
hyperplane: this.link['hyperplane'],
|
||||
xRotate: this.link['xRotate'],
|
||||
yRotate: this.link['yRotate'],
|
||||
damping: false,
|
||||
dtheta: this.link['dtheta'] || 0,
|
||||
dpsi: this.link['dpsi'] || 0,
|
||||
dtheta: this.link['dtheta'],
|
||||
dpsi: this.link['dpsi'],
|
||||
"copy link": function () { guiObj.copyUrl() }
|
||||
};
|
||||
|
||||
this.gui.add(this.params, 'shape',
|
||||
[ '5-cell', '16-cell', 'tesseract', '24-cell', '600-cell', '120-cell' ]
|
||||
[ '5-cell', '16-cell', 'tesseract', '24-cell', '600-cell', '120-cell', '120-cell-inscribed' ]
|
||||
).onChange(createShape)
|
||||
|
||||
this.gui.add(this.params, 'hyperplane', 1.5, 3);
|
||||
this.gui.add(this.params, 'thickness', 0.1, 4);
|
||||
this.gui.add(this.params, 'nodesize', 0, 5);
|
||||
this.gui.add(this.params, 'hyperplane', 1.5, 2.25);
|
||||
this.gui.add(this.params, 'thickness', 0.1, 2);
|
||||
this.gui.add(this.params, 'linkopacity', 0, 1).onChange(setLinkOpacity);
|
||||
this.gui.add(this.params, 'nodesize', 0.1, 4);
|
||||
this.gui.addColor(this.params, 'color').onChange(setColor);
|
||||
this.gui.addColor(this.params, 'background').onChange(setBackground);
|
||||
this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
|
||||
|
|
@ -46,7 +58,7 @@ class FourDGUI {
|
|||
}
|
||||
|
||||
|
||||
numParam(param, parser, dft) {
|
||||
numParam(param, parser) {
|
||||
const value = this.urlParams.get(param);
|
||||
if( value ) {
|
||||
const n = parser(value);
|
||||
|
|
@ -54,7 +66,7 @@ class FourDGUI {
|
|||
return n;
|
||||
}
|
||||
}
|
||||
return dft;
|
||||
return DEFAULTS[param];
|
||||
}
|
||||
|
||||
stringToHex(cstr) {
|
||||
|
|
@ -76,21 +88,19 @@ class FourDGUI {
|
|||
const value = this.urlParams.get(param);
|
||||
if( value ) {
|
||||
this.link[param] = value;
|
||||
} else {
|
||||
this.link[param] = DEFAULTS[param];
|
||||
}
|
||||
}
|
||||
const guiObj = this;
|
||||
this.link['hyperplane'] = this.numParam('hyperplane', parseFloat, 2);
|
||||
this.link['thickness'] = this.numParam('thickness', parseFloat, 1);
|
||||
this.link['nodesize'] = this.numParam('nodesize', parseFloat, 1);
|
||||
this.link['color'] = this.numParam(
|
||||
'color', (s) => guiObj.stringToHex(s), DEFAULT_COLOR
|
||||
);
|
||||
this.link['background'] = this.numParam(
|
||||
'background', (s) => guiObj.stringToHex(s), DEFAULT_BG
|
||||
);
|
||||
|
||||
this.link['dpsi'] = this.numParam('dpsi', parseFloat, 0);
|
||||
this.link['dtheta'] = this.numParam('dtheta', parseFloat, 0);
|
||||
this.link['hyperplane'] = this.numParam('hyperplane', parseFloat);
|
||||
this.link['thickness'] = this.numParam('thickness', parseFloat);
|
||||
this.link['linkopacity'] = this.numParam('linkopacity', parseFloat);
|
||||
this.link['nodesize'] = this.numParam('nodesize', parseFloat);
|
||||
this.link['color'] = this.numParam('color', (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);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -151,4 +161,4 @@ class FourDGUI {
|
|||
}
|
||||
|
||||
|
||||
export { FourDGUI };
|
||||
export { FourDGUI, DEFAULTS };
|
||||
31
main.js
31
main.js
|
|
@ -4,7 +4,7 @@ import * as THREE from 'three';
|
|||
|
||||
import * as POLYTOPES from './polytopes.js';
|
||||
import { rotfn } from './rotation.js';
|
||||
import { FourDGUI } from './gui.js';
|
||||
import { FourDGUI, DEFAULTS } from './gui.js';
|
||||
import { FourDShape } from './fourDShape.js';
|
||||
import { get_colours } from './colours.js';
|
||||
|
||||
|
|
@ -31,9 +31,9 @@ document.body.appendChild( renderer.domElement );
|
|||
|
||||
// set up colours and materials for gui callbacks
|
||||
|
||||
scene.background = new THREE.Color(0x808080);
|
||||
const material = new THREE.MeshStandardMaterial({ color: 0x3293a9 });
|
||||
const node_colours = get_colours(0x3293a9);
|
||||
scene.background = new THREE.Color(DEFAULTS.background);
|
||||
const material = new THREE.MeshStandardMaterial({ color: DEFAULTS.color });
|
||||
const node_colours = get_colours(DEFAULTS.color);
|
||||
|
||||
|
||||
material.transparent = true;
|
||||
|
|
@ -41,13 +41,13 @@ material.opacity = 0.5;
|
|||
|
||||
|
||||
const node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
|
||||
const link_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
|
||||
|
||||
node_ms[0].transparent = true;
|
||||
node_ms[0].opacity = 0.0;
|
||||
|
||||
|
||||
const link_ms = [ material ];
|
||||
|
||||
link_ms.map((m) => {
|
||||
m.transparent = true;
|
||||
m.opacity = 0.5;
|
||||
}
|
||||
)
|
||||
|
||||
const face_ms = [
|
||||
new THREE.MeshLambertMaterial( { color: 0x44ff44 } )
|
||||
|
|
@ -65,6 +65,7 @@ const STRUCTURES = {
|
|||
'tesseract': POLYTOPES.tesseract(),
|
||||
'24-cell': POLYTOPES.cell24(),
|
||||
'120-cell': POLYTOPES.cell120(),
|
||||
'120-cell-inscribed': POLYTOPES.cell120_inscribed(),
|
||||
'600-cell': POLYTOPES.cell600()
|
||||
};
|
||||
|
||||
|
|
@ -87,6 +88,7 @@ function setColors(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]);
|
||||
}
|
||||
material.color = new THREE.Color(c);
|
||||
}
|
||||
|
|
@ -95,8 +97,13 @@ function setBackground(c) {
|
|||
scene.background = new THREE.Color(c)
|
||||
}
|
||||
|
||||
function setLinkOpacity(o) {
|
||||
for( const lm of link_ms ) {
|
||||
lm.opacity = o;
|
||||
}
|
||||
}
|
||||
|
||||
const gui = new FourDGUI(createShape, setColors, setBackground);
|
||||
const gui = new FourDGUI(createShape, setColors, setBackground, setLinkOpacity);
|
||||
|
||||
// these are here to pick up colour settings from the URL params
|
||||
setColors(gui.params.color);
|
||||
|
|
@ -159,7 +166,7 @@ function animate() {
|
|||
];
|
||||
shape.hyperplane = gui.params.hyperplane;
|
||||
shape.link_scale = gui.params.thickness;
|
||||
shape.node_scale = gui.params.thickness * (gui.params.nodesize + 1);
|
||||
shape.node_scale = gui.params.nodesize;
|
||||
shape.render3(rotations);
|
||||
|
||||
renderer.render( scene, camera );
|
||||
|
|
|
|||
40
polytopes.js
40
polytopes.js
|
|
@ -320,18 +320,6 @@ function basic_auto_label_120cell(nodes, links) {
|
|||
}
|
||||
}
|
||||
|
||||
// label_faces_120cell(nodes, faces, [
|
||||
// 1, 2, 4, 169, 626,
|
||||
// 145, 149, 553, 173, 171,
|
||||
// 147, 554
|
||||
// ], 2);
|
||||
|
||||
// label_faces_120cell(nodes, faces, [
|
||||
// 1, 5, 3, 193, 641,
|
||||
// 217, 221, 565, 197, 195,
|
||||
// 219, 566
|
||||
// ], 3);
|
||||
|
||||
}
|
||||
|
||||
function label_120cell(nodes) {
|
||||
|
|
@ -368,6 +356,34 @@ export const cell120 = () => {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
export const cell120_inscribed = () => {
|
||||
const nodes = make_120cell_vertices();
|
||||
const links = auto_detect_edges(nodes, 4);
|
||||
|
||||
label_120cell(nodes);
|
||||
|
||||
const all_links = links;
|
||||
all_links.map((l) => l.label = 0);
|
||||
|
||||
for( const p of [ 5 ]) {
|
||||
const nodes600 = nodes.filter((n) => n.label === p);
|
||||
const links600 = auto_detect_edges(nodes600, 12);
|
||||
links600.map((l) => l.label = p);
|
||||
all_links.push(...links600);
|
||||
}
|
||||
|
||||
return {
|
||||
nodes: nodes,
|
||||
links: all_links,
|
||||
geometry: {
|
||||
node_size: 0.02,
|
||||
link_size: 0.02
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Schoute's partition via https://arxiv.org/abs/1010.4353
|
||||
|
||||
const partition600 = {
|
||||
|
|
|
|||
21
testbed.js
21
testbed.js
|
|
@ -896,17 +896,36 @@ function meridian_label_120cell(nodes) {
|
|||
}
|
||||
|
||||
|
||||
function check_120cell_nodes(nodes) {
|
||||
nodes.map((n) => {
|
||||
const vs = find_adjacent_labels(nodes, links, n.id);
|
||||
vs.push(n.label);
|
||||
console.log(`Node ${n.id} and neighbours ${vs}`);
|
||||
const fp = vs.sort().join(',');
|
||||
if( fp !== "1,2,3,4,5" ) {
|
||||
console.log(`Label error ${n.id} ${fp}`)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const nodes = make_120cell_vertices();
|
||||
const links = auto_detect_edges(nodes, 4);
|
||||
const faces = auto_120cell_faces(links);
|
||||
|
||||
|
||||
console.log("Calculating 120-cell colours")
|
||||
|
||||
const a2 = arctic_two(nodes, links, faces, faces[0], 341)
|
||||
|
||||
console.log(`got ${a2.dodecahedra.length}`);
|
||||
|
||||
console.log(JSON.stringify(a2.labels));
|
||||
const labels = a2.labels;
|
||||
|
||||
console.log("labelling nodes");
|
||||
for( const cstr in labels ) {
|
||||
label_nodes(nodes, labels[cstr], Number(cstr));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue