stars and bottomline

index.html

@@ -9,38 +9,84 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>deaths</title>
   <style>
-  body{padding: 0; margin: 0; background-color: #000; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;}
+  body{padding: 0; margin: 0; background-color: orange; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;}
   canvas {display: block; overflow: hidden;}
   </style>
   <script src="p5.min.js"></script>
   <script>
   var width, height;
-  var tickMS = 1800;
+  var rate = 1800;
+  var tickMS = rate;
   var previous = 0;
   var time = 0;
-  //var jitter = 1.8;
+  var star = [];
+  var radius = 20;
+  var bottomline = "0.55 real human deaths / second";
   function setup() {
     width = window.innerWidth;
     height = window.innerHeight;
     createCanvas(width,height);
-
+    ellipseMode(RADIUS);
   }
 
   function draw() {
+    clear();
+    noStroke();
     var current = millis();
     var elapsed = current - previous;
     previous = current;
     time += elapsed;
     while (time >= tickMS){
       time -= tickMS;
-      blink(Math.random(0,width),Math.random(0,height));
+      star.push(new Star(random(10,width-20),random(10,height-20)));
+      tickMS = random(rate/100,2*rate-(rate/100));
     }
-    clear();
+    for(var i = 0; i < star.length; i++){
+      star[i].display();
+    }
+    fill(255);
+    textSize(14);
+    text(bottomline, 20, height-40);
+    strokeWeight(1);
+    stroke(255);
+    line(20,height-30,20+textWidth(bottomline),height-30);
   }
 
-  function blink(x, y){
-    tickMS = random(100,3500);
-    console.log(tickMS);
+  class Star{
+    constructor(x, y){
+      this.x = x;
+      this.y = y;
+      this.init = millis();
+      this.lifetime = 3600;
+      this.bjitter = random(-50,50);
+      this.radius = radius;
+    }
+    display(){
+      this.b = 0;
+      for (var r = this.radius; r > 0; r-=1) {
+        fill(255,this.b);
+        ellipse(this.x, this.y, r, r);
+        this.b+=(255+this.bjitter)/radius;
+      }
+      this.radius-=0.5;
+
+      if (this.init + this.lifetime < millis()){
+        star.shift();
+      }
+    }
+  }
+
+  var human = true;
+  function mouseClicked(){
+    human = !human;
+    if(human){
+      rate = 1800;
+      bottomline = "0.55 real human deaths / second";
+    } else {
+      rate = 7;
+      bottomline = "142.85 virtual human deaths / second";
+    }
+    tickMS = rate;
   }
 
   window.onresize = function() {