Bouncing Squares - a particle system with basic gravity

View code Play Walkthrough

Description

Just some simple boxes that bounce. A very basic implementation of gravity in a particle system on HTML5 canvas.

Subscribe

Get updates about new walkthroughs, behind-the-scenes experiments, tips, tricks and more.

Add New Comment

6 Comments

(close)
Alex

Alex

hey there, great walkthrough. I wonder if its intended that you call your box.update method twice per intervall? Once in the box.draw method and later in the main update method through the loop over each box

Lee

Lee

I cannot get this to work…I keep getting the errors that fillStyle and fillRect are not a function even though I have everything set up exactly as in this tutorial with html5 doctype and includes set up properly in index.html. I am a canvas n00b though, but I don’t understand why this works but mine doesn’t. What am I missing?

Muhammad Farooqi

Muhammad Farooqi

excellent.. it’s really aowsome.. i didn’t know how easy is to make gravity.. and this is really beautiful.. really loving :)

Romeo N. Bernardino IV

Romeo N. Bernardino IV

..- thank you so much for this.. who ever you are, you’re my idol ^_^ thanks

MoodyKSA

MoodyKSA

Hey guys, sorry i did not include my twitter cuz i dont have one, im really glad that you guys loved the tutorial, i did not expect it to be actually published.

i have more on my website if you guys wana check out some of my other experiments or send me a question over my facebook, take care

MoodyKSA

MoodyKSA

this is a continue to my first post, For more experiments like this check out my website on http://manrix.net and subscribe to our facebook for more updates

6 Comments

Description

5x 10x 15x 20x