Así que últimamente he explorado un poco el tipo de efecto de retraso de la cámara en P5.js, y simplemente no podía entender algo: cuando intento reemplazar la fuente img de "createCapture (VIDEO)" a "loadImage ( "XXXX.gif")" el GIF en movimiento simplemente se detuvo y se convirtió en una imagen estática y no tuvo el mismo rendimiento que una captura de cámara en vivo (para retrasar desde el centro hacia afuera).

¿Alguien tiene una mejor idea para ejecutar este código con GIF que logra el mismo efecto?

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