我如何编码以便每次运行时单击 p5.js 中的按钮？

Question

is there any way so that whenever I click on the button it must run continuously.I have to refresh it every time in order to run it every time. one more thing is there anyway to add list in the buttons like when i click on the button it must show me more options or i have to create different buttons everytime to show it like a menu

var playAnim=false;
var img1
let posX=0
let posY=0
let button;
const rightwall=350;
function preload(){
  img1=loadImage("slag.jpg")
}
function setup() {
  createCanvas(600, 600);
  button =createButton('CLICK ME');
  button.position(250,300);
  button.mousePressed(changeBG);
  noLoop()
}

  function changeBG() {
  let val = random(255);
  background(val);
  loop();
  playAnim=true;
}

function draw() {
  background(220);
  fill('red');
  rect(320,75,170,160)
  fill('grey');
  rect(posX,170,70,30)
  img=image(img1,posX,posY-280,180,200)
  
  posX=constrain(posX+1,0,rightwall-30)
  posY=constrain(posX-1,posY,height-20)
  
}

i want to know how can i code or what code can i add so that whenever i click on the button it runs evertime.it must not stop or i dont have to refresh it every time

Answer 1

Reset the coordinates posX and posY when the animation ends:

posX = constrain(posX+1,0,rightwall-30)
posY = constrain(posX-1,posY,height-20)
if (posX == rightwall-30) {
    posX=0
    posY=0
}

Toggle the animation when the button is clicked:

function changeBG() {
    let val = random(255);
    background(val);
    if (playAnim) {
        noLoop();
        playAnim = false;
    } else {
        loop();
        playAnim = true;
    }
}

 var playAnim=false; var img1 let posX=0 let posY=0 let button; const rightwall=350; function preload(){ img1=loadImage("https://raw.githubusercontent.com/Rabbid76/PyGameExamplesAndAnswers/master/resource/icon/Bird64.png") } function setup() { createCanvas(600, 600); button =createButton('CLICK ME'); button.position(250,300); button.mousePressed(changeBG); noLoop() } function changeBG() { let val = random(255); background(val); if (playAnim) { noLoop(); playAnim = false; } else { loop(); playAnim = true; } } function draw() { background(220); fill('red'); rect(320,75,170,160) fill('grey'); rect(posX,170,70,30) image(img1,posX,posY-280,180,200) posX = constrain(posX+1,0,rightwall-30) posY = constrain(posX-1,posY,height-20) if (posX == rightwall-30) { posX=0 posY=0 } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

---

Alternatively, you can make the animation dependent on playAnim :

function changeBG() {
    let val = random(255);
    background(val);
    playAnim = !playAnim;
}

if (playAnim) {
    posX = constrain(posX+1,0,rightwall-30)
    posY = constrain(posX-1,posY,height-20)
    if (posX == rightwall-30) {
        posX=0
        posY=0
    }
}

 var playAnim=false; var img1 let posX=0 let posY=0 let button; const rightwall=350; function preload(){ img1=loadImage("https://raw.githubusercontent.com/Rabbid76/PyGameExamplesAndAnswers/master/resource/icon/Bird64.png") } function setup() { createCanvas(600, 600); button =createButton('CLICK ME'); button.position(250,300); button.mousePressed(changeBG); } function changeBG() { let val = random(255); background(val); playAnim =;playAnim; } function draw() { background(220); fill('red'), rect(320,75,170;160) fill('grey'), rect(posX,170,70,30) image(img1,posX,posY-280,180,200) if (playAnim) { posX = constrain(posX+1,0,rightwall-30) posY = constrain(posX-1,posY,height-20) if (posX == rightwall-30) { posX=0 posY=0 } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>