want to time the images for animation in p5.js?

In p5.js i am creating an animation using images .how can i time frame the images such that after clicking on thee button they must execute the code. i want to execute a code where after clicking the button the images must move towards the p5.png.here i have used 6 images for simulation .how could i animate those images such that after clicking the button they must run or execute the code.

var pic1;
var pic2;
var pic3;
var pic4;
var pic5;
var pic6;
let button;
let posX=0
let posY=0

const rightwall=350;
const height=450;
function preload(){
  pic1=loadImage("5.png")
  pic2=loadImage("Iron ore.jpg")
  pic4=loadImage("blastfurnace.jpg")
  pic5=loadImage("coal2.jpg")
  pic6=loadImage("limestone.jpg")
  pic3=loadImage("slag.jpg")
  
  
}
function setup(){
  createCanvas(600,600);
  background("blue");
  button=createButton("CLICK TO LOAD INTO FURNACE") 
  button.position(150,330);
  button.mousePressed(changeBG);
  
  noLoop();
}
function changeBG() {
  let val = random(65);
  background(val);
  loop();
  playAnim=true;
  draw();
  posX=0;
  posY=0;
  // background will be overwritten with 220
}

function draw() {
  background(220);
 // text(mouseX + "," + mouseY, 20, 20);
  // If the 'a' key is pressed, draw the following text in the canvas
if (key === 'a'){
  textSize(22);
  text('a key was pressed!', width / 2, height / 2);
}
  let s='BLAST FURNACE';
textSize(32);
fill(0,102,153);
 text(s,50, 10,300, 400);
 
  img1=image(pic1, 320, 30, 170,210)
  img2=image(pic2, posX, 70, 70, 70)
  img4=image(pic4,100,350,250,250)
  img5=image(pic5,posX,10,50,50)
  img6=image(pic6,posX,150,70,70)
  img3=image(pic3,posX, posY-300,150, 200)
  if (playAnim) {
  posX=constrain(posX+1,0,rightwall-30)
  posY=constrain(posX-1,posY,height-50)
  }
}