(function(window) { 'use strict'; let _dpr,_canvas,_context; let _setting,_effect,_textManager; document.addEventListener('DOMContentLoaded',initialize); class Filter { constructor() { } drawRGBBar(context,width,height) { const colorList = ['#fb1b1f','#20fb28','#0902f4']; const barWidth = 5; let index = 0; let x = 0; while (x < width) { context.fillStyle = colorList[index]; context.fillRect(x,0,barWidth,height); x += barWidth; if (colorList.length - 1 <= index++) index = 0; } } drawColorBar(context,width,height,canvas) { const topColorList = ['#b4b4b4','#b4b426','#1bb3b3','#1Ab31e','#b31ab2','#b3191b','#120fb1']; const middleColorList = ['#120fb1','#101010','#b31ab2','#101010','#1bb3b3','#101010','#b4b4b4']; const bottomColorList = ['#091d41','#ebebeb','#2c015b','#101010','#080808','#101010']; const topHeight = Math.ceil(height * .7); const middleHeight = Math.ceil(height * .1); const bottomHeight = Math.ceil(height * .3); const barWidth = Math.ceil(width/topColorList.length); for (let i = 0; i < topColorList.length; i++) { const topColor = topColorList[i]; const middleColor = middleColorList[i]; const x = barWidth * i; context.fillStyle = topColor; context.fillRect(x,0,barWidth,topHeight); context.fillStyle = middleColor; context.fillRect(x,topHeight,barWidth,middleHeight); } const bottomWidth = Math.ceil(width/bottomColorList.length); for (let i = 0; i < bottomColorList.length; i++) { const color = bottomColorList[i]; const x = bottomWidth * i; const y = topHeight + middleHeight; context.fillStyle = color; context.fillRect(x,y,bottomWidth,bottomHeight); } } drawTile(context,width,height) { let cloneCanavs = document.createElement('canvas'); let cloneContext = cloneCanavs.getContext('2d'); cloneCanavs.width = width; cloneCanavs.height = height; const imageData = context.getImageData(0,0,width,height); cloneContext.putImageData(imageData,0,0); const tileWidth = Math.ceil(width / 3); const ratio = tileWidth/width; const tileHeight = Math.ceil(height * ratio); for (let i = 0; i < 3; i++) { for (let l = 0; l < 3; l++) { const x = tileWidth * i; const y = tileHeight * l; context.drawImage(cloneCanavs,0,0,width,height,x,y,tileWidth,tileHeight); } } } grayScale(context,width,height) { let imageData = context.getImageData(0,0,width,height); let data = imageData.data; for (let i = 0; i < data.length; i += 4) { const color = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = data[i + 1] = data[i + 2] = color; } context.putImageData(imageData,0,0); } sepia(context,width,height) { let imageData = context.getImageData(0,0,width,height); let data = imageData.data; for (let i = 0; i < data.length; i += 4) { data[i] = data[i] * 1.07; data[i + 1] = data[i + 1] * .74; data[i + 2] = data[i + 2] * .43; } context.putImageData(imageData,0,0); } inversion(context,width,height) { let imageData = context.getImageData(0,0,width,height); let data = imageData.data; for (let i = 0; i < data.length; i += 4) { data[i] = 255 - data[i]; data[i + 1] = 255 - data[i + 1]; data[i + 2] = 255 - data[i + 2]; } context.putImageData(imageData,0,0); } threshold(context,width,height) { const threshold = 255 * .5; let imageData = context.getImageData(0,0,width,height); let data = imageData.data; for (let i = 0; i < data.length; i += 4) { const color = threshold < (data[i] + data[i+1] + data[i+2]) / 3 ? 255 : 0; data[i] = data[i + 1] = data[i + 2] = color; } context.putImageData(imageData,0,0); } gammaCorrection(context,width,height) { const gamma = 2; const correctify = val => 255 * Math.pow(val / 255, 1 / gamma); let imageData = context.getImageData(0,0,width,height); let data = imageData.data; for (let i = 0; i < data.length; i += 4) { data[i] = correctify(data[i]); data[i + 1] = correctify(data[i + 1]); data[i + 2] = correctify(data[i + 2]); } context.putImageData(imageData,0,0); } blur(context,width,height) { let imageData = context.getImageData(0,0,width,height); let data = imageData.data; let cloneData = data.slice(); const avgColor = (color, i) => { const prevLine = i - (width * 4); const nextLine = i + (width * 4); const sumPrevLineColor = cloneData[prevLine-4+color] + cloneData[prevLine+color] + cloneData[prevLine+4+color]; const sumCurrLineColor = cloneData[i -4+color] + cloneData[i +color] + cloneData[i +4+color]; const sumNextLineColor = cloneData[nextLine-4+color] + cloneData[nextLine+color] + cloneData[nextLine+4+color]; return (sumPrevLineColor + sumCurrLineColor + sumNextLineColor) / 9; }; for (let i = width * 4; i < data.length - (width * 4); i += 4) { if (i % (width * 4) === 0 || i % ((width * 4) + 300) === 0) { } else { data[i] = avgColor(0, i); data[i + 1] = avgColor(1, i); data[i + 2] = avgColor(2, i); } } context.putImageData(imageData,0,0); } sharpen(context,width,height) { let imageData = context.getImageData(0,0,width,height); let data = imageData.data; const cloneData = data.slice(); const sharpedColor = (color, i) => { const sub = -1; const main = 10; const prevLine = i - (width * 4); const nextLine = i + (width * 4); const sumPrevLineColor = (cloneData[prevLine-4+color] * sub) + (cloneData[prevLine+color] * sub ) + (cloneData[prevLine+4+color] * sub); const sumCurrLineColor = (cloneData[i -4+color] * sub) + (cloneData[i +color] * main) + (cloneData[i +4+color] * sub); const sumNextLineColor = (cloneData[nextLine-4+color] * sub) + (cloneData[nextLine+color] * sub ) + (cloneData[nextLine+4+color] * sub); return (sumPrevLineColor + sumCurrLineColor + sumNextLineColor) * .5; }; for (let i = width * 4; i < data.length - (width * 4); i += 4) { if (i % (width * 4) === 0 || i % ((width * 4) + 300) === 0) { } else { data[i] = sharpedColor(0, i); data[i + 1] = sharpedColor(1, i); data[i + 2] = sharpedColor(2, i); } } context.putImageData(imageData,0,0); } median(context,width,height) { let imageData = context.getImageData(0,0,width,height); let data = imageData.data; const cloneData = data.slice(); const getMedian = (color, i) => { const prevLine = i - (width * 4); const nextLine = i + (width * 4); const colors = [ cloneData[prevLine-4+color], cloneData[prevLine+color], cloneData[prevLine+4+color], cloneData[i -4+color], cloneData[i +color], cloneData[i +4+color], cloneData[nextLine-4+color], cloneData[nextLine+color], cloneData[nextLine+4+color], ]; colors.sort((a, b) => a - b); return colors[Math.floor(colors.length * .5)]; }; for (let i = width * 4; i < data.length - (width * 4); i += 4) { if (i % (width * 4) === 0 || i % ((width * 4) + 300) === 0) { } else { data[i] = getMedian(0, i); data[i + 1] = getMedian(1, i); data[i + 2] = getMedian(2, i); } } context.putImageData(imageData,0,0); } emboss(context,width,height) { let imageData = context.getImageData(0,0,width,height); let data = imageData.data; const cloneData = data.slice(); const getColor = (color, i) => { const prevLine = i - (width * 4); return ((cloneData[prevLine-4+color] * -1) + cloneData[i+color]) + (255 * .5); }; for (let i = width * 4; i < data.length - (width * 4); i += 4) { if (i % (width * 4) === 0 || i % ((width * 4) + 300) === 0) { } else { data[i] = getColor(0, i); data[i+1] = getColor(1, i); data[i+2] = getColor(2, i); } } context.putImageData(imageData,0,0); } mosic(context,width,height) { let imageData = context.getImageData(0,0,width,height); let data = imageData.data; const cloneData = data.slice(); const avgColor = (i, j, color) => { const prev = (((i - 1) * width) + j) * 4; const curr = (( i * width) + j) * 4; const next = (((i + 1) * width) + j) * 4; const sumPrevLineColor = cloneData[prev-4+color] + cloneData[prev+color] + cloneData[prev+4+color]; const sumCurrLineColor = cloneData[curr-4+color] + cloneData[curr+color] + cloneData[curr+4+color]; const sumNextLineColor = cloneData[next-4+color] + cloneData[next+color] + cloneData[next+4+color]; return (sumPrevLineColor + sumCurrLineColor + sumNextLineColor) / 9; }; for (let i = 1; i < width; i += 3) { for (let j = 1; j < height; j += 3) { const prev = (((i - 1) * width) + j) * 4; const curr = (( i * width) + j) * 4; const next = (((i + 1) * width) + j) * 4; // r,g,b length == 3 for (let color = 0; color < 3; color++) { data[prev-4+color] = data[prev+color] = data[prev+4+color] = avgColor(i, j, color); data[curr-4+color] = data[curr+color] = data[curr+4+color] = avgColor(i, j, color); data[next-4+color] = data[next+color] = data[next+4+color] = avgColor(i, j, color); } } } context.putImageData(imageData,0,0); } extendColor(context,width,height) { const data = context.getImageData(0,0,width,height).data; const extendLine = Math.round(Math.random() * height); const startIndex = 4 * width * extendLine; for (let i = 0; i < width; i++) { const index = startIndex + i * 4; let r = data[index]; let g = data[index + 1]; let b = data[index + 2]; let a = data[index + 3]; if (a == 0) r = g = b = 255; context.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')'; context.fillRect(i,0,1,height); } } glitch(context,width,height) { const imageData = context.getImageData(0,0,width,height); const data = imageData.data; const length = width * height; const factor = Math.random() * 10; let randR = Math.floor(Math.random() * factor); let randG = Math.floor(Math.random() * factor) * 3; let randB = Math.floor(Math.random() * factor); for (let i = 0; i < length; i++) { let r = data[(i + randR) * 4]; let g = data[(i + randG) * 4 + 1]; let b = data[(i + randB) * 4 + 2]; if (r + g + b == 0) r = g = b = 255; data[i * 4] = r; data[i * 4 + 1] = g; data[i * 4 + 2] = b; data[i * 4 + 3] = 255; } context.putImageData(imageData,0,0); } glitchWave(context,width,height,renderLineHeight,cuttingHeight) { var imageData = context.getImageData(0,renderLineHeight,width,cuttingHeight); context.putImageData(imageData,0,renderLineHeight - 10); } glitchSlip(context,width,height,waveDistance) { const startHeight = height * Math.random(); const endHeight = startHeight + 30 + (Math.random() * 40); for (let h = startHeight; h < endHeight; h++) { if (Math.random() < .1) h++; let imageData = context.getImageData(0, h, width, 1); context.putImageData(imageData, Math.random() * waveDistance - (waveDistance*.5), h); } } glitchColor(context,width,height,waveDistance) { const startHeight = height * Math.random(); const endHeight = startHeight + 30 + (Math.random() * 40); let imageData = context.getImageData(0, startHeight, width, endHeight); let data = imageData.data; let length = width * height; let r = 0; let g = 0; let b = 0; for (let i = 0; i < length; i++) { if (i % width === 0){ r = i + Math.floor((Math.random() -.5) * waveDistance); g = i + Math.floor((Math.random() -.5) * waveDistance); b = i + Math.floor((Math.random() -.5) * waveDistance); } data[i *4] = data[r * 4]; data[i * 4 + 1] = data[g * 4 + 1]; data[i * 4 + 2] = data[b * 4 + 2]; } context.putImageData(imageData, 0, startHeight); } horizontalMirror(context,width,height) { let imageData = context.getImageData(0,0,width,height); let data = imageData.data; for (let i = 0; i < height; i++) { for (let j = 0; j < width; j++) { const off = (i * width + j) * 4; const dstOff = (i * width + (width - j - 1)) * 4; data[dstOff] = data[off]; data[dstOff + 1] = data[off + 1]; data[dstOff + 2] = data[off + 2]; data[dstOff + 3] = data[off + 3]; } } context.putImageData(imageData,0,0); } rGBShift(context,width,height) { let imageData = context.getImageData(0,0,width,height); let data = imageData.data; let plusData = []; let minusData = []; let isHorizontal = true; let radius = '1.25%'; if (typeof radius == 'string') { let radius_chars = radius.split(''); if (radius_chars[radius_chars.length - 1] == '%') { radius = radius.replace('%','') / 1; if (isHorizontal) radius = parseInt(width * radius * .01); else radius = parseInt(height * radius * .01); } } for(let y = 0; y < height; y++) { for(let x = 0; x < width; x++) { let index = ((width * y) + x ) * 4; let plusIndex = 0; let minusIndex = 0; if (isHorizontal) { plusIndex = ((width * y) + (x + radius)) * 4; minusIndex = ((width * y) + (x + radius * -1)) * 4; } else { plusIndex = ((width * (y + radius)) + x) * 4; minusIndex = ((width * (y + radius * -1)) + x) * 4; } for (let i = 0; i <= 3; i++) { plusData[plusIndex + i] = data[index + i]; minusData[minusIndex + i] = data[index + i]; } } } for(let i = 0, length = data.length; i < length; i += 4) { if (typeof plusData[i] != 'undefined') { data[i] = plusData[i]; data[i + 1] = plusData[i + 1] * .5 + data[i + 1] * .5; data[i + 2] = plusData[i + 2]; } if (typeof minusData[i] != 'undefined') { data[i] = minusData[i] * .5 + data[i] * .5; data[i + 1] = data[i + 1]; data[i + 2] = minusData[i + 2]; } data[i + 3] = 255; } context.putImageData(imageData,0,0); } } class Effect { constructor() { this.draw = null; this.filter = new Filter(); this.setProcessing(); this.setLife(); } setLife() { this.life = getRangeNumber(0,100); this.dying = getRangeNumber(2,15); } setProcessing() { const processing = [this.filter.drawTile,this.filter.extendColor,this.filter.grayScale]; this.draw = processing[Math.floor(Math.random() * processing.length)]; } counter(context,width,height) { this.life--; this.filter.glitchSlip(context,width,height,20); if (this.life <= 0) this.draw(context,width,height); if (this.life <= -this.dying) { this.setProcessing(); this.setLife(); } } } class Text { constructor(x,y,text,color,width,height) { this.x = x; this.y = y; this.text = text; this.color = color; this.direction = { x:[-1,1][Math.floor(Math.random()*2)], y:[-1,1][Math.floor(Math.random()*2)] } this.setRandomVelocity(); this.width = width; this.height = height; this.isCollision = false; } setRandomVelocity() { this.velocity = { x:getRangeNumber(1,3),y:getRangeNumber(1,3) }; } update(minX,minY,maxX,maxY) { maxX -= this.width; maxY -= this.height; if (maxX <= this.x) { this.direction.x = -1; this.isCollision = true; } if (this.x <= minX) { this.direction.x = 1; this.isCollision = true; } if (maxY <= this.y) { this.direction.y = -1; this.isCollision = true; } if (this.y <= minY) { this.direction.y = 1; this.isCollision = true; } if (this.isCollision) this.setRandomVelocity(); this.x += this.velocity.x * this.direction.x; this.y += this.velocity.y * this.direction.y; } draw(context) { context.fillStyle = this.color; context.fillText(this.text,this.x,this.y); } } class TextManager { constructor() { this.isSaturation = false; this.objectList = []; this.colorList = ['#ff0000','#ff007f','#ff00ff','#7f00ff','#0000ff','#007fff','#00ffff','#00ff7f','#00ff00','#7fff00','#ffff00','#ff7f00']; } addText(context,text,fontsize,x,y,parentObject) { context.font = fontsize + 'px "Press Start 2P", cursive,sans-serif'; context.textBaseline = 'top'; const color = this.colorList[Math.floor(Math.random() * this.colorList.length)]; const textWidth = context.measureText(text).width; const textHeight = this.getOffsetHeight(text,context.font); let object = new Text(x,y,text,color,textWidth,textHeight); if (parentObject) { object.direction.x = parentObject.direction.x; object.direction.y = parentObject.direction.y; } this.objectList.push(object); } getOffsetHeight(text,font) { let span = document.createElement('span'); span.appendChild(document.createTextNode(text)); let parent = document.createElement('p'); parent.id = 'textMetrics'; parent.appendChild(span); document.body.insertBefore(parent, document.body.firstChild); span.style.cssText = 'font: ' + font + '; white-space: nowrap; display: inline;'; let height = span.offsetHeight; parent.parentNode.removeChild(parent); return height; } update(context,text,fontsize,width,height) { if (!this.isSaturation && 300 <= this.objectList.length) this.isSaturation = true; if (this.isSaturation) { if (this.objectList.length <= 1) this.isSaturation = false; this.objectList.pop(); } if (this.objectList.length <= 0) this.addText(context,text,fontsize,width * .5,height * .5); const length = this.objectList.length; for (let i = 0; i < length; i++) { let object = this.objectList[i]; object.update(0,0,width,height); if (object.isCollision && .95 < Math.random() && !this.isSaturation) { object.isCollision = false; this.addText(context,text,fontsize,object.x,object.y,object); } } return this; } draw(context) { for (let object of this.objectList) { object.draw(context); } } } function initialize() { _dpr = window.devicePixelRatio || 1; _canvas = document.getElementById('canvas'); _context = _canvas.getContext('2d'); _effect = new Effect(); window.addEventListener('resize',onResize,false); setCanvasSize(); setup(); window.requestAnimationFrame(render); } function setCanvasSize() { _canvas.width = window.innerWidth; _canvas.height = window.innerHeight; } function onResize() { setCanvasSize(); setup(); } function setup() { _textManager = new TextManager(); } function render(timestamp) { let text = 'Hello world.'; let fontsize = parseFloat(window.innerWidth * .02); let width = _canvas.width; let height = _canvas.height; _context.clearRect(0,0,width,height); _context.fillStyle = '#000'; _context.fillRect(0,0,width,height); _textManager.update(_context,text,fontsize,width,height).draw(_context); _effect.counter(_context,width,height); window.requestAnimationFrame(render); } function getRangeNumber(min, max) { return Math.random() * (max - min) + min; } })(window);

Digital text