More work

src/orbital-trails/app.js

@@ -14,18 +14,6 @@ const center = { x: canvas.width / 2, y: canvas.height /2 };
 console.log(center);
 
 function random(min, max) {
-    /*
-    if ( isArray( min ) ) {
-        return min[ ~~( M.random() * min.length ) ];
-    }
-    */
-
-    /*
-    if (!isNumber( max )) {
-        max = min || 1, min = 0;
-    }
-    */
-
     return min + Math.random() * ( max - min );
 }
 
@@ -41,6 +29,9 @@ const options = {
     scale: 1.0,
     radius: 300,
     fadeout: 10,
+    centerLight: true,
+    lightAlpha: 5,
+    perfectRed: false,
 };
 
 const Orb = function(x, y) {
@@ -64,38 +55,52 @@ Orb.prototype.update = function() {
     this.y = this.radius * Math.sin( this.angle );
 };
 
-Orb.prototype.render = function() {
+Orb.prototype.render = function(timestamp) {
     this.update();
 
-    //const radius = ( opt.jitterRadius === 0 ) ? this.radius : this.radius + random( -opt.jitterRadius, opt.jitterRadius );
-    //radius = ( opt.jitterRadius != 0 && radius < 0 ) ? 0.001 : radius;
     const radius = this.radius;
 
-    // perfect-red
-    const style = "hsl(0, 100%, 50%)";
-    //sketch.strokeStyle = 'hsla( ' + ( ( this.angle + 90 ) / ( PI / 180 ) + random( -opt.jitterHue, opt.jitterHue ) ) + ', 100%, 50%, ' + ( opt.orbitalAlpha / 100 ) + ' )';
+    // perfect-red = 0
+    const offset = timestamp / options.speed;
+    const hueAngle = (this.angle + 90) / (Math.PI / 180) + offset;
+    let style;
+    if (options.perfectRed) {
+        style = `hsl(0, 100%, 50%)`;
+    } else {
+        style = `hsl(${hueAngle}, 100%, 50%)`;
+    }
 
     ctx.strokeStyle = style;
+    ctx.lineWidth = this.size;
     ctx.beginPath();
-    ctx.arc(0, 0, radius, this.lastAngle, this.angle + 0.001, false);
+
+    const increment = 0.001;
+    let start;
+    let end;
+    if (options.speed >= 0) {
+        start = this.lastAngle;
+        end = this.angle + increment;
+    } else {
+        end = this.lastAngle;
+        start = this.angle + increment;
+    }
+    ctx.arc(0, 0, radius, start, end, false);
     ctx.stroke();
     ctx.closePath();
 
+    if (options.centerLight) {
 
-    /*
-    sketch.lineWidth = this.size;			
-    sketch.beginPath();
-    if(opt.speed >= 0){
-      sketch.arc( 0, 0, radius, this.lastAngle, this.angle + 0.001, false );
-    } else {
-      sketch.arc( 0, 0, radius, this.angle, this.lastAngle + 0.001, false );
-    };
-    sketch.stroke();
-    sketch.closePath();
-    */
+        const alpha = options.lightAlpha / 100;
+        const style = `hsla(${hueAngle}, 100%, 70%, ${alpha}`;
+        ctx.lineWidth = .5;
+        ctx.strokeStyle = style;
+        ctx.beginPath();
+        ctx.moveTo( 0, 0 );
+        ctx.lineTo( this.x, this.y );
+        ctx.stroke();
+    }
 };
 
-
 const createOrb = (x, y) => {
     console.log(`Creating orb ${x}, ${y}`);
     state.orbs.push(new Orb(x, y));
@@ -121,7 +126,6 @@ const clear = () => {
     ctx.globalCompositeOperation = 'lighter';
 }
 
-
 const controls = new dat.GUI( { autoPlace: false } )
 
 const container = document.querySelector("#controlPanel");
@@ -130,6 +134,9 @@ controls.add(state, "total" ).name( "Total Placed" ).listen();
 controls.add(options, "speed" ).min(-300).max(300).step(10).name("Speed");
 controls.add(options, "scale" ).min(0.5).max(5).step(0.1).name("Scale");
 controls.add(options, "fadeout").min(0).max(100).step(1).name("Fadeout (/100)");
+controls.add(options, "centerLight" ).name("Toggle Light");
+controls.add(options, "lightAlpha" ).min(0).max(100).step(1).name("Light Alpha");
+controls.add(options, "perfectRed").name("Perfect Red");
 
 container.appendChild(controls.domElement);
 
@@ -142,11 +149,10 @@ const loop = (timestamp) => {
     ctx.translate(center.x, center.y);
     ctx.scale(scale, scale);
     state.orbs.forEach((orb) => {
-        orb.render();
+        orb.render(timestamp);
     });
     ctx.restore();
 };
 
 setup();
 loop();
-