let img;

let ascii = "";

let asciiSize = 5;

​

function preload() {

  img = loadImage("image.jpg");

}

​

function setup() {

  createCanvas(img.width, img.height);

  textSize(asciiSize);

  textAlign(CENTER, CENTER);

  noStroke();

  image(img, 0, 0);

  loadPixels();

​

  for (let y = 0; y < height; y += asciiSize) {

    for (let x = 0; x < width; x += asciiSize) {

      let index = (x + y * width) * 4;

      let r = pixels[index];

      let g = pixels[index + 1];

      let b = pixels[index + 2];

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

      let character = brightnessToChar(brightness);

      ascii += character;

      fill(r, g, b);

      text(character, x + asciiSize / 2, y + asciiSize / 2);

    }

    ascii += "\n";

  }

​

  createDiv(ascii);

}

​

function brightnessToChar(brightness) {

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

  let range = 255 / (characters.length - 1);

  let index = floor(brightness / range);

  return characters.charAt(index);

}

​