feat: added node color by weight

web/lib/helpers.js

@@ -0,0 +1,18 @@
+export function floatToHex(value) {
+	// courtesy of GPT :3
+	// Ensure the input value is within the valid range [0, 1]
+	value = Math.min(1, Math.max(0, value));
+
+	// Interpolate between white (#FFFFFF) and black (#000000)
+	var red = Math.round((1 - value) * 255);
+	var green = Math.round((1 - value) * 255);
+	var blue = Math.round((1 - value) * 255);
+
+	// Convert RGB values to hexadecimal format
+	var redHex = red.toString(16).padStart(2, '0');
+	var greenHex = green.toString(16).padStart(2, '0');
+	var blueHex = blue.toString(16).padStart(2, '0');
+
+	// Return the color as a hexadecimal string
+	return '#' + redHex + greenHex + blueHex;
+}

web/lib/node.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-
+import { floatToHex }  from './helpers.js';
 // Define loader and sprite
 const loader = new THREE.TextureLoader()
 const sprite = loader.load('/weight.png')
@@ -12,14 +12,13 @@ export class Node {
     - edges, how will we handle?
     */
     constructor(x,y,z,size) {
-
-        const material = new THREE.SpriteMaterial( { map: sprite, color: 0xffffff } );
-	this.weight = Math.random();
 	this.id = "id" + Math.random().toString(16).slice(2)
+	this.weight = Math.random();
+	console.log(this.weight);
+
+	const material = new THREE.SpriteMaterial( { map: sprite, color: floatToHex(this.weight) } );
         this.sprite = new THREE.Sprite( material );
         this.sprite.scale.set(size, size, size);
 	this.sprite.position.set(x,y,z);
     }
 }
-
-// scene.add( sprite );

web/main.js

@@ -1,7 +1,6 @@
 import './style.css'
 import * as THREE from 'three';
 import { Layer } from './lib/layer.js';
-
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 
 const scene = new THREE.Scene();
@@ -14,15 +13,14 @@ const renderer = new THREE.WebGLRenderer({
 	canvas: document.querySelector('#bg')
 });
 
-renderer.setPixelRatio( window.devicePixelRatio );
-renderer.setSize( window.innerWidth, window.innerHeight );
-
 const sizes = {
     width: window.innerWidth,
     height: window.innerHeight
 }
-camera.position.setZ(30); // move back
 
+renderer.setPixelRatio( window.devicePixelRatio );
+renderer.setSize( window.innerWidth, window.innerHeight );
+camera.position.setZ(30); // move back, hardcoded so please remove
 renderer.render(scene,camera)
 
 // Example usage