diff --git a/src/index.html b/src/index.html index 2bf2fc6..5abfa67 100644 --- a/src/index.html +++ b/src/index.html @@ -14,6 +14,7 @@
  • Orbital Trails 2 (theirs)
  • Orbital Trails (mine)
  • Bokeh effect (their) +
  • Sparks (theirs) diff --git a/src/sparks/app.js b/src/sparks/app.js new file mode 100644 index 0000000..526a52b --- /dev/null +++ b/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)' + }); +}); diff --git a/src/sparks/index.html b/src/sparks/index.html new file mode 100644 index 0000000..5a7f7e1 --- /dev/null +++ b/src/sparks/index.html @@ -0,0 +1,25 @@ + + + + + Fizzy Sparks + + + + + + + + +
    +
    + Sorry. +
    +
    + Sorry. +
    + +
    + + + diff --git a/src/sparks/style.css b/src/sparks/style.css new file mode 100644 index 0000000..62d73ca --- /dev/null +++ b/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; +}