const density1 = "  ?";

let video;

let emojiSize = 32; // Size of the emojis

​

function setup() {

  createCanvas(window.innerWidth, window.innerHeight);

  video = createCapture(VIDEO);

  video.hide();

  let button = createButton("reset");

  button.mousePressed(resetSketch);

}

​

function draw() {

  background(0);

  video.loadPixels();

​

  // Draw the video

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

​

  let emoji = "🤳🧍❔";

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

​

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

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

  textSize(32);

  textAlign(CENTER, CENTER);

​

  // Calculate bounding boxes for emojis

  let emojiBox = {

    x: width / 6 - emojiSize / 2,

    y: height / 4 - emojiSize / 2,

    width: textWidth(emoji),

    height: emojiSize,

  };

​

  let emojiBox1 = {

    x: width / 1.2 - emojiSize / 2,

    y: height / 4 - emojiSize / 2,

    width: textWidth(emoji1),

    height: emojiSize,

  };

​

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

  if (

    mouseX > emojiBox.x &&

    mouseX < emojiBox.x + emojiBox.width &&

    mouseY > emojiBox.y &&

    mouseY < emojiBox.y + emojiBox.height

  ) {

    coupleAscii();

  }

​

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

  if (

    mouseX > emojiBox1.x &&

    mouseX < emojiBox1.x + emojiBox1.width &&

    mouseY > emojiBox1.y &&

    mouseY < emojiBox1.y + emojiBox1.height

  ) {

    singleAscii();

  }

}

​

function singleAscii() {

  clear();

  textSize(10);

  background(0);

  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() {

  clear();

  textSize(10);

  background(0);

  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)

      );

    }

  }

}

function resetSketch() {

  clear();

  background(0);

  video.loadPixels();

​

  // Draw the video

  image(video, 0, 0);

​

  push();

  let emoji = "🤳🧍❔";

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

​

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

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

  textSize(32);

  textAlign(CENTER, CENTER);

  pop();

​

  // Calculate bounding boxes for emojis

  let emojiBox = {

    x: width / 6 - emojiSize / 2,

    y: height / 4 - emojiSize / 2,

    width: textWidth(emoji),

    height: emojiSize,

  };

​

  let emojiBox1 = {

    x: width / 6 - emojiSize / 2,

    y: height / 2 - emojiSize / 2,

    width: textWidth(emoji1),

    height: emojiSize,

  };

​

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

  if (

    mouseX > emojiBox.x &&

    mouseX < emojiBox.x + emojiBox.width &&

    mouseY > emojiBox.y &&

    mouseY < emojiBox.y + emojiBox.height

  ) {

    coupleAscii();

  }

​

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

  if (

    mouseX > emojiBox1.x &&

    mouseX < emojiBox1.x + emojiBox1.width &&

    mouseY > emojiBox1.y &&

    mouseY < emojiBox1.y + emojiBox1.height

  ) {

    singleAscii();

  }

}

​