let cnv, W, H, ctx, T, snowflakes; let scale = 10, phase = 1, qty = 20, limit = 100, intvl = 5000; const { PI : pi, sin, cos } = Math; const angles = []; for(let i = 0; i < 6; i++) angles.push(2*pi/12*(2*i+1)); //console.log(angles) onload = init; function init(){ //T = Date.now();//console.log(T) //console.log(performance.now()) setBody(); cnv = document.createElement("canvas"); document.body.appendChild(cnv); cnv.style.position = "absolute"; cnv.style.backgroundColor = "#bbb"; ctx = cnv.getContext("2d"); onResize(); onresize = onResize; } function setBody(){ document.body.style.width = "100vw"; document.body.style.height = "100vh"; document.body.style.margin = 0; } function onResize(){ W = innerWidth * scale; H = innerHeight * scale; cnv.width = W; cnv.height = H; cnv.style.width = "100vw"; cnv.style.height = "100vh"; draw(); snowflakes = []; T = performance.now(); phase = 1; for(let i = 0; i < qty; i++) snowflakes.push(new Snowflake()); //requestAnimationFrame(animate); /* cancelAnimationFrame(animate1); */ cancelAnimationFrame(animate2); cancelAnimationFrame(animate3); cancelAnimationFrame(animate4); cancelAnimationFrame(animate5); /* animate1(); setTimeout(animate2, 2000); setTimeout(animate3, 4000); setTimeout(animate4, 6000); setTimeout(animate5, 8000); */ animate1(); setTimeout(enterPhase2, 1000); } function draw(){ ctx.lineWidth = 10; ctx.strokeStyle = "white"; flake({x:500,y:500}); flake2({x:500,y:1000}, 250); flake3({x:500,y:1500}, 250, pi/6); flake4({x:500,y:2300}, 250, pi/6); } function line(pt1, pt2){ ctx.beginPath(); ctx.moveTo(pt1.x,pt1.y); ctx.lineTo(pt2.x,pt2.y); ctx.stroke(); ctx.closePath(); } function flake(ctr){ for(let i = 0; i < 6; i++) line(ctr, { x : ctr.x + 200*sin(angles[i]), y : ctr.y + 200*cos(angles[i]), }); } function flake2(ctr, size){ for(let i = 0; i < 6; i++) line(ctr, { x : ctr.x + size*sin(angles[i]), y : ctr.y + size*cos(angles[i]), }); } function flake3(ctr, size, angle){ for(let i = 0; i < 6; i++) line(ctr, { x : ctr.x + size*sin(angles[i]+angle), y : ctr.y + size*cos(angles[i]+angle), }); } function flake4(ctr, size, angle){ function fork(i){ let endPt = { x : ctr.x + size*sin(angles[i]+angle), y : ctr.y + size*cos(angles[i]+angle), } line(ctr, endPt); let midPt = { x : (ctr.x * 1 + endPt.x * 2) / 3, y : (ctr.y * 1 + endPt.y * 2) / 3, } line(midPt, { x : midPt.x + size/3 * sin(angles[i]+angle-pi/3), y : midPt.y + size/3 * cos(angles[i]+angle-pi/3), }) line(midPt, { x : midPt.x + size/3 * sin(angles[i]+angle+pi/3), y : midPt.y + size/3 * cos(angles[i]+angle+pi/3), }) } for(let i = 0; i < 6; i++) fork(i); } function randInt(n){ return Math.floor(Math.random()*n); } class Snowflake{ constructor(){ this.size = randInt(100) + 50; this.x = randInt(W-this.size) + this.size; this.y = randInt(H-this.size) + this.size; this.angle = 0; this.color = "white"; this.dx = 0; this.dy = scale * (randInt(3) + 1); this.rot = 0; } draw(){ flake4(this, this.size, this.angle); } update(){ this.x += this.dx; this.y += this.dy; if (this.y + this.size > H){ this.size = randInt(100) + 50; this.x = randInt(W-this.size) + this.size; this.y = this.size; } if (this.x + this.size > W){ this.size = randInt(100) + 50; this.x = randInt(W-this.size) + this.size; this.y = this.size; } if (this.x - this.size < 0){ this.size = randInt(100) + 50; this.x = randInt(W-this.size) + this.size; this.y = this.size; } if (this.y - this.size < 0){ this.size = randInt(100) + 50; this.x = randInt(W-this.size) + this.size; this.y = randInt(H-this.size) + this.size; } this.angle += this.rot; } } function animate(){ ctx.clearRect(0,0,W,H); let t; switch(phase){ case 1: for(let i = 0; i < snowflakes.length; i++) snowflakes[i].draw(); t = performance.now(); if (t - T > 1000){ cnv.style.backgroundColor = "#888"; phase = 2; } break; case 2: //console.log("phase 2") //snowflakes.forEach(snowflake => snowflake.update()); for(let i = 0; i < snowflakes.length; i++){ snowflakes[i].update(); snowflakes[i].draw(); } t = performance.now(); if (t - T > 4000){ cnv.style.backgroundColor = "#444"; //snowflakes.forEach(snowflake => { //snowflake.dx = randInt(scale * 3); //}); for(let i = 0; i < snowflakes.length; i++){ snowflakes[i].dx = randInt(scale * 3) + 1; snowflakes[i].rot = (randInt(6) + 1) * pi/18; } phase = 3; } break; case 3: //snowflakes.forEach(snowflake => snowflake.update()); for(let i = 0; i < snowflakes.length; i++){ snowflakes[i].update(); snowflakes[i].draw(); } t = performance.now(); if (t - T > 7000){ cnv.style.backgroundColor = "#000"; ctx.strokeStyle = "skyblue"; phase = 4; } break; case 4: //snowflakes.forEach(snowflake => { // snowflake.dx = ( randInt(4) - 2 ) * scale; // snowflake.update(); // }); for(let i = 0; i < snowflakes.length; i++){ snowflakes[i].dx = ( randInt(5) - 2 ) * scale; snowflakes[i].update(); snowflakes[i].draw(); } t = performance.now(); if (t - T > 10000){ phase = 5; } break; case 5: snowflakes.push(new Snowflake()); for(let i = 0; i < snowflakes.length; i++){ snowflakes[i].dx = ( randInt(9) - 4 ) * scale; snowflakes[i].dy = ( randInt(9) - 4 ) * scale; snowflakes[i].rot = (randInt(6) + 1) * pi/18; snowflakes[i].update(); ctx.strokeStyle = "rgb(" + (randInt(75) + 160) + "," + (randInt(75) + 160) + "," + (randInt(75) + 160) + ")"; snowflakes[i].draw(); } if(snowflakes.length > 100) snowflakes.shift(); break; } //snowflakes.forEach(snowflake => snowflake.draw()); requestAnimationFrame(animate); } function animate1(){ ctx.clearRect(0,0,W,H); for(let i = 0; i < snowflakes.length; i++) snowflakes[i].draw(); } function enterPhase2(){ cnv.style.backgroundColor = "#888"; requestAnimationFrame(animate2); setTimeout(enterPhase3, intvl); } function animate2(){ ctx.clearRect(0,0,W,H); for(let i = 0; i < snowflakes.length; i++){ snowflakes[i].update(); snowflakes[i].draw(); } requestAnimationFrame(animate2); } function enterPhase3(){ cnv.style.backgroundColor = "#444"; for(let i = 0; i < snowflakes.length; i++){ snowflakes[i].dx = randInt(scale * 3) + 1; snowflakes[i].rot = (randInt(6) + 1) * pi/18; } cancelAnimationFrame(animate2); requestAnimationFrame(animate3); setTimeout(enterPhase4, intvl); } function animate3(){ ctx.clearRect(0,0,W,H); for(let i = 0; i < snowflakes.length; i++){ snowflakes[i].update(); snowflakes[i].draw(); } requestAnimationFrame(animate3); } function enterPhase4(){ cnv.style.backgroundColor = "#000"; ctx.strokeStyle = "skyblue"; cancelAnimationFrame(animate3); requestAnimationFrame(animate4); setTimeout(enterPhase5, intvl); } function animate4(){ ctx.clearRect(0,0,W,H); for(let i = 0; i < snowflakes.length; i++){ snowflakes[i].dx = ( randInt(5) - 2 ) * scale; snowflakes[i].update(); snowflakes[i].draw(); } requestAnimationFrame(animate4); } function enterPhase5(){ cancelAnimationFrame(animate4); requestAnimationFrame(animate5); } function animate5(){ ctx.clearRect(0,0,W,H); snowflakes.push(new Snowflake()); for(let i = 0; i < snowflakes.length; i++){ snowflakes[i].dx = ( randInt(9) - 4 ) * scale; snowflakes[i].dy = ( randInt(9) - 4 ) * scale; snowflakes[i].rot = (randInt(6) + 1) * pi/18; snowflakes[i].update(); ctx.strokeStyle = "rgb(" + (randInt(75) + 160) + "," + (randInt(75) + 160) + "," + (randInt(75) + 160) + ")"; snowflakes[i].draw(); } if(snowflakes.length > limit) snowflakes.shift(); requestAnimationFrame(animate5); }

Drunken Snowflakes