# How do I get my shapes to move/animate around the canvas on p5.js?

**URL:** <https://discourse.processing.org/t/how-do-i-get-my-shapes-to-move-animate-around-the-canvas-on-p5-js/24233>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [September 30, 2020, 9:59am UTC](https://discourse.processing.org/t/how-do-i-get-my-shapes-to-move-animate-around-the-canvas-on-p5-js/24233 "2020-09-30T09:59:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [September 30, 2020, 9:59am UTC](https://discourse.processing.org/t/how-do-i-get-my-shapes-to-move-animate-around-the-canvas-on-p5-js/24233/1 "2020-09-30T09:59:03Z")

</div>

Hi everyone, I’m a bit lost in how I could get my shapes that I have created to move around the canvas. So far they are quite static.

Any suggestions or methods I could look into would be great!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 30, 2020, 10:07am UTC](https://discourse.processing.org/t/how-do-i-get-my-shapes-to-move-animate-around-the-canvas-on-p5-js/24233/2 "2020-09-30T10:07:42Z")

</div>

Hello,

say you have `circle(20,25,33);`

that’s x,y and radius.

Now replace 20,25 with a variable x,y

when you add something to the variable, the ball moves.

`x = x + 3; // increase x by 3.`

Now when the ball hits the right wall / screen border, instead you want to add -3.

So again replace 3 by a variable xAdd that can be either 3 or -3:

```auto
x = x + xAdd ; // increase x by xAdd. 

if(x-33 > width) xAdd = -1 * abs(xAdd);  

// (abs gives you the positive amount of xAdd and can never get negative)

```

Also look at section _Motion_ in the examples of the website: [https://www.processing.org/examples/](https://www.processing.org/examples/)

I hope this helps!

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [September 30, 2020, 12:03pm UTC](https://discourse.processing.org/t/how-do-i-get-my-shapes-to-move-animate-around-the-canvas-on-p5-js/24233/3 "2020-09-30T12:03:44Z")

</div>

Thank you this helps heaps! 🙂

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 30, 2020, 12:40pm UTC](https://discourse.processing.org/t/how-do-i-get-my-shapes-to-move-animate-around-the-canvas-on-p5-js/24233/4 "2020-09-30T12:40:33Z")

</div>

Some moving-shapes sketch examples: 😉  
`http://p5js.sketchpad.cc/sp/pad/view/ro.CwHWpJ$SP1EN8i/latest`

> **[Ball in the Chamber](http://Bl.ocks.org/GoSubRoutine/d0b7d3058d84970e83cf8685f8e69777)**
>
> GoSubRoutine’s Block d0b7d3058d84970e83cf8685f8e69777

  
https://codepen.io/GoSubRoutine/embed/preview/KaerGb?height=300&slug-hash=KaerGb&default-tabs=js,result&host=https://codepen.io