final project | Notion

concept: ascii art +

</aside>

initial sketch: https://editor.p5js.org/tinaaayu/sketches/XV-2VyZZX

inspo: https://thecodingtrain.com/challenges/166-image-to-ascii

let cols = 60;
let rows = 60; 
let video;
let slider;
let asciiDiv;

const density = "Ñ@#W$?!abc;:+=-,._"; // density string

function setup() {
  createCanvas(600, 600);
  video = createCapture(VIDEO);
  video.size(cols, rows);
  video.hide();

  asciiDiv = createDiv();
  asciiDiv.position(10, 50);

  slider = createSlider(0, 255, 0);
  slider.position(10, 10);
}

function draw() {
  background(0);
  video.loadPixels();

  let asciiImage = "";

  for (let j = 0; j < rows; j++) {
    for (let i = 0; i < cols; 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 - 1)); // map brightness to the density array
      const c = density.charAt(charIndex);

      // apply gradient from green-pink/lightblue-red
      let col;
      const threshold = slider.value();

      if (avg > threshold) {

        col = lerpColor(color('hotpink'), color('lightgreen'), (avg - threshold) / (255 - threshold));
      } else {

        col = lerpColor(color('lightblue'), color('red'), (threshold - avg) / threshold);
      }

      let hexCol = col.levels[0].toString(16) + col.levels[1].toString(16) + col.levels[2].toString(16);
      if (c == " ") asciiImage += "&nbsp;";
      else asciiImage += `<span style="color: #${hexCol}">${c}</span>`;
    }
    asciiImage += '<br/>';
  }

  asciiDiv.html(asciiImage);
}

let cols = 60; 
let rows = 60;
let video;
let slider;

function setup() {
  createCanvas(600, 600);
  video = createCapture(VIDEO);
  video.size(cols, rows); 
  video.hide();

  slider = createSlider(0, 255, 0);
  slider.position(10, 10); 
}

function draw() {
  background(0);
  video.loadPixels(); 

  // ascii characters array
  const asciiChars = ['3', '!', ':', '-', '=', '?', '*', '^', '%', '@'];

  let threshold = slider.value();

  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      let index = (x + y * video.width) * 4; // get pixel index
      let r = video.pixels[index + 0]; 
      let g = video.pixels[index + 1]; 
      let b = video.pixels[index + 2]; 
      let bright = (r + g + b) / 3;

      // map brightness
      let char;
      let col;

      if (bright > threshold) {
        // green to pink gradient
        let charIndex = Math.floor(map(bright, threshold, 255, 0, asciiChars.length - 1));
        char = asciiChars[charIndex];
        
        col = lerpColor(color('hotpink'), color('lightgreen'), (bright - threshold) / (255 - threshold));
      } else {
        // light blue to red gradient
        let charIndex = Math.floor(map(bright, 0, threshold, 0, asciiChars.length - 1));
        char = asciiChars[charIndex];
        
        col = lerpColor(color('lightblue'), color('red'), (threshold - bright) / threshold);
      }

      fill(col);
      textSize(14); 
      textAlign(CENTER, CENTER);
      text(char, x * 12 + 10, y * 12 + 40);
    }
  }
}