Sparks external code

src/index.html

@@ -14,6 +14,7 @@
             <li> <a href="./orbital-trails-extern-2/index.html">Orbital Trails 2 (theirs)</a>
             <li> <a href="./orbital-trails/index.html">Orbital Trails (mine)</a>
             <li> <a href="./bokeh/index.html">Bokeh effect (their)</a>
+            <li> <a href="./sparks/index.html">Sparks (theirs)</a>
         </ul>
     </body>
 </html>

src/sparks/app.js

@@ -0,0 +1,197 @@
+$(window).bind('load', function () {
+    const raf = function (entry) {
+        window.requestAnimationFrame(entry);
+    };
+    const random = function (min, max) {
+        max = max + 1;
+        return Math.floor(Math.random() * (max - min) + min);
+    }
+    var app = {
+        init: function () {
+            this.cacheDOM();
+            this.style();
+        },
+        cacheDOM: function () {
+            this.container = $('#container');
+            this.images = $('img');
+
+            this.mouseX = null;
+            this.mouseY = null;
+        },
+        style: function () {
+            this.images.imagesLoaded(function () {
+                $(window).resize(function initial() {
+                    TweenMax.set(app.container, {
+                        opacity: 1
+                    });
+                    return initial;
+                }());
+            });
+        },
+        cursorEvents: function (e) {
+            app.mouseX = e.clientX;
+            app.mouseY = e.clientY;
+        }
+    }
+
+    app.init();
+
+    var cContainer = $('#c-container'),
+        c = document.getElementById('c'),
+        c2Container = $('#c2-container'),
+        c2 = document.getElementById('c2'),
+        cx = c.getContext('2d'),
+        c2x = c2.getContext('2d'),
+        particleIndex = 0,
+        particles = {},
+        particleNum = 1,
+        particlesLoaded = false,
+        Particle,
+        Particle2,
+        canvas,
+        canvas2;
+
+    c.width = $('#c').outerWidth();
+    c.height = $('#c').outerHeight();
+
+    c2.width = $('#c2').outerWidth();
+    c2.height = $('#c2').outerHeight();
+
+    //INITIAL CANVAS DRAW
+    cx.fillStyle = 'rgba(0,0,0,1)';
+    cx.fillRect(0, 0, c.width, c.height);
+    c2x.fillStyle = 'rgba(0,0,0,1)';
+    c2x.fillRect(0, 0, c2.width, c2.height);
+
+    function particleFactory(thisCanvas, thisContext, thisParticleName, thisCanvasFunction) {
+
+        var particleIndex = 0,
+            particles = {},
+            particleNum = 2,
+            particlesLoaded = false;
+
+        thisParticleName = function () {
+            this.r = 8;
+            this.rStart = this.r;
+            this.rIncrement = this.r * -0.01;
+            this.x = thisCanvas.width / 2;
+            this.y = thisCanvas.height / 2;
+          
+            this.vxIsNegative = random(1,2);
+          
+            this.originTriggered = false;
+            this.vx = this.vxIsNegative === 1 ? random(0,50) * -0.1 : random(0,50) * 0.1;
+            this.vxMult = random(10,20) * 0.1;
+            this.vy = random(-10, 10);
+            this.vyMult = random(2,6) * -0.1;
+            this.opacityLimit = 1;
+            this.opacity = 1;
+            this.opacityIncrement = 0.05;
+            this.opacityReversing = false;
+            this.gravity = 1;
+            this.framerate = 0;
+            this.framerateCounter = this.framerate;
+            this.counter = 0;
+            particleIndex++;
+            particles[particleIndex] = this;
+            this.id = particleIndex;
+            this.life = 0;
+            this.maxLife = random(0, 100);
+            this.hue = random(30, 60);
+            this.light = random(50, 100);
+            this.color = `hsla(${this.hue},100%,${this.light}%,${this.opacity})`;
+          
+            this.bounced = false;
+          
+            this.duration = 60;
+            this.durationTotal = this.duration + this.opacityLimit * 10;
+            this.durationCounter = 0;
+        }
+
+        thisParticleName.prototype.draw = function () {
+
+            if ((!this.originTriggered) && (app.mouseX != null)) {
+                this.originTriggered = true;
+                this.x = app.mouseX;
+                this.y = app.mouseY;
+            }
+            this.color = `hsla(${this.hue},100%,${this.light}%,${this.opacity})`;
+            thisContext.fillStyle = this.color;
+            thisContext.beginPath();
+            thisContext.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
+            thisContext.fill();
+
+            //START DRAW OPERATION
+            this.r += this.rIncrement;
+            this.x += this.vx;
+            this.y += this.vy;
+            this.durationCounter++;
+            if (this.vx === 0) {
+                this.vx++;
+            }
+            if (this.vxIsNegative === 1) {
+                this.vx
+            }
+            if (this.vy === 0) {
+                this.vy++;
+            }
+            if (this.y > thisCanvas.height - this.rStart) {
+                if (!this.bounced) {
+                  this.vx *= this.vxMult;
+                } else {
+                  this.vx *= 0.9;
+                }
+                this.bounced = true;
+                this.vy *= this.vyMult;
+                this.y = thisCanvas.height - this.rStart;
+            }
+            this.vy += this.gravity;
+            if ((this.r <= 0)) {
+                delete particles[this.id];
+            }
+            this.life++;
+            //END DRAW OPERATION
+        }
+
+        thisCanvasFunction = function () {
+            thisContext.globalCompositeOperation = 'source-over';
+            thisContext.fillStyle = 'rgba(0,0,0,1)';
+            thisContext.fillRect(0, 0, thisCanvas.width, thisCanvas.height);
+            if (!particlesLoaded) {
+                for (var i = 0; i < particleNum; i++) {
+                    new thisParticleName();
+                }
+            }
+            thisContext.globalCompositeOperation = 'lighter';
+            for (var i in particles) {
+                particles[i].draw();
+            }
+        }
+        setInterval(thisCanvasFunction, 15);
+    }
+
+    $(window).resize(function initial() {
+        window.addEventListener('mousemove', app.cursorEvents, false);
+
+        c.width = $('#c').outerWidth();
+        c.height = $('#c').outerHeight();
+
+        c2.width = $('#c2').outerWidth();
+        c2.height = $('#c2').outerHeight();
+
+        return initial;
+    }());
+
+    particleFactory(c, cx, Particle, canvas);
+    particleFactory(c2, c2x, Particle2, canvas2);
+
+    TweenMax.set(c2Container, {
+        transformOrigin: 'center bottom',
+        scaleY: -1,
+        opacity: 1
+    });
+
+    TweenMax.set(c2, {
+        filter: 'blur(10px)'
+    });
+});

src/sparks/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>Fizzy Sparks</title>
+        <link href="style.css" rel="stylesheet" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
+        <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
+        <script type="module" src="app.js"></script>
+    </head>
+    <body>
+    <div id="container">
+        <div id="c-container">
+            <canvas id="c">Sorry.</canvas>
+        </div>
+        <div id="c2-container">
+            <canvas id="c2">Sorry.</canvas>
+        </div>
+
+    </div>
+    </body>
+</html>
+

src/sparks/style.css

@@ -0,0 +1,48 @@
+@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i';
+
+body,
+html {
+    margin: 0;
+    padding: 0;
+    font-family: 'Lato', sans-serif;
+    background-color: black;
+    overflow: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+li {
+    margin: 0;
+    padding: 0;
+}
+
+#container {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    float: left;
+    opacity: 0;
+}
+
+#c-container,
+#c2-container {
+    width: 100vw;
+    height: 80vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}