Eleven — Stranger Things Cinemagraph

// Canvas grain by Renārs Vilnis: // http://codepen.io/renarsvilnis/pen/YWKRvE // Falling confetti by Linmiao Xu // https://codepen.io/linrock/pen/Amdhr?editors=1010 'use strict'; console.clear(); class Grain { constructor (el) { /** * Options * Increase the pattern size if visible pattern */ this.patternSize = 200; this.patternScaleX = 1000; this.patternScaleY = 1000; this.patternRefreshInterval = 5; this.patternAlpha = 18; /** * Create canvas */ this.canvas = el; this.ctx = this.canvas.getContext('2d'); this.ctx.scale(this.patternScaleX, this.patternScaleY); /** * Create a canvas that will be used to generate grain and used as a * pattern on the main canvas. */ this.patternCanvas = document.createElement('canvas'); this.patternCanvas.width = this.patternSize; this.patternCanvas.height = this.patternSize; this.patternCtx = this.patternCanvas.getContext('2d'); this.patternData = this.patternCtx.createImageData(this.patternSize, this.patternSize); this.patternPixelDataLength = this.patternSize * this.patternSize * 4; // rgba = 4 /** * Prebind prototype function, so later its easier to user */ this.resize = this.resize.bind(this); this.loop = this.loop.bind(this); this.frame = 0; window.addEventListener('resize', this.resize); this.resize(); window.requestAnimationFrame(this.loop); } resize () { this.canvas.width = window.innerWidth * devicePixelRatio; this.canvas.height = window.innerHeight * devicePixelRatio; } update () { const {patternPixelDataLength, patternData, patternAlpha, patternCtx} = this; // put a random shade of gray into every pixel of the pattern for (let i = 0; i < patternPixelDataLength; i += 4) { // const value = (Math.random() * 255) | 0; const value = Math.random() * 255; patternData.data[i] = value; patternData.data[i + 1] = value; patternData.data[i + 2] = value; patternData.data[i + 3] = patternAlpha; } patternCtx.putImageData(patternData, 0, 0); } draw () { const {ctx, patternCanvas, canvas, viewHeight} = this; const {width, height} = canvas; // clear canvas ctx.clearRect(0, 0, width, height); // fill the canvas using the pattern ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat'); ctx.fillRect(0, 0, width, height); } loop () { // only update grain every n frames const shouldDraw = ++this.frame % this.patternRefreshInterval === 0; if (shouldDraw) { this.update(); this.draw(); } window.requestAnimationFrame(this.loop); } } /** * Initiate Grain */ const el = document.querySelector('.grain'); const grain = new Grain(el); (function() { var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos; NUM_CONFETTI = 350; COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]]; PI_2 = 2 * Math.PI; canvas = document.getElementById("world"); context = canvas.getContext("2d"); window.w = 0; window.h = 0; resizeWindow = function() { window.w = canvas.width = window.innerWidth; return window.h = canvas.height = window.innerHeight; }; window.addEventListener('resize', resizeWindow, false); window.onload = function() { return setTimeout(resizeWindow, 0); }; range = function(a, b) { return (b - a) * Math.random() + a; }; drawCircle = function(x, y, r, style) { context.beginPath(); context.arc(x, y, r, 0, PI_2, false); context.fillStyle = style; return context.fill(); }; xpos = 0.5; document.onmousemove = function(e) { return xpos = e.pageX / w; }; window.requestAnimationFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { return window.setTimeout(callback, 1000 / 60); }; })(); Confetti = (function() { function Confetti() { this.style = COLORS[~~range(0, 5)]; this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2]; this.r = ~~range(2, 6); this.r2 = 2 * this.r; this.replace(); } Confetti.prototype.replace = function() { this.opacity = 0; this.dop = 0.03 * range(1, 4); this.x = range(-this.r2, w - this.r2); this.y = range(-20, h - this.r2); this.xmax = w - this.r; this.ymax = h - this.r; this.vx = range(0, 2) + 8 * xpos - 5; return this.vy = 0.7 * this.r + range(-1, 1); }; Confetti.prototype.draw = function() { var ref; this.x += this.vx; this.y += this.vy; this.opacity += this.dop; if (this.opacity > 1) { this.opacity = 1; this.dop *= -1; } if (this.opacity < 0 || this.y > this.ymax) { this.replace(); } if (!((0 < (ref = this.x) && ref < this.xmax))) { this.x = (this.x + this.xmax) % this.xmax; } return drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")"); }; return Confetti; })(); confetti = (function() { var j, ref, results; results = []; for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) { results.push(new Confetti); } return results; })(); window.step = function() { var c, j, len, results; requestAnimationFrame(step); context.clearRect(0, 0, w, h); results = []; for (j = 0, len = confetti.length; j < len; j++) { c = confetti[j]; results.push(c.draw()); } return results; }; step(); }).call(this);