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);
}
}