i want to disappear some images after they collide or overlap one another in p5.js.i have created a moving images pattern where an image is standing still and one images moves to overlap the other image.but somehow it is not getting disappear .is there any way of getting them disappear once they overlap each other?

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")
  pic3=loadImage("slag.jpg")
  pic4=loadImage("blastfurnace.jpg")
  pic5=loadImage("coal2.jpg")
  pic6=loadImage("limestone.jpg")
  
  
}
function setup(){
  createCanvas(600,600);
  background("blue");
  button=createButton("CLICK TO LOAD INTO FURNACE") 
  button.position(200,300);
  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, 150, 200)
  img2=image(pic2, posX, 70, 100, 100)
  img3=image(pic3,posX, posY-300,150, 200)
  img4=image(pic4,100,300,300,300)
  img5=image(pic5,posX,10,50,50)
  if (playAnim) {
  posX=constrain(posX+1,0,rightwall-30)
  posY=constrain(posX-1,posY,height-50)
  }
}