Added shooting starts, configured Umami

css/main.css

@@ -68,6 +68,7 @@ html {
 }
 
 #desk {
+  /* display: none; */
   display: flex;
   flex-direction: column;
   align-items: center;

index.html

@@ -73,7 +73,7 @@
 
 
 
-
+  <script async defer data-website-id="8db8311f-63a6-47d5-a77f-7d9b80db22b1" src="https://stats.tflcl.xyz/sucre.js"></script>
   <script src="js/vendor/modernizr-3.11.2.min.js"></script>
   <script src="./js/vendor/p5.js"></script>
   <script src="js/main.js"></script>

js/sketch.js

@@ -11,6 +11,9 @@ let sketch = function(p) {
   let stars;
   let bg;
 
+  let mover;
+  let shootingStarDirection;
+
   let time = 0;
 
 
@@ -22,7 +25,7 @@ let sketch = function(p) {
 
     bgInit();
 
-
+    mover = new Mover();
 
     // p.noLoop();
   }
@@ -31,23 +34,23 @@ let sketch = function(p) {
     p.background(bgCol);
     p.image(bg, 0, 0);
 
-    // p.circle(30, time*1.5, 10);
 
 
+    if (time%72 == 0) {  //72 is 3s at 24fps
+      if (p.random(1) < 0.3) {
+        mover.init();
+        let accX = p.random(12, 18) * p.random([-1, 1]);
+        let accY = p.random(-4, 4);
+        mover.vel.set(accX, accY);
+      }
+    }
+
+    if (mover.lifespan < 255) {
+      mover.update();
+      mover.show();
+    }
+
 
-    // for (let i=0; i<nbStars; i++) {
-    //   let x = p.random(p.windowWidth);
-    //   let y = p.random(p.windowHeight);
-    //   let d = 1 + p.random(2);
-    //   let c = p.random(starCol);
-    //   let a = p.random(230);
-    //   c.setAlpha(a);
-    //   // console.log(c);
-    //
-    //   p.stroke(c);
-    //   // p.point(x, y);
-    //   p.circle(x, y, d);
-    // }
     time += 1;
   } //End of draw()
 
@@ -80,6 +83,103 @@ let sketch = function(p) {
     }
   }
 
+
+
+  class Mover {
+    // Simulating Forces
+    // The Nature of Code
+    // The Coding Train / Daniel Shiffman
+    // https://youtu.be/Uibl0UE4VH8
+    // https://thecodingtrain.com/learning/nature-of-code/2.1-simulating-forces.html
+    // https://editor.p5js.org/codingtrain/sketches/kYWcOmch
+    constructor() {
+      // this.pos = p.createVector(
+      //   p.random(p.round(0.2 * p.width)),
+      //   p.random(0, p.round(p.height/2))
+      // );
+      this.pos = p.createVector(0, 0);
+      this.vel = p.createVector(0, 0);
+      this.acc = p.createVector(0, 0);
+      // this.r = 16;
+      this.color = 'white';
+      // this.color.setAlpha(p.random(100,230));
+      this.size;
+
+      this.lifespan = 255;
+      this.burnrate;
+
+    }
+
+    init() {
+      this.lifespan = 0;
+      this.burnrate = p.random(2, 8);
+      //
+      this.size = p.random(4,7)
+      this.acc.set(0, 0);
+      this.vel.set(0, 0);
+      this.pos.x = p.random(p.round(0.05 * p.width), p.round(0.95 * p.width));
+      this.pos.y = p.random(0, p.round(p.height*0.3));
+
+      let gravity = p.createVector(0, 0.02);
+      this.applyForce(gravity);
+
+      // this.pos = p.createVector(200, 200);
+
+      // this.acc.x = p.random(7, 15) * (1 + p.random(0, 1) * -2);
+      // this.acc.y = p.random(0, 3) - 6;
+    }
+
+
+    applyForce(force) {
+      this.acc.set(force);
+    }
+
+
+    edges() {
+      if (this.pos.y >= p.height-this.r) {
+        this.pos.y = p.height-this.r;
+        this.vel.y *= -1;
+      }
+
+      if (this.pos.x >= p.width-this.r) {
+        this.pos.x = p.width-this.r;
+        this.vel.x *= -1;
+      } else if (this.pos.x <= this.r) {
+        this.pos.x = this.r;
+        this.vel.x *= -1;
+      }
+    }
+
+
+    update() {
+
+      this.lifespan += this.burnrate;
+      this.lifespan = p.constrain(this.lifespan, 0, 255);
+      if (this.lifespan < 255) {
+
+        this.pos.add(this.vel);
+        this.vel.mult(0.98);
+        this.vel.add(this.acc);
+      }
+
+
+
+    }
+
+    show() {
+      // p.stroke(255);
+      // p.strokeWeight(2);
+      // p.fill(255, 100);
+      // p.ellipse(this.pos.x, this.pos.y, this.r * 2);
+
+      p.strokeWeight(this.size);
+      // p.stroke(this.color);
+      p.stroke(255, p.constrain(305-this.lifespan, 0, 255), 0, 255-0.7*this.lifespan);
+      p.point(this.pos);
+
+    }
+  }
+
   p.windowResized = function() {
     //Redraw only if new size if bigger than previously
     let newWidth = p.windowWidth;
@@ -112,24 +212,24 @@ let sketch = function(p) {
       starDensity = 0.01;
     }
     let nb = p.round(starDensity * currentWidth * currentHeight)
-    console.log('nbStars: ' + nb);
+    // console.log('nbStars: ' + nb);
     return nb;
   }
 
   function hexToRgb(hex) {
-      hex = hex.replace('#', '');
+    hex = hex.replace('#', '');
 
-      var bigint = parseInt(hex, 16);
+    var bigint = parseInt(hex, 16);
 
-      var r = (bigint >> 16) & 255;
-      var g = (bigint >> 8) & 255;
-      var b = bigint & 255;
+    var r = (bigint >> 16) & 255;
+    var g = (bigint >> 8) & 255;
+    var b = bigint & 255;
 
-      return p.color(r, g, b);
+    return p.color(r, g, b);
   }
   function setGradient(x, y, w, h, c1, c2) {
     bg.noFill();
-      // Top to bottom gradient
+    // Top to bottom gradient
     for (let i = y; i <= y + h; i++) {
       let inter = p.pow(p.map(i, y, y + h, 0, 1),6);
       let c = bg.lerpColor(c1, c2, inter);