8 Amazing Javascript Experiments of Physic and Gravity Simulation

Written by Kevin Liew on 11 May 2010
82,949 Views • Inspirations

Introduction

In this list I have gathered 8 examples/experiments that apply physics and gravity to demonstrate the power of Javascript. Few years back, all of these experiments must be done using Java or Flash, I don't think we can implement this using Javascript because of the standard and browsers.

A lot of stunning examples in this list, personally, I like the Cloth Simulation a lot, I just can't believe it's built with Javascript.

  • Cloth Simulation

    This amazing javascript experiment demonstrate the power of javascript. Few years back, this wasn't achievable and I think you only can do it with Java or flash. Pretty impressive and the creator uses javascript physics library called Processing.
  • Random Arboretum

    Yet another physic experiment that uses the javascript physic library called Processing. Everytime you click on it, it will generate a radom branch. Look at the way it shakes and move, it's really nice.
  • Box2DJS

    Box2D is an open source physics engine written primarily for games. As the name suggests, Box2D is a purely 2D engine. BOX2DJS is a Javascript port of BOX2D.
  • Ball Pool

    Start by shaking the browser, then create new balls (click on empty space), move some others (drag) and reset the screen (double click). Stunning gravity and physic demonstration!
  • Google Gravity

    What will happen when we put gravity on every single elements in Google's homepage?
  • Wavy Scrollbars

    A very creative use of scrollbar to simulate wave effect. Best view with chrome, firefox is a bit laggy.
  • Waterfall

    Balls falling on an hidden random terrain. This experiment is using physic simulation trought the library box2djs.
  • physicSketch

    When you draw something on a canvas, it starts moving under the Newtonian law.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

24 comments
Christoph Pacher 12 years ago
Hi,
I built an open source JavaScript Physics Library. It can be used together with Scriptaculous effects and can draw lines, and that all without HTML5. have a look https://github.com/ChristophPacher/JavaScript-Physics-Library
and more Information on my blog:
https://github.com/ChristophPacher/JavaScript-Physics-Library
Reply
Flash Monkey 12 years ago
here is some JavaScript physics stuff I made that people might find useful:

http://www.flashmonkey.co.uk/simple-javascript-physics/

(sorry shameless self promotion)
Reply
Dave 12 years ago
http://www.addeffects.net has 50 more webpage effect experiments and you can use any site (even works in IE too).

Ex: http://www.addeffects.net
or http://www.addeffects.net
Reply
hey 11 years ago
nice
Reply
Michal Budzynski 12 years ago
"I like the Cloth Simulation a lot, I just can't believe it's built with Javascript." It isn't, it's Java.
Reply
asd 11 years ago
http://psi.cc/proj/traer-js/cloth.html there is javascript version
Reply
asd 11 years ago
I just created high quality version of javascript cloth simulation. I'd say it's very cool. Look there:
http://www.elisanet.fi/miroh/tied/cloth2.html
Reply
kingbullet 11 years ago
Hi your doing amazing one very nice to see. Well great work ya.....
Reply
sharkman 11 years ago
What is this?
Reply
andrew 11 years ago
these are so cool
Reply
Daniel Blythe 11 years ago
Hi,

***PROBLEM***
The google gravity script taken from here (http://code.google.com/p/gravityscript/) doesn't appear to work probably on the Safari browser. /yet Mr Doob's google gravity script works fine on Safari. Does anyone know why this might be???

Thanks
Reply