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 };

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;

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