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

15
gui.js
View File

@ -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());

View File

@ -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 );