const density1 = ' ?';

let video;

let asciiDiv;

// For displaying the label

let label = "waiting...";

// The classifier

let classifier;

let modelURL = 'https://teachablemachine.withgoogle.com/models/J0UOkIUPS/';

​

​

function preload() {

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

}

​

​

function setup() {

  createCanvas(window.innerWidth, window.innerHeight)

  video = createCapture(VIDEO);

  video.hide();

  //classifyVideo();

}

​

​

// function classifyVideo() {

//   classifier.classify(video, gotResults);

// }

​

function draw() {

  background(0);

​

  // Draw the video

  image(video, 0, 0);

    textSize(32);

  textAlign(CENTER, CENTER);

  fill(255);

  text(label, width / 2, height - 16);

let emoji = "🤳🧍❔";

  let emoji1 = "🤳🧑‍🤝‍🧑❤️";

​

  textSize(32);

  textAlign(CENTER, CENTER);

  text(emoji, width / 6, height / 4);

  text(emoji1, width / 6, height / 2);

}

​

function mousePressed() {

  let emojiSize = 32; // Adjust size as needed

  let emojiSpacing = 20; // Adjust spacing between emojis as needed

  let emojiX = width / 6;

  let emojiY1 = height / 4;

  let emojiY2 = height / 2;

​

  // Calculate bounding boxes for emojis

  let emojiBox1 = {

    x: emojiX - emojiSize / 2,

    y: emojiY1 - emojiSize / 2,

    width: textWidth("🤳"),

    height: emojiSize

  };

​

  let emojiBox2 = {

    x: emojiX - emojiSize / 2,

    y: emojiY2 - emojiSize / 2,

    width: textWidth("🤳"),

    height: emojiSize

  };

​

  // Check if mouse click is inside the bounding box of the first emoji

  if (

    mouseX > emojiBox1.x &&

    mouseX < emojiBox1.x + emojiBox1.width &&

    mouseY > emojiBox1.y &&

    mouseY < emojiBox1.y + emojiBox1.height

  ) {

    singleAscii();

  }

​

  // Check if mouse click is inside the bounding box of the second emoji

  if (

    mouseX > emojiBox2.x &&

    mouseX < emojiBox2.x + emojiBox2.width &&

    mouseY > emojiBox2.y &&

    mouseY < emojiBox2.y + emojiBox2.height

  ) {

    coupleAscii();

  }

}

​

function singleAscii(){

  clear();

  video.loadPixels();

  fill(255, 180, 180);

  stroke(255, 180, 180);

  strokeWeight(1);

  let asciiImage1 = "";

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

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

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

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

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

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

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

      const len = density1.length;

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

      const c = density1.charAt(charIndex);

      text(

        c,

        map(i, 0, video.width, 0, width),

        map(j, 0, video.height, 0, height)

      );

    }

  }

}

​

function coupleAscii() {

    video.loadPixels();

  fill(255, 180, 180);

  stroke(255, 180, 180);

  strokeWeight(1);

  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;

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

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

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

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

      const len = density.length;

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

      const c = density.charAt(charIndex);

      text(

        c,

        map(i, 0, video.width, 0, width),

        map(j, 0, video.height, 0, height)

      );

    }

  }

​

​

​

​

​

​

​

// // STEP 3: Get the classification!

// function gotResults(error, results) {

//   // Something went wrong!

//   if (error) {

//     console.error(error);

//     return;

//   }

//   // Store the label and classify again!

//   label = results[0].label;

//   // console.log(label);

//   classifyVideo();

}