JS1k 2019 | Retro Neural Network

AI learns to draw the letter X with a multi-layer neural network and some 80's style flair.

by Richard

HTML

<canvas id="c1" width="600" height="600"></canvas>

CSS

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

window.a = document.getElementById('c1');
window.b = document.body;
window.c = a.getContext('2d');

c.fillStyle="#fff";c.font="bold 80px serif";c.fillText("X",0,58);var h=c.getImageData(0,0,60,60).data,l=[],n=!0,p=[2,24,16,1],q=.4,r=[],t=[],u=[],v=[],x=[],y=[];function z(){return Array(A).fill(0).map(function(){return Math.random()})}for(var B=0;3>=B;B++){var A=p[B];v[B]=Array(A).fill(0);y[B]=Array(A).fill(0);u[B]=Array(A).fill(0);if(0<B){r[B]=z();t[B]=Array(A);x[B]=Array(A);for(var C=0;C<A;C++){var D=p[B-1];t[B][C]=Array(D).fill(0);x[B][C]=Array(D).fill(0)}}}
function E(g){u[0]=g;for(var b=null,d=1;3>=d;d++){for(b=0;b<p[d];b++){for(var e=t[d][b],k=r[d][b],f=0;f<e.length;f++)k+=e[f]*g[f];u[d][b]=1/(1+Math.exp(-k))}b=g=u[d]}return b}
function F(){q*=.999;for(var g=0;g<l.length;g++){var b=l[g];E(b.input);b=b.a;for(var d=3;0<=d;d--)for(var e=0;e<p[d];e++){var k=u[d][e],f=0;if(3===d)f=b[e]-k;else for(var m=v[d+1],w=0;w<m.length;w++)f+=m[w]*t[d+1][w][e];y[d][e]=f;v[d][e]=f*k*(1-k)}for(b=1;3>=b;b++)for(d=u[b-1],e=0;e<p[b];e++){k=v[b][e];for(f=0;f<d.length;f++)m=x[b][e][f],m=q*k*d[f]+.1*m,x[b][e][f]=m,t[b][e][f]+=m;r[b][e]+=q*k}}setTimeout(F,0)}var G=0;
function H(){G+=.01;c.clearRect(0,0,a.width,a.height);for(var g=0;60>g;g++)for(var b=0;60>b;b++){var d=[b/60,g/60];n?l.push({input:d,a:[h[4*(60*g+b)]/255]}):(d=255*E(d)[0],c.fillStyle="rgb("+Math.sin(g*G)*d+", "+Math.cos(g*G)*d+", "+Math.sin(g*G)*d+")",c.fillRect(10*b,10*g,10,10))}n=!1;setTimeout(H,50)}H();F();