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