add snow.js outline for index

1 files changed, 115 insertions, 0 deletions

diff --git a/js/snow.js b/js/snow.js
new file mode 100644
index 0000000..174b321
--- /dev/null
+++ b/js/snow.js
@@ -0,0 +1,115 @@
+var canvas = document.querySelector('.snow'),
+    ctx = canvas.getContext('2d'),
+    windowW = window.innerWidth,
+    windowH = window.innerHeight,
+    numFlakes = 125,
+    flakes = [];
+
+if (screen.width < 768) {
+    numFlakes = 50;
+} // If Mobile
+
+function Flake(x, y) {
+    var maxWeight = 5,
+        maxSpeed = 1.2;
+
+    if (screen.width < 768) {
+        maxSpeed = 1;
+    } // If Mobile
+
+    this.x = x;
+    this.y = y;
+    this.r = randomBetween(0, 1);
+    this.a = randomBetween(0, Math.PI);
+    this.aStep = 0.01;
+
+    this.weight = randomBetween(2, maxWeight);
+    this.alpha = (this.weight / maxWeight);
+    this.speed = (this.weight / maxWeight) * maxSpeed;
+
+    this.update = function () {
+        this.x += Math.cos(this.a) * this.r;
+        this.a += this.aStep;
+
+        this.y += this.speed;
+    }
+}
+
+function init() {
+    var i = numFlakes,
+        flake,
+        x,
+        y;
+
+    while (i--) {
+        x = randomBetween(0, windowW, true);
+        y = randomBetween(0, windowH, true);
+
+        flake = new Flake(x, y);
+        flakes.push(flake);
+    }
+
+    scaleCanvas();
+    loop();
+}
+
+function scaleCanvas() {
+    canvas.width = windowW;
+    canvas.height = windowH;
+}
+
+function loop() {
+    var i = flakes.length,
+        z,
+        dist,
+        flakeA,
+        flakeB;
+
+    // clear canvas
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, windowW, windowH);
+    ctx.restore();
+
+    // loop of hell
+    while (i--) {
+
+        flakeA = flakes[i];
+        flakeA.update();
+
+
+        /*for (z = 0; z < flakes.length; z++) { flakeB=flakes[z]; if (flakeA !==flakeB && distanceBetween(flakeA,
+          flakeB) < 150) { ctx.beginPath(); ctx.moveTo(flakeA.x, flakeA.y); ctx.lineTo(flakeB.x, flakeB.y);
+          ctx.strokeStyle='#444444' ; ctx.stroke(); ctx.closePath(); } }*/
+
+        ctx.beginPath();
+        ctx.arc(flakeA.x, flakeA.y, flakeA.weight, 0, 2 * Math.PI, false);
+        ctx.fillStyle = 'rgba(255, 255, 255, ' + flakeA.alpha + ')';
+        ctx.fill();
+
+        if (flakeA.y >= windowH) {
+            flakeA.y = -flakeA.weight;
+        }
+    }
+
+    requestAnimationFrame(loop);
+}
+
+function randomBetween(min, max, round) {
+    var num = Math.random() * (max - min + 1) + min;
+
+    if (round) {
+        return Math.floor(num);
+    } else {
+        return num;
+    }
+}
+
+function distanceBetween(vector1, vector2) {
+    var dx = vector2.x - vector1.x,
+        dy = vector2.y - vector1.y;
+
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
+init();