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) }Creé animaciones de tres imágenes y también agregué un botón llamado "haz clic en mí". ¿Cómo puedo realizar un evento si hago clic en el botón y luego las imágenes comienzan a moverse o animarse? Las imágenes se animan por sí solas. Quiero saber cómo podría codificar para que después de hacer clic en el botón, la imagen comience a moverse. Las imágenes no se moverán hasta que se haga clic en el botón ClickMe.
Podrías:
loop() y noLoop() : en setup() agregue noLoop() y en changeBG() agregue loop()playAnim inicializada en falso, cámbiela a verdadera en changeBG() y en la función draw() , agregue: if (playAnim) { posX=constrain(posX+1,0,rightwall-30) posY=constrain(posX-1,posY,height-50) }