/* Matrix code rain Demo write up here: http://neilcarpenter.com/labs/matrix-rain Uses matrix font: https://www.dafont.com/matrix-code-nfi.font and stats.js: https://github.com/mrdoob/stats.js/ If FPS is super low, try making browser window narrower - crap, I know, will work on it! */ // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating // requestAnimationFrame polyfill by Erik Möller // fixes from Paul Irish and Tino Zijdel (function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }()); // stats var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild( stats.domElement ); var M = { settings: { COL_WIDTH: 20, COL_HEIGHT: 25, VELOCITY_PARAMS: { min: 4, max: 8 }, CODE_LENGTH_PARAMS: { min: 20, max: 40 } }, animation: null, c: null, ctx: null, lineC: null, ctx2: null, WIDTH: window.innerWidth, HEIGHT: window.innerHeight, COLUMNS: null, canvii: [], // font from here https://www.dafont.com/matrix-code-nfi.font font: '30px matrix-code', letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'], codes: [], createCodeLoop: null, codesCounter: 0, init: function () { M.c = document.getElementById( 'canvas' ); M.ctx = M.c.getContext( '2d' ); M.c.width = M.WIDTH; M.c.height = M.HEIGHT; M.ctx.shadowBlur = 0; M.ctx.fillStyle = '#000'; M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT); M.ctx.font = M.font; M.COLUMNS = Math.ceil(M.WIDTH / M.settings.COL_WIDTH); for (var i = 0; i < M.COLUMNS; i++) { M.codes[i] = []; M.codes[i][0] = { 'open': true, 'position': {'x': 0, 'y': 0}, 'strength': 0 }; } M.loop(); M.createLines(); M.createCode(); // not doing this, kills CPU // M.swapCharacters(); window.onresize = function () { window.cancelAnimationFrame(M.animation); M.animation = null; M.ctx.clearRect(0, 0, M.WIDTH, M.HEIGHT); M.codesCounter = 0; M.ctx2.clearRect(0, 0, M.WIDTH, M.HEIGHT); M.WIDTH = window.innerWidth; M.HEIGHT = window.innerHeight; M.init(); }; }, loop: function () { M.animation = requestAnimationFrame( function(){ M.loop(); } ); M.draw(); stats.update(); }, // this used to be used straight after createCode, without using createCanvii - it allowed // the characters within the code streams to be easily changable, but caused huge perf issues // OLDdraw: function() { // var codesLen = M.codes.length; // var codeLen; // var x; // var y; // var text; // var velocity; // var columnIndex; // var strength; // var fadeStrength; // M.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // M.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; // M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT); // M.ctx.globalCompositeOperation = 'source-over'; // for (var i = 0; i < codesLen; i++) { // velocity = M.codes[i][0].velocity; // M.codes[i][0].position.y += velocity; // y = M.codes[i][0].position.y; // x = M.codes[i][0].position.x; // codeLength = M.codes[i].length; // strength = M.codes[i][0].strength; // for (var j = 1; j < codeLength; j++) { // text = M.codes[i][j]; // if (j < 5) { // M.ctx.shadowColor = 'hsl(104, 79%, 74%)'; // M.ctx.shadowOffsetX = 0; // M.ctx.shadowOffsetY = 0; // M.ctx.shadowBlur = 10; // M.ctx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')'; // } else if (j > (codeLength - 4)) { // fadeStrength = j / codeLength; // fadeStrength = 1 - fadeStrength; // M.ctx.shadowOffsetX = 0; // M.ctx.shadowOffsetY = 0; // M.ctx.shadowBlur = 0; // M.ctx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')'; // } else { // M.ctx.shadowOffsetX = 0; // M.ctx.shadowOffsetY = 0; // M.ctx.shadowBlur = 0; // M.ctx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')'; // } // // M.ctx.fillStyle = 'hsl(104, 79%, ' + (M.codes[i][0].strength * 74) + '%)'; // M.ctx.fillText(text, x, (y - (j * M.settings.COL_HEIGHT))); // if ((j === codeLength - 1) && (y - ((j + 1) * M.settings.COL_HEIGHT) > M.HEIGHT)) { // columnIndex = M.codes[i][0].position.x / M.settings.COL_WIDTH; // M.codes[columnIndex][0].open = true; // M.codes[columnIndex][0].position.y = 0; // } // } // } // }, draw: function() { var velocity, height, x, y, c, ctx; // slow fade BG colour M.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; M.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT); M.ctx.globalCompositeOperation = 'source-over'; for (var i = 0; i < M.COLUMNS; i++) { // check member of array isn't undefined at this point if (M.codes[i][0].canvas) { velocity = M.codes[i][0].velocity; height = M.codes[i][0].canvas.height; x = M.codes[i][0].position.x; y = M.codes[i][0].position.y - height; c = M.codes[i][0].canvas; ctx = c.getContext('2d'); M.ctx.drawImage(c, x, y, M.settings.COL_WIDTH, height); if ((M.codes[i][0].position.y - height) < M.HEIGHT){ M.codes[i][0].position.y += velocity; } else { M.codes[i][0].position.y = 0; } } } }, createCode: function() { if (M.codesCounter > M.COLUMNS) { clearTimeout(M.createCodeLoop); return; } var randomInterval = M.randomFromInterval(0, 100); var column = M.assignColumn(); if (column) { var codeLength = M.randomFromInterval(M.settings.CODE_LENGTH_PARAMS.min, M.settings.CODE_LENGTH_PARAMS.max); var codeVelocity = (Math.random() * (M.settings.VELOCITY_PARAMS.max - M.settings.VELOCITY_PARAMS.min)) + M.settings.VELOCITY_PARAMS.min; var lettersLength = M.letters.length; M.codes[column][0].position = {'x': (column * M.settings.COL_WIDTH), 'y': 0}; M.codes[column][0].velocity = codeVelocity; M.codes[column][0].strength = M.codes[column][0].velocity / M.settings.VELOCITY_PARAMS.max; for (var i = 1; i <= codeLength; i++) { var newLetter = M.randomFromInterval(0, (lettersLength - 1)); M.codes[column][i] = M.letters[newLetter]; } M.createCanvii(column); M.codesCounter++; } M.createCodeLoop = setTimeout(M.createCode, randomInterval); }, createCanvii: function(i) { var codeLen = M.codes[i].length - 1; var canvHeight = codeLen * M.settings.COL_HEIGHT; var velocity = M.codes[i][0].velocity; var strength = M.codes[i][0].strength; var text, fadeStrength; var newCanv = document.createElement('canvas'); var newCtx = newCanv.getContext('2d'); newCanv.width = M.settings.COL_WIDTH; newCanv.height = canvHeight; for (var j = 1; j < codeLen; j++) { text = M.codes[i][j]; newCtx.globalCompositeOperation = 'source-over'; newCtx.font = '30px matrix-code'; if (j < 5) { newCtx.shadowColor = 'hsl(104, 79%, 74%)'; newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; newCtx.shadowBlur = 10; newCtx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')'; } else if (j > (codeLen - 4)) { fadeStrength = j / codeLen; fadeStrength = 1 - fadeStrength; newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; newCtx.shadowBlur = 0; newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')'; } else { newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; newCtx.shadowBlur = 0; newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')'; } newCtx.fillText(text, 0, (canvHeight - (j * M.settings.COL_HEIGHT))); } M.codes[i][0].canvas = newCanv; }, swapCharacters: function() { var randomCodeIndex; var randomCode; var randomCodeLen; var randomCharIndex; var newRandomCharIndex; var newRandomChar; for (var i = 0; i < 20; i++) { randomCodeIndex = M.randomFromInterval(0, (M.codes.length - 1)); randomCode = M.codes[randomCodeIndex]; randomCodeLen = randomCode.length; randomCharIndex = M.randomFromInterval(2, (randomCodeLen - 1)); newRandomCharIndex = M.randomFromInterval(0, (M.letters.length - 1)); newRandomChar = M.letters[newRandomCharIndex]; randomCode[randomCharIndex] = newRandomChar; } M.swapCharacters(); }, createLines: function() { M.linesC = document.createElement('canvas'); M.linesC.width = M.WIDTH; M.linesC.height = M.HEIGHT; M.linesC.style.position = 'absolute'; M.linesC.style.top = 0; M.linesC.style.left = 0; M.linesC.style.zIndex = 10; document.body.appendChild(M.linesC); var linesYBlack = 0; var linesYWhite = 0; M.ctx2 = M.linesC.getContext('2d'); M.ctx2.beginPath(); M.ctx2.lineWidth = 1; M.ctx2.strokeStyle = 'rgba(0, 0, 0, 0.7)'; while (linesYBlack < M.HEIGHT) { M.ctx2.moveTo(0, linesYBlack); M.ctx2.lineTo(M.WIDTH, linesYBlack); linesYBlack += 5; } M.ctx2.lineWidth = 0.15; M.ctx2.strokeStyle = 'rgba(255, 255, 255, 0.7)'; while (linesYWhite < M.HEIGHT) { M.ctx2.moveTo(0, linesYWhite+1); M.ctx2.lineTo(M.WIDTH, linesYWhite+1); linesYWhite += 5; } M.ctx2.stroke(); }, assignColumn: function() { var randomColumn = M.randomFromInterval(0, (M.COLUMNS - 1)); if (M.codes[randomColumn][0].open) { M.codes[randomColumn][0].open = false; } else { return false; } return randomColumn; }, randomFromInterval: function(from, to) { return Math.floor(Math.random() * (to - from+ 1 ) + from); }, snapshot: function() { window.open(M.c.toDataURL()); } }; function eventListenerz() { var controlToggles = document.getElementsByClassName('toggle-info'); var controls = document.getElementById('info'); var snapshotBtn = document.getElementById('snapshot'); function toggleControls(e) { e.preventDefault(); controls.className = controls.className === 'closed' ? '' : 'closed'; } for (var j = 0; j < 2; j++) { controlToggles[j].addEventListener('click', toggleControls, false); } snapshotBtn.addEventListener('click', M.snapshot, false); } window.onload = function() { M.init(); eventListenerz(); };