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

p5.js Coding Questions
1

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!

2

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:

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/

I hope this helps!

Warm regards,

Chrisir

1 Like
3

Thank you this helps heaps! :slight_smile:

1 Like
4

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


1 Like