# ASCII Video with GIF

**URL:** <https://discourse.processing.org/t/ascii-video-with-gif/35476>\
**Category:** Coding Questions\
**Created:** [February 28, 2022, 9:01am UTC](https://discourse.processing.org/t/ascii-video-with-gif/35476 "2022-02-28T09:01:47Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![JulienBgr](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@JulienBgr](https://discourse.processing.org/u/JulienBgr)\
**Post date:** [February 28, 2022, 9:01am UTC](https://discourse.processing.org/t/ascii-video-with-gif/35476/1 "2022-02-28T09:01:47Z")

</div>

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.

```auto
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);
    }
  } 
}

```