ASCII Video with GIF

p5.js Coding Questions
1

Hey Guys ! I just saw a video on YouTube for ASCII Video (ASCII Video (Coding Challenge 166) by The Coding Train) and tried this for myself. Furthermore I want to include a GIF, but have some troubles with the implementation. I would be happy for every suggestion.

let image;

function preload() {
  image = loadImage("testimg.png"); //PNG
  //image = createImg("testgif.gif"); //GIF
}

function setup() {
  createCanvas(400, 400); 
}

function draw() {
  background(0);
  
  let w = width / image.width;
  let h = height / image.height;
  image.loadPixels();
  for (let i = 0; i < image.width; i++) {
    for (let j = 0; j < image.height; j++) {
      const pixelIndex = (i + j * image.width) * 4;
      const r = image.pixels[pixelIndex + 0];
      const g = image.pixels[pixelIndex + 1];
      const b = image.pixels[pixelIndex + 2];
      const avg = (r + g + b) / 3;
      
      noStroke();
      fill(avg);
          
      textSize(w*1.4);
      textAlign(CENTER, CENTER);
      text('A' , i * w + w * 0.5, j * h + h * 0.5);
    }
  } 
}