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

Improved option defaults and URL params

feature-120-cell-layers
Mike Lynch 2023-11-01 10:47:46 +11:00
parent 203850ba39
commit 42d1871a9e
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
gui.js
View File

@ -6,7 +6,8 @@ const DEFAULTS = {
nodesize: 1.25, nodesize: 1.25,
linkopacity: 0.5, linkopacity: 0.5,
link2opacity: 0.5, link2opacity: 0.5,
shape: '120-cell inscribed', shape: '',
option: '',
visibility: 5, visibility: 5,
inscribed: false, inscribed: false,
inscribe_all: false, inscribe_all: false,
@ -24,10 +25,16 @@ class FourDGUI {
constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) { constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) {
this.gui = new GUI(); this.gui = new GUI();
const SHAPE_NAMES = shapes.map((s) => s.name);
// set default shape + option from the first shape
DEFAULTS.shape = shapes[0].name;
DEFAULTS.option = shapes[0].options[0].name;
this.parseLinkParams(); this.parseLinkParams();
const guiObj = this; const guiObj = this;
this.params = { this.params = {
shape: this.link['shape'], shape: this.link['shape'],
option: this.link['option'],
inscribed: this.link['inscribed'], inscribed: this.link['inscribed'],
inscribe_all: this.link['inscribe_all'], inscribe_all: this.link['inscribe_all'],
thickness: this.link['thickness'], thickness: this.link['thickness'],
@ -44,7 +51,6 @@ class FourDGUI {
dpsi: this.link['dpsi'], dpsi: this.link['dpsi'],
"copy link": function () { guiObj.copyUrl() } "copy link": function () { guiObj.copyUrl() }
}; };
const SHAPE_NAMES = shapes.map((s) => s.name);
let options_ctrl; let options_ctrl;
this.gui.add(this.params, 'shape', SHAPE_NAMES).onChange((shape) => { this.gui.add(this.params, 'shape', SHAPE_NAMES).onChange((shape) => {
const options = this.getShapeOptions(shapes, shape); const options = this.getShapeOptions(shapes, shape);
@ -54,7 +60,7 @@ class FourDGUI {
changeShape(shape) changeShape(shape)
}); });
const options = this.getShapeOptions(shapes, this.params['shape']); const options = this.getShapeOptions(shapes, this.params['shape']);
options_ctrl = this.gui.add(this.params, 'options', options).onChange((option) => { options_ctrl = this.gui.add(this.params, 'option', options).onChange((option) => {
setVisibility(option) setVisibility(option)
}); });
this.gui.add(this.params, 'hyperplane', 1.5, 2.25); this.gui.add(this.params, 'hyperplane', 1.5, 2.25);
@ -111,7 +117,7 @@ class FourDGUI {
const guiObj = this; const guiObj = this;
this.urlParams = this.linkUrl.searchParams; this.urlParams = this.linkUrl.searchParams;
for( const param of [ "shape", "rotation", "visiblity" ]) { for( const param of [ "shape", "rotation", "option" ]) {
const value = this.urlParams.get(param); const value = this.urlParams.get(param);
if( value ) { if( value ) {
this.link[param] = value; this.link[param] = value;
@ -137,6 +143,7 @@ class FourDGUI {
copyUrl() { copyUrl() {
const url = new URL(this.linkUrl.origin + this.linkUrl.pathname); const url = new URL(this.linkUrl.origin + this.linkUrl.pathname);
url.searchParams.append("shape", this.params.shape); url.searchParams.append("shape", this.params.shape);
url.searchParams.append("option", this.params.option);
url.searchParams.append("inscribed", this.params.inscribed ? 'y': 'n'); url.searchParams.append("inscribed", this.params.inscribed ? 'y': 'n');
url.searchParams.append("inscribe_all", this.params.inscribe_all ? 'y': 'n'); url.searchParams.append("inscribe_all", this.params.inscribe_all ? 'y': 'n');
url.searchParams.append("thickness", this.params.thickness.toString()); url.searchParams.append("thickness", this.params.thickness.toString());

6
main.js
View File

@ -74,14 +74,14 @@ let node_show = [];
let link_show = []; let link_show = [];
function createShape(name) { function createShape(name, option) {
if( shape ) { if( shape ) {
scene.remove(shape); scene.remove(shape);
} }
structure = STRUCTURES_BY_NAME[name]; structure = STRUCTURES_BY_NAME[name];
shape = new FourDShape(node_ms, link_ms, face_ms, structure); shape = new FourDShape(node_ms, link_ms, face_ms, structure);
scene.add(shape); scene.add(shape);
setVisibility(structure.options[0].name); setVisibility(option ? option : structure.options[0].name);
} }
// initialise gui and read params from URL // initialise gui and read params from URL
@ -177,7 +177,7 @@ renderer.domElement.addEventListener("pointerup", (event) => {
dragging = false; dragging = false;
}) })
createShape(gui.params.shape); createShape(gui.params.shape, gui.params.option);
function animate() { function animate() {
requestAnimationFrame( animate ); requestAnimationFrame( animate );