quiero tomar una entrada del usuario y después de la entrada el código debe ejecutarse... Quiero cambiar el botón "haz clic en mí" como entrada del usuario, el código debe ejecutarse después de recibir la entrada del usuario.
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) }quiero tomar una entrada en el botón "haz clic en mí" y luego el código debe ejecutarse. el código consta de dos imágenes en movimiento y después de recibir una entrada del usuario, el código debe ejecutarse.
No es necesario agregar detectores de eventos, según la documentación de P5.js, en button.mousePressed(changeBG); la función se ejecutará, puede agregar la lógica de las imágenes en movimiento dentro de la función de changeBg, la función draw() llama a la función dentro del cuerpo del método changeBG.
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) }intenta hacer esto
if (key == //you enter the input that user will type) { // enter your code }Vaya a https://www.codecademy.com/courses/learn-p5js/lessons/p5js-interaction/exercises/p5js-using-key-input para obtener más información
Mi código es solo para 1 llave