+<!doctype html><html lang=en><head prefix='og: https://ogp.me/ns#'><meta charset=utf-8><link href=https://Rudxain.github.io/RGB-digital-rain rel=canonical><link href=i.svg rel=icon type=image/svg+xml><link href=m.webmanifest rel=manifest><title>RGB digital rain</title><meta content='The Matrix "falling code/letter rain" animation but RGB. No more monochromatic green!' name=description><meta content='RGB, The-Matrix, Digital-Rain, Matrix-rain, falling, code, rain, character, charset, random, animation, screensaver, wallpaper, background' name=keywords><meta content='Ricardo "Rudxain" Fernández Serrata, Ganesh Prasad' name=author><meta content='RGB digital rain' property=og:title><meta content='Rudxain GitHub Page' property=og:site_name><meta content=website property=og:type><meta content=https://Rudxain.github.io/RGB-digital-rain property=og:url><meta content='The Matrix "falling code/letter rain" animation but RGB. No more monochromatic green!' property=og:description><meta content=https://Rudxain.github.io/RGB-digital-rain/res/demo_horizontal.png property=og:image><meta content=1920 property=og:image:width><meta content=1080 property=og:image:height><meta content='Desktop demo of The Matrix RGB digital rain' property=og:image:alt><meta content=https://Rudxain.github.io/RGB-digital-rain/res/demo_vertical.png property=og:image><meta content=720 property=og:image:width><meta content=1280 property=og:image:height><meta content='Mobile demo of The Matrix RGB digital rain' property=og:image:alt><meta content=dark name=color-scheme><meta content=black name=theme-color><style>body,html{background-color:#000;width:100vw;height:100vh;margin:0;border:0;overflow:hidden;display:block}canvas{position:absolute;left:0;top:0;image-rendering:pixelated}</style><canvas id=c>Update browser or enable JS</canvas><script>'use strict';{let a=requestAnimationFrame,b=document,f=Math,c=b.getElementById('c'),g=c.getContext('2d',{alpha:!1,desynchronized:!0}),h=[],i=[],j=(a,b)=>f.random()*(b-a)+a|0,k,l,m,n,o,p,q=32,d=()=>{k=c.width=b.body.clientWidth,l=c.height=b.body.clientHeight;let a=f.ceil(k/q),d=p;for(e(!1);a>h.length;)h.push(0);for(h.length=a;a>i.length;)i.push(i.length%6);i.length=a,e(d)},r=()=>{g.font=`bold ${q}px monospace`;for(let a=0,d=0;a<h.length;a++,d+=q){let b=h[a],e=['f00','ff0','0f0','0ff','00f','f0f'][i[a]];g.fillStyle='#'+e;let c=j(0,94);g.fillText('!?"\'`#$%&()[]{}*+-,./\\|:;<=>@^_~0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'[c],d,b),c=j(64,16384),(b=h[a]=b>c?0:b+q)||(i[a]=(i[a]+1)%6)}},s=c=>{if(!p)return;let b=c-m;(b=f.round(b>255?255:b<0?0:b))&&(g.fillStyle='#000000'+b.toString(16).padStart(2,'0'),g.fillRect(0,0,k,l),m=c),a(s)},e=b=>{!p!= !b&&((p=!p)?(n=setInterval(r,41),a(s)):clearInterval(n))};d(),a(a=>{r(),m=a}),e(!0),addEventListener('resize',()=>{clearTimeout(o),o=setTimeout(d,1500)})}</script>
0 commit comments