105 lines
2.5 KiB
HTML
105 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<!--<meta name="description" content="">
|
|
<meta name="keywords" content="">-->
|
|
<meta name="author" content="Victor Giers">
|
|
<meta name="date" content="2019-06-21" scheme="YYYY-MM-DD">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>deaths</title>
|
|
<style>
|
|
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 rate = 1800;
|
|
var tickMS = rate;
|
|
var previous = 0;
|
|
var time = 0;
|
|
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;
|
|
star.push(new Star(random(10,width-20),random(10,height-20)));
|
|
tickMS = random(rate/100,2*rate-(rate/100));
|
|
}
|
|
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);
|
|
}
|
|
|
|
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 > this.radius/2; 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() {
|
|
var w = window.innerWidth;
|
|
var h = window.innerHeight;
|
|
width = w;
|
|
height = h;
|
|
resizeCanvas(width,height);
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|