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(0);
button =createButton('CLICK ME');
button.position(0,0);
button.mousePressed(changeBG);
}
function changeBG() {
let val = random(255);
background(val);
}
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)
posX=constrain(posX+1,0,rightwall-30)
posY=constrain(posX-1,posY,height-50)
}
I have created animations of three images and also added a button named as "click me" .how can i perform an event if i click on the button and after that the images start moving or animating.the images are animating on its own .i want to know how could i code so that after clicking on the button image will start moving.images will not move untill and unless clickme button is clicked.
You could either:
loop() and noLoop() methods: in setup() add noLoop() and in changeBG() add loop()playAnim initialized false, change it to true in changeBG() and in the draw() function, add:if (playAnim) {
posX=constrain(posX+1,0,rightwall-30)
posY=constrain(posX-1,posY,height-50)
}