----- Coding Tutorial by Patt Vira ----- 

Name: ASCII Art (with Image)

Video Tutorial: https://youtu.be/4IyeLc6J1Uo

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

let asciiChar = "▒▒▒░░░######******@@@@@@-_+~;:,"

// let asciiChar = " .:-=+*#%@";

​

let img; 

let size = 4; 

let imgSize; 

​

function preload() {

  // Load the image (make sure to replace 'image.jpg' with your image path or URL)

  img = loadImage("radio.png"); 

}

​

function setup() {

  createCanvas(400, 400);

  imgSize = (width / size);

  img.resize(imgSize, imgSize); // Resize the image to match the grid size

  //createLoop({duration: 4, gif: true});

}

​

function draw() {

  background(255);

  img.loadPixels();

  /* ---- Using pixels ---- */

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

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

      let pixelIndex = (i + j * img.width) * 4; // Calculate pixel position in pixel array

      let r = img.pixels[pixelIndex + 0];

      let g = img.pixels[pixelIndex + 1];

      let b = img.pixels[pixelIndex + 2];

      let bright = (r + g + b) / 3; // Calculate the brightness

      let tIndex = floor(map(bright, 0, 255, 0, asciiChar.length)); // Map brightness to ASCII character index

      let x = i * size + size / 2; // X position of the text

      let y = j * size + size / 2; // Y position of the text

      let t = asciiChar.charAt(tIndex); // Get the ASCII character corresponding to the brightness

      stroke(255);

      textSize(size);

      textAlign(CENTER, CENTER);

      text(t, x, y); // Draw the ASCII character at the calculated position

    }

  }

}

​