const FLIP_CHANCE = 0.002;

let myButton;

let myClearButton;

let myDoodleNet;

let cvs;

let myResults;

let canvasBackup;

let previousConfidence = 0;

let catIndex = NUM_CLASSES;

let updateIndex = 0;

​

function setup() {

  cvs = createCanvas(280, 280);

  cvs.canvas.style.width = "400px";

  cvs.canvas.style.height = "auto";

​

  noStroke();

  initialize();

​

  myClearButton = createButton("Nuke");

  myClearButton.position(420, 100);

  myClearButton.mousePressed(() => {

    nukeCanvas();

  });

​

  myDoodleNet = ml5.imageClassifier("DoodleNet", modelReady);

}

​

function modelReady() {

  console.log("Model Loaded!");

  guessDoodle(); // Perform initial evaluation

}

​

function initialize() {

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

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

      let cc = random(256);

      fill(cc);

      rect(i * 10, j * 10, 10, 10);

    }

  }

}

​

function nukeCanvas() {

  initialize();

  if (previousConfidence > 0.99) {

    guessDoodle();

  }

  previousConfidence = 0;

  updateIndex = 0;

  canvasBackup = null;

  catIndex = NUM_CLASSES;

}

​

function updateRandomTiles() {

  for (let i = 0; i < 28 * 28; i++) {

    let tileX = (i % 28) * 10;

    let tileY = floor(i / 28) * 10;

​

    let cc = get(tileX, tileY);

    let tileColor = random() < FLIP_CHANCE ? 255 - cc[0] : cc[0];

​

    fill(tileColor);

    rect(tileX, tileY, 10, 10);

  }

}

​

function updateRandomTileColors() {

  let tileX = (updateIndex % 28) * 10;

  let tileY = floor(updateIndex / 28) * 10;

​

  let r = random(256);

  let g = random(256);

  let b = random(256);

​

  fill(r, g, b);

  rect(tileX, tileY, 10, 10);

​

  updateIndex = (updateIndex + 1) % (28 * 28);

}

​

function updateTile() {

  let tileX = (updateIndex % 28) * 10;

  let tileY = floor(updateIndex / 28) * 10;

​

  let tileColor = 255 - get(tileX, tileY)[0];

​

  fill(tileColor);

  rect(tileX, tileY, 10, 10);

​

  updateIndex = (updateIndex + 1) % (28 * 28);

}

​

function backupCanvas() {

  canvasBackup = get();

}

​

function restoreCanvas() {

  if (canvasBackup) {

    image(canvasBackup, 0, 0, width, height);

  }

}

​

function guessDoodle() {

  myDoodleNet.classify(cvs, catIndex, gotResults);

}

​

function gotResults(error, results) {

  if (error) {

    console.error(error);

    return;

  }

​

  if (results) {

    myResults = results;

    let currentConfidence = 0;

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

      if (results[i].label === "cat") {

        currentConfidence = results[i].confidence;

        catIndex = i + 1;

        break;

      }

    }

​

    // Backup and restore logic

    if (currentConfidence < previousConfidence) {

      restoreCanvas();

    } else {

      backupCanvas();

      previousConfidence = currentConfidence;

      console.log(

        "Cat building in progress..." + round(currentConfidence * 100, 2) + "%"

      );

    }

​

    if (currentConfidence < 0.99) {

      guessDoodle();

      // updateRandomTiles();

      updateRandomTileColors();

    } else {

      console.log("99% Cat! You may need the last one percent of imagination!");

    }

  }

}

​