P5.js : Trouble with clicking buttons and make object move around on canvas

I am really new to p5.js, and I’m trying to find a solution to this.

I have a button. I wish to make my rabbit appear on canvas and jump up and down when the button is clicked. Now the rabbit only appear on canvas with no movement when the button is clicked. I will be really appreciate, if someone could help me to solve this! Thank you!

My code is the following:

let rabbit1;
function setup(){
  createCanvas(800, 600);
  rabbit1=new rabbit();
}

function draw() {
  background(51);
  
  button = createButton("rabbit");
  button.position(100, 100);
  button.mouseReleased(show_rect);
  stroke(rgb);
  strokeWeight(2);
}
  

function show_rect(){
  fill(216,143,73);
  ellipse(270,360,50,150);
  fill(37,216,37);
  ellipse(270,270,20,50);
  rabbit1.move();
  rabbit1.show();
}

class rabbit{
  constructor(){
  this.x=200;
  this.y=200;
  
  }
  move(){
  frameRate(10);
  if (this.y> 250.0) {//if variable d bigger than 1 
    this.y = 200.0;//variable d back to equals to 0
  } else {//otherwise
    this.y += random(20,30);
  }
  }
  show(){
  noStroke();
  fill('#FFFFFF');
  ellipse(this.x,this.y,100,100);
  ellipse(this.x-20,this.y-50,20,140);
  ellipse(this.x+10,this.y-50,20,140);
  ellipse(this.x,this.y+80,80,150);
  ellipse(this.x+20,this.y+150,40,20);
  ellipse(this.x+60,this.y+50,40,20);
  ellipse(this.x-50,this.y+100,50,50);
  fill(0);
  ellipse(this.x+30,this.y-10,30,30);
  }
}
1 Like

hi JENNY,
good code posting, but for p5.js it is even better to show the
online project, so in seconds we can see code and play
https://editor.p5js.org/kll/sketches/kOuNRWtlb

i changed the program flow little bit, please study

1 Like

THANK YOU KLL! The code runs really well!

1 Like