Added a footer; Added ability to export P5JS result to SVG; Replaced P5JS background by static SVG

js/main.js

@@ -201,3 +201,20 @@ function componentToHex(c) {
 }
 
 // Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg
+if (typeof variable !== 'undefined') {
+  let separatorSpan = document.createElement('span');
+  separatorSpan.innerHTML = ' - ';
+  document.getElementById('shooting-stars-enable').after(separatorSpan);
+  document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+}
+document.getElementById('shooting-stars-enable').addEventListener('click', () => {
+  if (processingIsOn) {
+    processingSketch.frameRate(0);
+    document.getElementById('shooting-stars-enable').innerHTML = 'Enable shooting stars⭐️';
+    processingIsOn = false;
+  } else {
+    processingSketch.frameRate(24);
+    document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+    processingIsOn = true;
+  }
+});

js/sketch.js

@@ -1,3 +1,5 @@
+// Another possible inspiration: https://www.khanacademy.org/computer-programming/twinkle-twinkle/6280832014565376
+
 let sketch = function(p) {
   let bgCol = hexToRgb('#222233');
   let starCol = [hexToRgb('#ffcdff'), hexToRgb('#804442'), hexToRgb('#ffff7d')]
@@ -16,22 +18,25 @@ let sketch = function(p) {
 
   let time = 0;
 
+  let sketchLoop = 0;
+
 
   p.setup = function(){
     p.frameRate(24);
     currentWidth = p.windowWidth;
     currentHeight = p.windowHeight;
-    p.createCanvas(currentWidth, currentHeight);
+    // p.createCanvas(currentWidth, currentHeight);
+    p.createCanvas(1920, 1080, p.SVG) // To export the result to SVG
+    p.noLoop(); // To export the result to SVG
 
     bgInit();
 
     mover = new Mover();
-
-    // p.noLoop();
   }
 
   p.draw = function(){
-    p.background(bgCol);
+    // p.background(bgCol);
+    p.clear();
     p.image(bg, 0, 0);
 
 
@@ -52,6 +57,8 @@ let sketch = function(p) {
 
 
     time += 1;
+    p.save(); // To export the result to SVG
+
   } //End of draw()
 
   class Stars {
@@ -118,15 +125,10 @@ let sketch = function(p) {
       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));
+      this.pos.y = p.random(0, p.round(p.height*0.45));
 
       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;
     }
 
 
@@ -167,11 +169,6 @@ let sketch = function(p) {
     }
 
     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);
@@ -181,10 +178,11 @@ let sketch = function(p) {
   }
 
   p.windowResized = function() {
-    //Redraw only if new size if bigger than previously
     let newWidth = p.windowWidth;
     let newHeight = p.windowHeight;
-    if (newWidth > currentWidth || newHeight > currentHeight) {
+    //Redraw only if new size if bigger than previously
+    // if (newWidth > currentWidth || newHeight > currentHeight) {
+    if (true) {
       currentWidth = newWidth;
       currentHeight = newHeight;
 
@@ -197,8 +195,9 @@ let sketch = function(p) {
   function bgInit() {
     nbStars = calcNumberOfStars();
     bg = p.createGraphics(p.width, p.height);
-    bg.background(bgCol);
-    setGradient(0, 0, p.width, p.height, bgCol, starCol[1]);
+    // bg.background(bgCol);
+    // setGradient(0, 0, p.width, p.height, bgCol, starCol[1]);
+    // bg.background(0, 0, 0, 0);
 
     stars = new Stars(nbStars);
     stars.make();
@@ -240,4 +239,6 @@ let sketch = function(p) {
   }
 };
 
-new p5(sketch, 'bg');
+let processingSketch = new p5(sketch, 'bg');
+
+let processingIsOn = true;