8bit Snow

8bit-snow.markdown

8bit Snow

A Pen by eightarmshq on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<canvas id="canvas"></canvas>
<div class="center">
  <div class="text-center">
    <h1>8 bit snow</h1>
  </div>
</div>

script.js

var Snow = function(){

	var c = this;
	canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
	W = canvas.width;
	H = canvas.height;

	this.init = function(){

		c.particles = [];
		c.colors = [
			'#ffffff',
			'#ffffff',
			'#ffffff',
			'#ffffff',
			'#ffffff',
			'#ffffff',
			'#ffffff',
			'#ffffff',
			'#ffffff',
			'#ffffff',
		];
		

		c.mp = 100; //max particles

		for(var i = 0; i < c.mp; i++)
		{
			var size = Math.random()*4+5;
			c.particles.push({
				x: Math.random()*W, //x-coordinate
				y: Math.random()*H, //y-coordinate
				w: size,
				h: size,
				d: Math.random()*20 +30, //density
				vx:(Math.random()*7) - 3.5,
				fill: c.colors[Math.floor(Math.random() * c.colors.length)],
				s: (Math.random() * 0.2) - 0.1
			});
		}

    setInterval(function(){
      c.render();
    }, 1000/30);
    
	};

	this.resize = function(){
		// Nothing
	};

	//Lets draw the flakes
	this.render = function ()
	{
		ctx.fillStyle = '#000000';
		ctx.fillRect(0, 0, W, H);
		
		ctx.beginPath();
		for(var i = 0; i < c.mp; i++)
		{
			var p = c.particles[i];
			ctx.fillStyle = p.fill;
			ctx.fillRect(p.x, p.y, p.w, p.h);
		}
		ctx.fill();
		c.update_positions();
	};

	this.update_positions = function ()
	{
		for(var i = 0; i < c.mp; i++){
			var p = c.particles[i];
			p.a += p.s;
			p.y += p.d/10;
			p.x += p.vx;

			if(p.x > W+5 || p.x < -5 || p.y > H){
				if(i%3 > 0){
					p.x = Math.random()*W;
					p.y = -10;
				}
			}
		}
	};

	this.init();
};

var confetti = new Snow();

style.scss

body, html{
  width:100%;
  height:100%;
  overflow:hidden;
  font-family: 'Press Start 2P', cursive;
}

.center{
  position:absolute;
  top:0;
  bottom: 0;left: 0;right: 0;
  color:#fff;
  display:flex;
  align-items:center;
  .text-center{
    text-align:center;
    width:100%;
  }
}

h1{
  display:inline-block;
  padding-right:5px;
  border-right:10px solid #fff;
  animation:blink 1s infinite;
  @media screen and (max-width: 370px){
    font-size:14px;
    border-right:4px solid #fff;
  }
}

@keyframes blink{
  0%{
    border-right-color:transparent;
  }
  50%{
    border-right-color:transparent;
  }
  51%{
    border-right-color:#fff;
  }
  100%{
    border-right-color:#fff;
  }
}

canvas{
  background:#000;
  width:100%;
  height:100%;
}