Snow Flakes

index.html

blink
canvas#canvas

script.js

window.onload = function() {
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");
	
	const W = window.innerWidth;
	const H = window.innerHeight;
	canvas.width = W;
	canvas.height = H;
	
	const mp = 38;
	let particles = [];
	for(let i = 0; i < mp; i++) {
		particles.push({
			x: Math.random() * W,
			y: Math.random() * H,
			r: Math.random(10) * 5,
			d: Math.random() * mp
		})
	}
	
	function draw() {
		ctx.clearRect(0, 0, W, H);
		
		ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
		ctx.beginPath();
		for(let i = 0; i < mp; i++) {
			let p = particles[i];
			ctx.moveTo(p.x, p.y);
			ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
		}
		ctx.fill();
		update();
	}
	
	let angle = 0;
	function update() {
		angle += 0.01;
		for(let i = 0; i < mp; i++) {
			let p = particles[i];
			//Updating X and Y coordinates
			//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
			//Every particle has its own density which can be used to make the downward movement different for each flake
			//Lets make it more random by adding in the radius
			p.y += Math.cos(angle + p.d) + 1 + p.r / 2;
			p.x += Math.sin(angle) * 2;
			
			//Sending flakes back from the top when it exits
			//Lets make it a bit more organic and let flakes enter from the left and right also.
			if(p.x > W + 5 || p.x < - 5 || p.y > H) {
        //66.67% of the flakes 
				if(i % 3 > 0){
					particles[i] = {
            x: Math.random() * W,
            y: -10, 
            r: p.r, 
            d: p.d
          };
				} else {
					//If the flake is exitting from the right
					if(Math.sin(angle) > 0) {
						//Enter from the left
						particles[i] = {
              x: -5, 
              y: Math.random() * H, 
              r: p.r, 
              d: p.d
            };
					} else {
						//Enter from the right
						particles[i] = {
              x: W + 5, 
              y: Math.random() * H, 
              r: p.r, 
              d: p.d
            };
					}
				}
			}
		}
	}
	
	//animation loop
	setInterval(draw, 33);
}

Snow Flakes.markdown

Snow Flakes

Forked from Seth Krasnianski's Pen Snow Flakes.

A Pen by Jeff Lupinski on CodePen.

License.

style.css

* 
  margin: 0
  padding: 0

 html, 
 body
   height: 100%
  
body
  background: url(http://imgh.us/scene_2.svg) no-repeat
  background-size: cover

blink
  display: block
  overflow: hidden
  &:after
    animation: grain 8s steps(10) infinite
    background: url(https://godaytrip.com/images/home/noise.png)
    content: ""
    display: block
    height: 300%
    left: -100%
    position: fixed
    top: -100%
    width: 300%
    z-index: 2
    opacity: 0.4

canvas
  display: block
  height: 100%
  width: 100%

@keyframes grain
  0%, 100% 
    transform: translate(0, 0)
  10% 
    transform: translate(-5%, -10%)
  20% 
    transform: translate(-15%, 5%)
  30% 
    transform: translate(7%, -25%)
  40% 
    transform: translate(-5%, 25%)
  50% 
    transform: translate(-15%, 10%)
  60% 
    transform: translate(15%, 0%)
  70% 
    transform: translate(0%, 15%)
  80%
    transform: translate(3%, 35%)
  90% 
    transform: translate(-10%, 10%)