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

**URL:** <https://discourse.processing.org/t/p5-js-trouble-with-clicking-buttons-and-make-object-move-around-on-canvas/15242>\
**Category:** Coding Questions\
**Created:** [November 5, 2019, 2:06am UTC](https://discourse.processing.org/t/p5-js-trouble-with-clicking-buttons-and-make-object-move-around-on-canvas/15242 "2019-11-05T02:06:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jenny1227](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@Jenny1227](https://discourse.processing.org/u/Jenny1227)\
**Post date:** [November 5, 2019, 2:06am UTC](https://discourse.processing.org/t/p5-js-trouble-with-clicking-buttons-and-make-object-move-around-on-canvas/15242/1 "2019-11-05T02:06:14Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 5, 2019, 2:29am UTC](https://discourse.processing.org/t/p5-js-trouble-with-clicking-buttons-and-make-object-move-around-on-canvas/15242/2 "2019-11-05T02:29:04Z")

</div>

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](https://editor.p5js.org/kll/sketches/kOuNRWtlb)

i changed the program flow little bit, please study

---

<div class="post-metadata">

**Author:** ![Jenny1227](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@Jenny1227](https://discourse.processing.org/u/Jenny1227)\
**Post date:** [November 5, 2019, 6:00am UTC](https://discourse.processing.org/t/p5-js-trouble-with-clicking-buttons-and-make-object-move-around-on-canvas/15242/3 "2019-11-05T06:00:23Z")

</div>

THANK YOU KLL! The code runs really well!