bombinans/fourdjs
1
1
Fork 0
Code Issues 9 Pull Requests Packages Projects Releases Wiki Activity

Refactored a bit so that I can inject functions into the gui

Browse Source
This commit is contained in:
Mike Lynch 2025-12-28 18:09:54 +11:00
parent 137f7db066
commit 0e1d8df7b5
4 changed files with 62 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
cellindex.js
View File

@ -104,16 +104,12 @@ export const LAYERS120 = {
163,219,271,223,167]
};
// just one for now
export const CELL120_CELL5 = {
"1": [ 1, 258, 304, 431, 510 ],
"2": [ 1, 260, 302, 427, 506 ],
"3": [1, 264, 298, 435, 514],
"4": [1, 330, 334, 387, 391],
"5": [1, 491, 503, 574, 578],
"6": [1, 495, 499, 570, 582 ],
};
"1": [ 258, 1, 510, 304, 431 ],
"2": [ 185, 93, 222, 295, 372 ],
}
// Schoute's partition via https://arxiv.org/abs/1010.4353

48
gui.js
View File

@ -28,9 +28,10 @@ const DEFAULTS = {
class FourDGUI {
constructor(shapes, changeShape, setColor, setBackground, setNodeOpacity,setLinkOpacity, setVisibility, showDocs) {
constructor(funcs) {
this.shapes = funcs.shapes;
this.gui = new GUI();
const SHAPE_NAMES = shapes.map((s) => s.name);
const SHAPE_NAMES = this.shapes.map((s) => s.name);
this.parseLinkParams();
const guiObj = this;
@ -55,41 +56,52 @@ class FourDGUI {
captions: true,
dtheta: this.link['dtheta'],
dpsi: this.link['dpsi'],
"copy link": function () { guiObj.copyUrl() }
"copy link": function () { guiObj.copyUrl() },
};
if( funcs.extras ) {
for( const label in funcs.extras ) {
console.log(label);
console.log(funcs.extras[label]);
this.params[label] = funcs.extras[label];
}
}
let options_ctrl;
this.gui.add(this.params, 'shape', SHAPE_NAMES).onChange((shape) => {
const options = this.getShapeOptions(shapes, shape);
const options = this.getShapeOptions(shape);
options_ctrl = options_ctrl.options(options).onChange((option) => {
setVisibility(option)
funcs.setVisibility(option)
});
options_ctrl.setValue(options[0])
changeShape(shape)
funcs.changeShape(shape)
});
const options = this.getShapeOptions(shapes, this.params['shape']);
const options = this.getShapeOptions(this.params['shape']);
options_ctrl = this.gui.add(this.params, 'option').options(options).onChange((option) => {
setVisibility(option)
funcs.setVisibility(option)
});
this.gui.add(this.params, 'hyperplane', 0.5, 1 / 0.8);
this.gui.add(this.params, 'zoom', 0.1, 2.0);
this.gui.add(this.params, 'nodesize', 0, 1.5);
this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(setNodeOpacity);
this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(funcs.setNodeOpacity);
this.gui.add(this.params, 'linksize', 0, 2);
console.log(setLinkOpacity);
this.gui.add(this.params, 'linkopacity', 0, 1).onChange((v) => setLinkOpacity(v, true));
this.gui.add(this.params, 'link2opacity', 0, 1).onChange((v) => setLinkOpacity(v, false));
this.gui.addColor(this.params, 'color').onChange(setColor);
this.gui.addColor(this.params, 'background').onChange(setBackground);
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, 'background').onChange(funcs.setBackground);
this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
this.gui.add(this.params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
this.gui.add(this.params, 'captions').onChange(showDocs);
this.gui.add(this.params, 'captions').onChange(this.showDocs);
this.gui.add(this.params, 'damping');
this.gui.add(this.params, 'copy link');
if( funcs.extras ) {
for( const label in funcs.extras ) {
this.gui.add(this.params, label);
}
}
}
getShapeOptions(shapes, shape) {
const spec = shapes.filter((s) => s.name === shape);
getShapeOptions(shape) {
const spec = this.shapes.filter((s) => s.name === shape);
if( spec && spec[0].options ) {
return spec[0].options.map((o) => o.name);
} else {

22
main.js
View File

@ -200,14 +200,20 @@ function setVisibility(option_name) {
gui = new FourDGUI(
STRUCTURES,
changeShape,
setColors,
setBackground,
setNodeOpacity,
setLinkOpacity,
setVisibility,
showDocs
{
shapes: STRUCTURES,
changeShape: changeShape,
setColors: setColors,
setBackground: setBackground,
setNodeOpacity: setNodeOpacity,
setLinkOpacity: setLinkOpacity,
setVisibility: setVisibility,
showDocs: showDocs,
extras: {
"Show an alert": function() { alert("hi there") },
"Show a different one": function() { alert('yowza')},
},
}
);
// these are here to pick up colour settings from the URL params

19
polytopes.js
View File

@ -463,19 +463,27 @@ export const cell120_inscribed = () => {
export const cell120_inscribed_cell5 = () => {
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 links = [];
for( const p of [ 1, 2 ]) {
const nodes600 = nodes.filter((n) => n.label === p);
const links600 = auto_detect_edges(nodes600, 12);
links600.map((l) => l.label = p);
links.push(...links600);
}
for( const c5 in CELLINDEX.CELL120_CELL5 ) {
const nodes5 = nodes.filter((n) => CELLINDEX.CELL120_CELL5[c5].includes(n.id));
console.log(`node5 = ${nodes5}`);
const links5 = auto_detect_edges(nodes5, 4);
links5.map((l) => l.label = c5);
links5.map((l) => l.label = 0);
links.push(...links5);
}
@ -484,8 +492,7 @@ export const cell120_inscribed_cell5 = () => {
nodes: nodes,
links: links,
options: [
{ name: "none", links: [ 0 ]},
{ name: "one inscribed 5-cell", links: [ 0, 1 ] },
{ name: "5-cells", links: [ 0, 1, 2, 3, 4, 5, 6 ] },
],
description: `The 120-cell with one of its 5-cells.`,
}