-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsnow.html
98 lines (86 loc) · 2.38 KB
/
snow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
i<html>
<body>
<canvas width="1400" height="700" id="canvas" onmousedown="mouseDown()" onmouseup="mouseUp()"></canvas>
<script>
// document.getElementById("canvas").addEventListener("click", myFunction);
function mouseDown() {
multiplier = 10;
}
function mouseUp() {
multiplier = 1;
}
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById('canvas');
var particles = [];
var tick = 0;
var multiplier = 1;
var particleCap = 0;
function loop() {
window.requestAnimFrame(loop);
createParticles(multiplier);
updateParticles();
killParticles();
drawParticles();
}
window.requestAnimFrame(loop);
function createParticles(multiplier) {
//check on every 4th tick check
if(tick % 4 == 0) {
//add particle if fewer than 100
if(particles.length < 400) {
particles.push({
x: Math.random()*canvas.width, //between 0 and canvas width
y: 0,
speedy: 2+Math.random()*3, //between 2 and 5
speedx: -0.5+Math.random()*(2*multiplier), //between 2 and 5
radius: 2+Math.random()*2, //between 5 and 10
color: "white"
});
}
}
}
function updateParticles() {
for (var i in particles) {
var part = particles[i];
part.y += part.speedy;
part.x += part.speedx;
}
}
function killParticles() {
for(var i in particles) {
var part = particles[i];
if(part.y > canvas.height) {
particles.splice(i, 1);
}
if(part.x > canvas.width) {
part.x = 0;
}
}
}
function drawParticles() {
var c = canvas.getContext('2d');
c.fillStyle = "black";
c.fillRect(0,0,canvas.width,canvas.height);
for(var i in particles) {
var part = particles[i];
c.beginPath();
c.arc(part.x,part.y, part.radius, 0, Math.PI*2);
c.closePath();
c.fillStyle = part.color;
c.fill();
}
c.fillStyle = "white";
c.fillText("Press the screen!", 5, 20);
}
</script>
</body>
</html>