Fixed bug in colour picker

gui.js

@@ -12,7 +12,7 @@ const DEFAULTS = {
 	visibility: 5,
 	inscribed: false,
 	inscribe_all: false,
-	color: 0x3293a9,
+	colour: 0x3293a9,
 	background: 0xd4d4d4,
 	hyperplane: 0.93,
 	zoom: 1,
@@ -46,7 +46,7 @@ class FourDGUI {
 			nodesize: this.link['nodesize'],
 			nodeopacity: this.link['nodeopacity'],
 			depth: this.link['depth'],
-			color: this.link['color'],
+			colour: this.link['colour'],
 			background: this.link['background'],
 			hyperplane: this.link['hyperplane'],
 			zoom: this.link['zoom'],
@@ -60,8 +60,6 @@ class FourDGUI {
 		};
 		if( funcs.extras ) {
     		    for( const label in funcs.extras ) {
-    		        console.log(label);
-    		        console.log(funcs.extras[label]);
     		        this.params[label] = funcs.extras[label];
     		    }
 		}
@@ -83,10 +81,9 @@ class FourDGUI {
 		this.gui.add(this.params, 'nodesize', 0, 1.5);
 		this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(funcs.setNodeOpacity);
 		this.gui.add(this.params, 'linksize', 0, 2);
-		console.log(funcs.setLinkOpacity);
 		this.gui.add(this.params, 'linkopacity', 0, 1).onChange((v) => funcs.setLinkOpacity(v, true));
 		this.gui.add(this.params, 'link2opacity', 0, 1).onChange((v) => funcs.setLinkOpacity(v, false));
-		this.gui.addColor(this.params, 'color').onChange(funcs.setColor);
+		this.gui.addColor(this.params, 'colour').onChange(funcs.setColours);
 		this.gui.addColor(this.params, 'background').onChange(funcs.setBackground);
 		this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
 		this.gui.add(this.params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
@@ -155,7 +152,7 @@ class FourDGUI {
 		this.link['link2opacity'] = this.numParam('link2opacity', parseFloat);
 		this.link['nodesize'] = this.numParam('nodesize', parseFloat);
 		this.link['nodeopacity'] = this.numParam('nodeopacity', parseFloat);
-		this.link['color'] = this.numParam('color', (s) => guiObj.stringToHex(s));
+		this.link['colour'] = this.numParam('colour', (s) => guiObj.stringToHex(s));
 		this.link['background'] = this.numParam('background', (s) => guiObj.stringToHex(s));
 		this.link['dpsi'] = this.numParam('dpsi', parseFloat);
 		this.link['dtheta'] = this.numParam('dtheta', parseFloat);
@@ -172,7 +169,7 @@ class FourDGUI {
 		url.searchParams.append("nodesize", this.params.nodesize.toString());
 		url.searchParams.append("nodeopacity", this.params.nodesize.toString());
 		url.searchParams.append("linkopacity", this.params.nodeopacity.toString());
-		url.searchParams.append("color", this.hexToString(this.params.color));
+		url.searchParams.append("colour", this.hexToString(this.params.colour));
 		url.searchParams.append("background", this.hexToString(this.params.background));
 		url.searchParams.append("hyperplane", this.params.hyperplane.toString());
 		url.searchParams.append("zoom", this.params.zoom.toString());
@@ -190,7 +187,6 @@ class FourDGUI {
     		return;
   		}
   		navigator.clipboard.writeText(text).then(function() {
-    		console.log('Async: Copying to clipboard was successful!');
   		}, function(err) {
     	console.error('Async: Could not copy text: ', err);
   		});

main.js

@@ -60,7 +60,8 @@ document.body.appendChild( renderer.domElement );
 // set up colours and materials for gui callbacks
 
 scene.background = new THREE.Color(DEFAULTS.background);
-const node_colours = get_colours(DEFAULTS.color);
+const node_colours = get_colours(DEFAULTS.colour);
+
 
 const node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
 const link_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
@@ -77,7 +78,6 @@ link_ms.map((m) => {
 	}
 );
 
-console.log("link_ms", link_ms);
 
 
 const face_ms = [
@@ -155,7 +155,7 @@ relnotes.addEventListener('click', releaseNotes);
 // callbacks to do things which are triggered by controls: reset the shape,
 // change the colors.  Otherwise we just read stuff from gui.params.
 
-function setColors(c) {
+function setColours(c) {
     const nc = get_colours(c);
     for( let i = 0; i < node_ms.length; i++ ) {
     	node_ms[i].color = new THREE.Color(nc[i]);
@@ -163,7 +163,7 @@ function setColors(c) {
     }
     if( shape ) {
         // taperedLink.set_color updates according to the link index
-       shape.links.map((l) => l.object.set_color(nc));
+       shape.links.map((l) => l.object.set_colour(nc));
     }
 }
 
@@ -200,8 +200,6 @@ function changeShape() {
 }
 
 function setVisibility(option_name) {
-    console.log("setVisibility", option_name);
-    console.log(structure.options);
 	const option = structure.options.filter((o) => o.name === option_name);
 	if( option.length ) {
 		node_show = option[0].nodes;
@@ -216,7 +214,7 @@ gui = new FourDGUI(
     {
 	shapes: STRUCTURES,
 	changeShape: changeShape,
-	setColors: setColors,
+	setColours: setColours,
 	setBackground: setBackground,
 	setNodeOpacity: setNodeOpacity,
 	setLinkOpacity: setLinkOpacity,
@@ -226,7 +224,7 @@ gui = new FourDGUI(
 );
 
 // these are here to pick up colour settings from the URL params
-setColors(gui.params.color);
+setColours(gui.params.colour);
 setBackground(gui.params.background);
 
 const dragK = 0.005;

taperedLink.js

@@ -4,11 +4,11 @@ const EPSILON = 0.001;
 
 class TaperedLink extends THREE.Group {
 
-  constructor(baseMaterial, color_i, n1, n2, r1, r2) {
+  constructor(baseMaterial, colour_i, n1, n2, r1, r2) {
     super();
     const geometry = new THREE.ConeGeometry( 1, 1, 16, true );
     const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5);
-    this.color_i = color_i;
+    this.colour_i = colour_i;
     this.material = baseMaterial.clone();
     this.material.clippingPlanes = [ cplane ];
     this.object = new THREE.Mesh( geometry, this.material );
@@ -56,8 +56,9 @@ class TaperedLink extends THREE.Group {
 
     }  
 
-    set_color(colors) {
-        this.material.color = new THREE.Color(colors[this.color_i]);
+    set_colour(colours) {
+        console.log(`taperedLink.set_colour {this.colour_i} {colours[this.colour_i]}`);
+        this.material.color = new THREE.Color(colours[this.colour_i]);
     }
 
 }