how can i take an input from the user in p5.js code?

i want to take an input from the user and after the input the code must run... I want to change the button "click me" as input from the user the code must run after getting input from the user.

var playAnim=false;
var pic1;
var pic2;
var pic3;
let button;
let posX=0
let posY=0
const rightwall=350;
const height=600;

function preload(){
  pic1=loadImage("5.png")
  pic2=loadImage("iron.jpg")
  pic3=loadImage("slagmetal.jpg")
  
}
function setup() {
  createCanvas(600, 600);
  background("blue");
  button =createButton('CLICK ME');
  button.position(200,250);
  button.mousePressed(changeBG);
  noLoop();
}
function changeBG() {
  let val = random(65);
  background(val);
  loop();
  playAnim=true;
}

function draw() {
  background(220);
  text(mouseX + "," + mouseY, 20, 20);

 
  img1=image(pic1, 300, 30, 150, 200)
  img2=image(pic2, posX, 70, 100, 100)
  img3=image(pic3,posX, posY-300,150, 200)
  if (playAnim) {
  posX=constrain(posX+1,0,rightwall-30)
  posY=constrain(posX-1,posY,height-50)
  }
  

 // posX=constrain(posX+1,0,rightwall-30)
 // posY=constrain(posX-1,posY,height-50)
}

i want to take an input at "click me" button and after that the code must run. the code consists of two moving images and after taking an input from user the code must run.

Solution 1:

There no need to add event listeners , as per documentation of P5.js , on button.mousePressed(changeBG); the function will run , you can add logic of moving images inside the function of changeBg , function draw() call the function inside changeBG method body.

var playAnim=false;
var pic1;
var pic2;
var pic3;
let button;
let posX=0
let posY=0
const rightwall=350;
const height=600;

function preload(){
  pic1=loadImage("5.png")
  pic2=loadImage("iron.jpg")
  pic3=loadImage("slagmetal.jpg")
  
}
function setup() {
  createCanvas(600, 600);
  background("blue");
  button =createButton('CLICK ME');
  button.position(200,250);
  button.mousePressed(changeBG);
  noLoop();
}
function changeBG() {
  let val = random(65);
  background(val);
  loop();
  playAnim=true;
  draw();
  // background will be overwritten with 220
}

function draw() {
  background(220);
  text(mouseX + "," + mouseY, 20, 20);

 
  img1=image(pic1, 300, 30, 150, 200)
  img2=image(pic2, posX, 70, 100, 100)
  img3=image(pic3,posX, posY-300,150, 200)
  if (playAnim) {
  posX=constrain(posX+1,0,rightwall-30)
  posY=constrain(posX-1,posY,height-50)
  }
  

 // posX=constrain(posX+1,0,rightwall-30)
 // posY=constrain(posX-1,posY,height-50)
}