p5js // Change LIVE capture animation to a gif/moving animation

So lately I have done some exploration on the camera delay sort of effect on P5.js, and I just couldn’t wrap my head around something— When I try to replace the img source from “createCapture(VIDEO)” to “loadImage(“XXXX.gif”)” the moving GIF just stopped and became a static image and did not make the same performance as how a live camera-capturing would (to delay from centre out).

Does anyone have a better idea to run this code with GIF that achieves the same effect?

let cap;
let num =40;
let imgs = [];
let tileNum = 10;


function setup() {
    createCanvas(windowWidth, windowHeight);
    cap = createCapture(VIDEO);
    cap.hide();
    frameRate(24);
    imageMode(CENTER);
}

function draw() {
    background(255);
    
    
    let size = min(cap.width,cap.height);
    let img = createImage(size,size);
    img.copy(cap,(cap.width-size),(cap.height-size)*6.5,size,size,0,0,img.width,img.height);
    
    
    imgs.unshift(img);
    if(imgs.length >num){
        imgs.pop();
    }
    


    let stepX  = width/tileNum;
    let stepY = stepX * img.height /img.width;
    
    let maxDist = dist(width/2,height/2,-10,-10);
    
    if(imgs.length == num){
        for(let y = 0; y< height+10; y += stepY){
            for(let x =0; x < width+10; x+= stepX){
                let dis = dist(width/2,height/2,x,y);
                let index =  Math.floor(dis/maxDist*num);
                image(imgs[index%num],x,y,stepX,stepY);
                
            }
        }   
    }
    
    
}