diff --git a/fourDShape.js b/fourDShape.js index 32cfb78..ff7b660 100644 --- a/fourDShape.js +++ b/fourDShape.js @@ -20,6 +20,7 @@ class FourDShape extends THREE.Group { this.node_scale = 1; this.link_scale = 1; this.hyperplane = HYPERPLANE; + this.label_visible = () => true; this.initShapes(); } @@ -71,6 +72,9 @@ class FourDShape extends THREE.Group { link.object.position.copy(centre); link.object.lookAt(n2); link.object.children[0].rotation.x = Math.PI / 2.0; + const l1 = this.nodes3[link.source].label; + const l2 = this.nodes3[link.target].label; + link.object.visible = this.label_visible(l1) && this.label_visible(l2); } @@ -115,6 +119,7 @@ class FourDShape extends THREE.Group { const material = this.getMaterial(n, this.node_ms); this.nodes3[n.id] = { v3: v3, + label: n.label, object: this.makeNode(material, v3) }; } @@ -129,17 +134,19 @@ class FourDShape extends THREE.Group { } - render3(rotations) { + render3(rotations, visibility) { + this.label_visible = visibility; this.scalev3 = new THREE.Vector3(this.node_scale, this.node_scale, this.node_scale); for( const n of this.nodes4 ) { const v3 = this.fourDtoV3(n.x, n.y, n.z, n.w, rotations); this.nodes3[n.id].v3 = v3; this.nodes3[n.id].object.position.copy(v3); this.nodes3[n.id].object.scale.copy(this.scalev3); + this.nodes3[n.id].object.visible = this.label_visible(n.label); } for( const l of this.links ) { - this.updateLink(l); + this.updateLink(l, visibility); } for( const f of this.faces ) { @@ -147,7 +154,6 @@ class FourDShape extends THREE.Group { } } - } export { FourDShape }; diff --git a/gui.js b/gui.js index 68e625b..e2419c5 100644 --- a/gui.js +++ b/gui.js @@ -8,6 +8,7 @@ const DEFAULTS = { linkopacity: 0.5, link2opacity: 0.5, shape: '120-cell', + visibility: 5, inscribed: false, inscribe_all: false, color: 0x3293a9, @@ -22,7 +23,7 @@ const DEFAULTS = { class FourDGUI { - constructor(changeShape, setColor, setBackground, setLinkOpacity) { + constructor(changeShape, setColor, setBackground, setLinkOpacity, setVisibility) { this.gui = new GUI(); this.parseLinkParams(); const guiObj = this; @@ -34,6 +35,7 @@ class FourDGUI { linkopacity: this.link['linkopacity'], link2opacity: this.link['linkopacity'], nodesize: this.link['nodesize'], + depth: this.link['depth'], color: this.link['color'], background: this.link['background'], hyperplane: this.link['hyperplane'], @@ -60,6 +62,7 @@ class FourDGUI { (v) => setLinkOpacity(v, false) ); this.gui.add(this.params, 'nodesize', 0.1, 4); + this.gui.add(this.params, 'visibility', [ 0, 1, 2, 3, 4, 5 ]).onChange((v) => setVisibility(v)); this.gui.addColor(this.params, 'color').onChange(setColor); this.gui.addColor(this.params, 'background').onChange(setBackground); this.gui.add(this.params, 'rotation', [ 'rigid', 'tumbling', 'inside-out', 'axisymmetrical' ]); @@ -96,7 +99,7 @@ class FourDGUI { const guiObj = this; this.urlParams = this.linkUrl.searchParams; - for( const param of [ "shape", "rotation" ]) { + for( const param of [ "shape", "rotation", "visiblity" ]) { const value = this.urlParams.get(param); if( value ) { this.link[param] = value; diff --git a/main.js b/main.js index b0e2ed7..5ea95ff 100644 --- a/main.js +++ b/main.js @@ -61,6 +61,10 @@ for( const face_m of face_ms ) { face_m.opacity = FACE_OPACITY; } +// the best way to do this - +// each STRUCTURE should present a menu of OPTIONS which +// are say a set of inscribed shapes, or a subset etc +// ie 120-cell - inscribed, layers, hopf fibrations etc const STRUCTURES = { '5-cell': POLYTOPES.cell5(), @@ -144,13 +148,18 @@ function setLinkOpacity(o, primary) { } let gui; // +let visible_labels = 6; function changeShape() { - console.log("change shape!") createShape(gui.params.shape, gui.params.inscribed, gui.params.inscribe_all); } -gui = new FourDGUI(changeShape, setColors, setBackground, setLinkOpacity); +function setVisibility(v) { + console.log("setVisibility"); + visible_labels = v; +} + +gui = new FourDGUI(changeShape, setColors, setBackground, setLinkOpacity, setVisibility); // these are here to pick up colour settings from the URL params setColors(gui.params.color); @@ -212,7 +221,7 @@ function animate() { shape.hyperplane = gui.params.hyperplane; shape.link_scale = gui.params.thickness; shape.node_scale = gui.params.nodesize; - shape.render3(rotations); + shape.render3(rotations, (l) => l <= visible_labels); renderer.render( scene, camera ); }