let show = false;

let network, outputs, colors, outputs2;

let size = 12;

let tip = 200, bottom = 0, left = 200, right = 0;

function setup() {

   angleMode(DEGREES);

   textAlign(CENTER, CENTER);

   createCanvas(800, 610);

   background(0);

   img = createImage(28, 28);

   network = new NeuralNetwork(784, 64, 10);

   initializeNetwork(brain => {

       network.wxh.data = brain.weights_input_hidden;

       network.hidden_bias[0].data = brain.hidden_bias;

       network.why.data = brain.weights_hidden_output;

       network.output_bias.data = brain.output_bias;

       console.log("fulfilled");

   });

   colors = [

       color(100, 100, 100),

       color(204, 2, 2),

       color(230, 146, 56),

       color(241, 194, 49),

       color(105, 168, 79),

       color(69, 130, 141),

       color(62, 132, 198),

       color(102, 78, 167),

       color(166, 77, 120),

       color(255, 255, 255),

   ];

}

function draw() {

   strokeWeight(1);

   noFill();

   stroke(255);

   rect(8, 8, 200, 200);

   const shiftY = ((206-bottom)-(tip-10))/2;

   const shiftX = ((206-right)-(left-10))/2;

   const yPos = 10-round(shiftX);

   const xPos = 10-round(shiftY);       

   if(mouseIsPressed && abs(mouseX-108)<=100) {

       if(mouseY < tip) tip = mouseY;

       if(mouseY > bottom) bottom = mouseY;

       if(mouseX < left) left = mouseX;

       if(mouseX > right) right = mouseX;

       stroke(255);

       strokeWeight(size);

       line(mouseX, mouseY, pmouseX, pmouseY);

       let inputs = [];

       let inputs2 = [];

       strokeWeight(2);

       noFill();

       stroke(0);

       rect(8, 8, 200, 200);

       loadPixels();

       img.loadPixels();

       for(let x = 0; x < 28; x ++) {

           for(let y = 0; y < 28; y ++) {

               let average = 0;

               let average2 = 0;

               for(let x2 = 0; x2 < 7; x2 ++) {

                   for(let y2 = 0; y2 < 7; y2 ++) {

                       const index = ((x*7 + x2 + xPos)*width + (y*7 + y2 + yPos)) * 4;

                       const index2 = ((x*7 + x2 + 10)*width + (y*7 + y2 + 10)) * 4;

                       average += isNaN(pixels[index]) ? 0 : pixels[index];

                       average2 += pixels[index2];

                   }

               }

               average /= 49;

               average2 /= 49;

               inputs[x * 28 + y] = average;

               inputs2[x * 28 + y] = average2;

               const index = (x * 28 + y)*4;

               const clr = average;

               img.pixels[index] = clr;

               img.pixels[index+1] = clr;

               img.pixels[index+2] = clr;

               img.pixels[index+3] = 255;

           }

       }

       img.updatePixels();

       outputs = network.classify(inputs);

       outputs2 = network.classify(inputs2);

   }

   noStroke();

   fill(0);

   rect(209, 0, width-209, height);

   rect(0, 209, width, height-209);

   fill(255);

   ellipse(230, 110, size, size);

   if(outputs2) {

       pieChart(outputs2, 350, 100, 80, greatest(outputs2).index);

   } if(outputs) {

       let l = left-10+shiftX, t = tip-10+shiftY, r = right+10+shiftX, b = bottom+10+shiftY

       pieChart(outputs, 350, 300, 80, greatest(outputs).index);

       if(!mouseIsPressed) {

           noFill();

           stroke(255);

           rect(8, 208, 200, 200);

       }

       push();

       translate(0, 198);

       image(img, 10, 10, 196, 196);

       noFill();

       stroke(255);

       rect(l, t, (r)-l, (b)-t)

       line(108, 10, 108, t);       

       line(108, 208, 108, b);       

       line(10, 100, l, 100);       

       line(206, 108, r, 108);  

       pop();

   }

}

function keyPressed() {

   if(key.toString() == "c") {

       left = 200, tip = 200, bottom = 0, right = 0;

       noStroke();

       fill(0);

       rect(0, 0, width, height);

       outputs = null;

       show = false;

   }

   if(key.toString() == "g") {

       console.log("classifying...");

       let inputs = [];

       tip -= 10;

       bottom = 206-bottom;

       left -= 10;

       right = 206-right;

       const shiftY = (bottom-tip)/2;

       const shiftX = (right-left)/2;

       const yPos = 10-round(shiftX);

       const xPos = 10-round(shiftY);

       loadPixels();

       for(let x = 0; x < 28; x ++) {

           for(let y = 0; y < 28; y ++) {

               let average = 0;

               for(let x2 = 0; x2 < 7; x2 ++) {

                   for(let y2 = 0; y2 < 7; y2 ++) {

                       const index = ((x*7 + x2 + xPos)*width + (y*7 + y2 + yPos)) * 4;

                       average += pixels[index];

                   }

               }

               average /= 49;

               inputs[x * 28 + y] = average;

           }

       }

       outputs = network.classify(inputs);

   }

}

function mouseWheel(event) {

   if(size+event.delta < 20 && size+event.delta > 1) {size += event.delta;}

}

function pieChart(arr, x, y, r, greatest) {

   const total = sigma(arr);

   const len = arr.length;

   let angles = [0];

   for(let i = 0; i < len; i ++) {

       if(arr[i] < 0.0001) arr[i] = 0.0001;

       let d = r*2;

       if(i == greatest) {d = d*1.05;}

       noStroke();

       fill(colors[i]);

       angles.push(angles[i] + (arr[i]/total)*360);

       arc(x, y, d, d, angles[i], angles[i+1]);

       const theta = angles[i+1] - angles[i];

       if(theta > 30) {

           const a = angles[i] + theta/2;

           fill(bright(colors[i]));

           textSize(r/2);

           text(i, x+cos(a)*r*0.6, y+sin(a)*r*0.6);

       }

   }

}

function contrast(clr) {

   return color(255-red(clr), 255-green(clr), 255-blue(clr));

}

function bright(clr) {

   return red(clr)+blue(clr)+green(clr) <= 450 ? color(255) : color(0);

}

function sigma(arr) {

   let sum = 0;

   for(let i = 0; i < arr.length; i ++) {

       sum += arr[i];

   }

   return sum;

}

function greatest(arr) {

   let biggest = 0;

   let index = 0;

   for(let i = 0; i < arr.length; i ++) {

       if(arr[i] > biggest) {biggest = arr[i]; index = i;}

   }

   return {val: biggest, index: index};

}

​