I inspired this demo by a movie about the Crayon Physics. As the movie shows, when you draw something on the above canvas, it starts moving under the Newtonian low.
This demo is using Mr.doob's improving version of Box2DJS. Thanks Mr.doob!
How to Use
||Click the `Stop/Start Timer' button.
||Drag your mouse on the canvas. If the starting and the ending points are far enough, the track becomes connected lines.
|Draw Filled Body
||Drag your mouse on the canvas. If the starting and the ending points are near each other, the track becomes a filled body. Note that you stroke must be convex. If not, the displayed line may not show its physical body.
|Show Physical Body
||Click the `Show Physical Body' button.
||Click a body you want to select. The selected body is inspected and its information is shown on the lower sidebox. Note that the only one body can be selected.
||Stop the timer, then click the point of the selected body you want to fix.
||Stop the timer, then click the point in the cross area between two bodies you want to connect.
||Stop the timer and select one body, then the body can be dragged.
||Click the `Delete' button to delete a selected body.