Finally getting a render

justfile

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

src/orbital-trails-extern-2/app.js

@@ -30,6 +30,7 @@ var Orb = function( x, y ){
   this.angle = atan2( dy, dx );
   this.lastAngle = this.angle;
 	this.radius = 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;
 };
@@ -70,6 +71,7 @@ Orb.prototype.render = function(){
 var createOrb = function( config ){
   var x = ( config && config.x ) ? config.x : sketch.mouse.x,
       y = ( config && config.y ) ? config.y : sketch.mouse.y;
+  console.log("Create orb", `${x} et ${y}`);
 	orbs.push( new Orb( x, y ) );
 };
 

src/orbital-trails/app.js

@@ -2,6 +2,7 @@ console.log("Initializing animation");
 
 const canvas = document.getElementById('mainCanvas');
 const ctx = canvas.getContext('2d');
+
 const dpr = window.devicePixelRatio;
 const cw = window.innerWidth;
 const ch = window.innerHeight;
@@ -9,50 +10,129 @@ canvas.width = cw * dpr;
 canvas.height = ch * dpr;
 ctx.scale(dpr, dpr);
 
-const stats = {
-    total: 0
+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 );
+}
+
+const initialOrbCount = 100;
+
+const state = {
+    total: 0,
+    dt: 1,
+    orbs: [],
 };
 const options = {
     speed: 65,
     scale: 1.0,
 };
 
-const Orb = (x, y) => {
+const Orb = function(x, y) {
+    const scale = options.scale;
+    const dx = ( x / scale ) - ( center.x / scale );
+    const dy = ( y / scale ) - ( center.y / scale );
 
+    this.angle = Math.atan2(dy, dx);
+    this.lastAngle = this.angle;
+    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;
 
 };
 
-const orbs = [];
+Orb.prototype.update = function() {
+    const speed = options.speed;
+    this.lastAngle = this.angle;
+    this.angle += this.speed * ( speed / 50 ) * state.dt;
+    this.x = this.radius * Math.cos( this.angle );
+    this.y = this.radius * Math.sin( this.angle );
+};
 
-const createOrb = (mx, my) => {
-    console.log(`Creating orb at ${mx} ${my}`);
-    const dx = (cw/2) - mx;
-    const dy = (ch/2) - my;
-    const dist = Math.sqrt(dx * dx + dy * dy);
-    const angle = Math.atan2(dy, dx);
+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;
+
+    //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.beginPath();
+    ctx.arc(0, 0, radius, this.lastAngle, this.angle + 0.001, false);
+    ctx.stroke();
+    ctx.closePath();
+
+
+    /*
+    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 initialOrbCount = 100;
-for (let n = initialOrbCount; n >= 0; n--) {
-    createOrb(cw/2, ch/2+(n*2));
+const createOrb = (x, y) => {
+    console.log("create orb", `${x} et ${y}`);
+    state.orbs.push(new Orb(x, y));
+};
+
+
+const setup = () => {
+    for (let n = initialOrbCount; n >= 0; n--) {
+        console.log("Canvas width", canvas.width);
+        const x = random(canvas.width / 2 - 300, canvas.width / 2 + 300);
+        const y = random(canvas.height / 2 - 300, canvas.height / 2 + 300);
+        console.log(x, y);
+        createOrb(x, y);
+    }
 }
 
-const loop = (timestamp) => {
-    window.requestAnimationFrame(loop);
-    //console.log(timestamp);
-
-
-};
-
-loop();
 
 const controls = new dat.GUI( { autoPlace: false } )
 
 const container = document.querySelector("#controlPanel");
-controls.add(stats, "total" ).name( "Total Placed" ).listen();
+controls.add(state, "total" ).name( "Total Placed" ).listen();
 
 controls.add(options, "speed" ).min(-300).max(300).step(1).name("Speed");
 controls.add(options, "scale" ).min(0.5).max(5).step(0.001).name("Scale");
 
 container.appendChild(controls.domElement);
+
+const loop = (timestamp) => {
+    window.requestAnimationFrame(loop);
+    const scale = options.scale;
+    ctx.save();
+    ctx.translate(center.x, center.y);
+    ctx.scale(scale, scale);
+    state.orbs.forEach((orb) => {
+        orb.render();
+    });
+    ctx.restore();
+};
+
+setup();
+loop();