diff --git a/gui.js b/gui.js index 0b39e49..d3a045d 100644 --- a/gui.js +++ b/gui.js @@ -6,7 +6,8 @@ const DEFAULTS = { nodesize: 1.25, linkopacity: 0.5, link2opacity: 0.5, - shape: '120-cell inscribed', + shape: '', + option: '', visibility: 5, inscribed: false, inscribe_all: false, @@ -24,10 +25,16 @@ class FourDGUI { constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) { 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(); const guiObj = this; this.params = { shape: this.link['shape'], + option: this.link['option'], inscribed: this.link['inscribed'], inscribe_all: this.link['inscribe_all'], thickness: this.link['thickness'], @@ -44,7 +51,6 @@ class FourDGUI { dpsi: this.link['dpsi'], "copy link": function () { guiObj.copyUrl() } }; - const SHAPE_NAMES = shapes.map((s) => s.name); let options_ctrl; this.gui.add(this.params, 'shape', SHAPE_NAMES).onChange((shape) => { const options = this.getShapeOptions(shapes, shape); @@ -54,7 +60,7 @@ class FourDGUI { changeShape(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) }); this.gui.add(this.params, 'hyperplane', 1.5, 2.25); @@ -111,7 +117,7 @@ class FourDGUI { const guiObj = this; 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); if( value ) { this.link[param] = value; @@ -137,6 +143,7 @@ class FourDGUI { copyUrl() { const url = new URL(this.linkUrl.origin + this.linkUrl.pathname); 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("inscribe_all", this.params.inscribe_all ? 'y': 'n'); url.searchParams.append("thickness", this.params.thickness.toString()); diff --git a/main.js b/main.js index e23521e..b9dc28e 100644 --- a/main.js +++ b/main.js @@ -74,14 +74,14 @@ let node_show = []; let link_show = []; -function createShape(name) { +function createShape(name, option) { if( shape ) { scene.remove(shape); } structure = STRUCTURES_BY_NAME[name]; shape = new FourDShape(node_ms, link_ms, face_ms, structure); scene.add(shape); - setVisibility(structure.options[0].name); + setVisibility(option ? option : structure.options[0].name); } // initialise gui and read params from URL @@ -177,7 +177,7 @@ renderer.domElement.addEventListener("pointerup", (event) => { dragging = false; }) -createShape(gui.params.shape); +createShape(gui.params.shape, gui.params.option); function animate() { requestAnimationFrame( animate );