Various improvements

justfile

@@ -2,4 +2,4 @@ _default:
     just --list
 
 parcel:
-    pnpm exec parcel src/index.html --no-cache --trace
+    pnpm exec parcel src/index.html --no-cache

src/orbital-trails/app.js

@@ -39,6 +39,8 @@ const state = {
 const options = {
     speed: 65,
     scale: 1.0,
+    radius: 300,
+    fadeout: 10,
 };
 
 const Orb = function(x, y) {
@@ -46,14 +48,12 @@ const Orb = function(x, y) {
     const dx = ( x / scale ) - ( center.x / scale );
     const dy = ( y / scale ) - ( center.y / scale );
 
-    this.angle = Math.atan2(dy, dx);
+    const initialAngle = Math.atan2(dy, dx); 
-    this.lastAngle = this.angle;
+    this.angle = initialAngle;
+    this.lastAngle = initialAngle;
     this.radius = Math.sqrt(dx * dx + dy * dy);
-    //console.log(this.radius);
-
     this.size = ( this.radius / 300 ) + 1;
     this.speed = ( random(1, 10) / 300000 ) * ( this.radius ) + 0.015;
-
 };
 
 Orb.prototype.update = function() {
@@ -65,16 +65,17 @@ Orb.prototype.update = function() {
 };
 
 Orb.prototype.render = function() {
-    //console.log("Rendering orb");
-
     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 ) + ' )';
-    ctx.strokeStyle = "hsl(0, 100%, 50%)";
+
+    ctx.strokeStyle = style;
     ctx.beginPath();
     ctx.arc(0, 0, radius, this.lastAngle, this.angle + 0.001, false);
     ctx.stroke();
@@ -96,34 +97,46 @@ Orb.prototype.render = function() {
 
 
 const createOrb = (x, y) => {
-    console.log("create orb", `${x} et ${y}`);
+    console.log(`Creating orb ${x}, ${y}`);
     state.orbs.push(new Orb(x, y));
+    state.total += 1;
 };
 
 
 const setup = () => {
+    const radius = options.radius;
     for (let n = initialOrbCount; n >= 0; n--) {
-        console.log("Canvas width", canvas.width);
+        const x = random(canvas.width / 2 - radius, canvas.width / 2 + radius);
-        const x = random(canvas.width / 2 - 300, canvas.width / 2 + 300);
+        const y = random(canvas.height / 2 - radius, canvas.height / 2 + radius);
-        const y = random(canvas.height / 2 - 300, canvas.height / 2 + 300);
-        console.log(x, y);
         createOrb(x, y);
     }
 }
 
+const clear = () => {
+    const alpha = options.fadeout / 100;
+    const style = `rgba(0, 0, 0, ${alpha})`;
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.fillStyle = style;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.globalCompositeOperation = 'lighter';
+}
+
 
 const controls = new dat.GUI( { autoPlace: false } )
 
 const container = document.querySelector("#controlPanel");
 controls.add(state, "total" ).name( "Total Placed" ).listen();
 
-controls.add(options, "speed" ).min(-300).max(300).step(1).name("Speed");
+controls.add(options, "speed" ).min(-300).max(300).step(10).name("Speed");
-controls.add(options, "scale" ).min(0.5).max(5).step(0.001).name("Scale");
+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)");
 
 container.appendChild(controls.domElement);
 
 const loop = (timestamp) => {
     window.requestAnimationFrame(loop);
+    clear();
+
     const scale = options.scale;
     ctx.save();
     ctx.translate(center.x, center.y);
@@ -136,3 +149,4 @@ const loop = (timestamp) => {
 
 setup();
 loop();
+