let img;

let chars1 = "⋰⋱⋰⋱⋰⋱⋰⋱⋰⋱"; // First set of characters for the initial transition

let chars2 = "‧₊1˚"; // Second set of characters for the reverse transition

let charWidth = 14;

let andaleM;

let transitionSpeed = 0.003; // Speed of transition

let progress = 2; // Progress of the transition

let forward = true; // Direction of transition

​

function preload() {

  img = loadImage("file.jpg"); // Ensure the image path is correct

 // andaleM = loadFont("apple-symbols.ttf");

}

​

function setup() {

  const canvas = createCanvas(800,600);

  img.resize(120, 100); // Resize the image for manageable processing

  img.filter(GRAY); // Convert to grayscale

  textSize(charWidth);

  textAlign(CENTER, CENTER);

  fill('#312783');

  //textFont(andaleM);

}

​

function draw() {

  background('#F7F3E2');

  img.loadPixels();

​

  // Update progress and handle transition direction

  if (forward) {

    progress = min(progress + transitionSpeed, 1); // Increment progress towards full image display

    if (progress === 1) forward = false; // Switch direction at the end of the first transition

  } else {

    progress = max(progress - transitionSpeed, 0); // Decrement progress towards background

    if (progress === 0) forward = true; // Switch direction at the end of the second transition

  }

​

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

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

      let pixelIndex = (y * img.width + x) * 4;

      let r = img.pixels[pixelIndex];

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

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

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

​

      // Choose the character set based on the transition direction

      let currentChars = forward ? chars1 : chars2;

      let transitionThreshold = map(progress, 0, 1, 0, 255);

      let currentChar;

      if (bright <= transitionThreshold) {

        let charIndex = int(map(bright, 0, 255, currentChars.length - 1, 0));

        currentChar = currentChars.charAt(charIndex);

      } else {

        currentChar = "0"; // Background remains white until the transition threshold is reached

      }

​

      let xPos = x * charWidth + charWidth / 2;

      let yPos = y * charWidth + charWidth / 2;

​

      text(currentChar, xPos, yPos);

    }

  }

}

​