Snow
</div><div>/* comment out - could also work</div><div>* {margin: 0; padding: 0;}</div><div>*/</div><div>body {</div><div> /*You can use any kind of background here.*/</div><div> background: #6b92b9;</div><div>}</div><div>canvas {</div><div> /* could also work */</div><div> /*display: block;*/</div><div>}</div><div>
</div><div>window.onload = function(){</div><div> //canvas init</div><div> var canvas = document.getElementById("canvas");</div><div> var ctx = canvas.getContext("2d");</div><div> </div><div> //canvas dimensions</div><div> var W = window.innerWidth;</div><div> var H = window.innerHeight;</div><div> canvas.width = W;</div><div> canvas.height = H;</div><div> </div><div> //snowflake particles number </div><div> var mp = 3000; //max particles</div><div> var particles = [];</div><div> for(var i = 0; i < mp; i++)</div><div> {</div><div> particles.push({</div><div> x: Math.random()*W, //x-coordinate</div><div> y: Math.random()*H, //y-coordinate</div><div> r: Math.random()*3+1, //radius</div><div> d: Math.random()*mp //density</div><div> })</div><div> }</div><div> </div><div> //Lets draw the flakes</div><div> function draw()</div><div> {</div><div> ctx.clearRect(0, 0, W, H);</div><div> </div><div> ctx.fillStyle = "rgba(255, 255, 255, 0.8)";</div><div> /* ctx.fillStyle = "#FF0000";*/</div><div> ctx.beginPath();</div><div> for(var i = 0; i < mp; i++)</div><div> {</div><div> var p = particles[i];</div><div> ctx.moveTo(p.x, p.y);</div><div> ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);</div><div> }</div><div> ctx.fill();</div><div> update();</div><div> }</div><div> </div><div> //Function to move the snowflakes</div><div> //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes</div><div> var angle = 0;</div><div> function update()</div><div> {</div><div> angle += 0.01;</div><div> for(var i = 0; i < mp; i++)</div><div> {</div><div> var p = particles[i];</div><div> //Updating X and Y coordinates</div><div> //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards</div><div> //Every particle has its own density which can be used to make the downward movement different for each flake</div><div> //Lets make it more random by adding in the radius</div><div> p.y += Math.cos(angle+p.d) + 1 + p.r/2;</div><div> p.x += Math.sin(angle) * 2;</div><div> </div><div> //Sending flakes back from the top when it exits</div><div> //Lets make it a bit more organic and let flakes enter from the left and right also.</div><div> if(p.x > W || p.x < 0 || p.y > H)</div><div> {</div><div> if(i%3 > 0) //66.67% of the flakes</div><div> {</div><div> particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};</div><div> }</div><div> else</div><div> {</div><div> //If the flake is exitting from the right</div><div> if(Math.sin(angle) > 0)</div><div> {</div><div> //Enter fromth</div><div> particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};</div><div> }</div><div> else</div><div> {</div><div> //Enter from the right</div><div> particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};</div><div> }</div><div> }</div><div> }</div><div> }</div><div> }</div><div> </div><div> //animation loop</div><div> setInterval(draw, 50);</div><div>}</div><div>
