Improved option defaults and URL params
parent
203850ba39
commit
42d1871a9e
15
gui.js
15
gui.js
|
@ -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
6
main.js
|
@ -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 );
|
||||||
|
|
Loading…
Reference in New Issue