​

// Classifier Variable

let classifier;

// Model URL

let imageModelURL = 'https://teachablemachine.withgoogle.com/models/sToGbmi4h/';

​

//text variables

const densityY = '     .*  yellow YELLOW'

const densityG = '     .*  green GREEN'

const densityR = '     .*  red RED'

const densityB = '     .*  blue BLUE'

​

//hex color variables 

let yellowHex = '#f5d400';

let greenHex = '#34c240';

let redHex = '#eb3326';

let blueHex = '#2b60ff';

​

let video;

let asciiDiv; //div where the text image is displayed

​

//teachable machine stuff

let flippedVideo;

// To store the classification

let label = "";

​

//consent

let button;

let back;

​

​

//for teachable machine

function preload(){

  classifier = ml5.imageClassifier(imageModelURL + 'model.json');

}

​

function setup() {

  //no canvas draws the text image in html 

  noCanvas();

  video = createCapture(VIDEO);

  video.size(64, 48);

  video.hide(); //hides video preview at the top

  asciiDiv = createDiv();

  //teachable machine

 flippedVideo = ml5.flipImage(video)

  // Start classifying

  classifyVideo();

  //button with consent screen

  button = createButton('This camera detects different colors including <span id="grn">green</span>, <span id="rd">red</span>, <span id="bl">blue</span> and <span id="yllw">yellow</span>. Try finding different colored objects and holding them to the camera to see what happens. </br> </br> </br> Click <span id="click">here</span> to view the full camera!');

  button.position(20, 25);

  button.size(680, 600);

  button.mousePressed(button.hide);

}

​

function draw() {

  background(0);

​

        //changes color and text based on teachable machine

 if (label == 'yellow'){

       changeColor(yellowHex, densityY);

   } else if (label == 'green'){

       changeColor(greenHex, densityG);

   } else if(label == 'red'){

       changeColor(redHex, densityR);

   } else if(label == 'blue'){

       changeColor(blueHex, densityB);

   }

}

​

function changeColor(col,txt){

   video.loadPixels();

  let asciiImage = "";

  for (let j = 0; j < video.height; j++) {

    for (let i = 0; i < video.width; i++) {

      const pixelIndex = (i + j * video.width) * 4;

      //gets colors of pixels in video display

      const r = video.pixels[pixelIndex + 0];

      const g = video.pixels[pixelIndex + 1];

      const b = video.pixels[pixelIndex + 2]; 

      const avg = (r + g + b) / 3;

      //plugs the different character variables to be used to produce the image

      const len = txt.length;

      const charIndex = floor(map(avg, 0, 255, 0.5, len));

      const c = txt.charAt(charIndex);

      if (c == " ") asciiImage += " ";

       else asciiImage += c;

    }

    asciiImage += '<br/>';

  }

  //tells image to display inside of div, and styles the css color based on my variables

  asciiDiv.style('color', col);

  asciiDiv.html(asciiImage);

}

​

​

// Get a prediction for the current video frame

function classifyVideo() {

  flippedVideo = ml5.flipImage(video)

  classifier.classify(flippedVideo, gotResult);

}

​

​

// When we get a result

function gotResult(error, results) {

  // If there is an error

  if (error) {

    console.error(error);

    return;

  }

  // The results are in an array ordered by confidence.

  // console.log(results[0]);

  label = results[0].label;

  // Classifiy again!

  classifyVideo();

}