Apply the laws of motion to create realistic animation
- Easily build complex scenes with included modules for all sorts of geometric shapes
- Add support for collisions or gravity in one line
- Create interactions using the provided physics modules, or create your own
- Built for HTML5 (DOM or canvas), and works on both desktop and mobile
There are two ways you can participate in the challenge:
2. Renderers: Create a new renderer which improves upon the current PhysicsJS renderers. It should demonstrate modularity, ease of use, and performance. The best renderers could become part of the official PhysicsJS package.
PhysicsJS currently comes bundled with two renderers, which are the components that have the job of drawing the different PhysicsJS bodies. One uses the DOM, the other one uses Canvas, but both at the moment have very limited functionality. A more versatile renderer would enable users to easily customize the look of their physics bodies.
New renderers should do the following:
- render of all primitive bodies/geometries (circle, convex-polygon, and rectangle)
- render custom "skins" for bodies (For example, render a convex polygon as a specified spaceship image)
- render large numbers of bodies (showing efficiency)
Here are a few ideas for better rendering:
- Improve the existing renders by copying any functionality or extending them. You can find them in src/renderers
- Build the renderer upon a canvas library, such as: KineticJS, TWO.js, Pixi.js, Paper.js, or Easel.js
- Go wild and integrate with WebGL or SVG!
Resources: To get started, check out the tutorial on building a custom renderer and the article on building a 2D broswer game using PhysicsJS.
Have more ideas? Questions? Let's talk about them!
Anyone 13 years of age or older may participate in the challenge.
What to create: a demo highlighting PhysicsJS and (optionally) a new renderer for the project. Your demo must be accessible on the web. All submissions must include: the URL for your demo; at least one screenshot of your demo (for the site gallery); and a description of what you've created along with any references. If you are also submitting a new renderer, provide a link to a GitHub fork of PhysicsJS that includes your renderer. If applicable, include link(s) to any pull requests entered on the PhysicsJS GitHub page.
How to enter
- Click “Register” to sign up.
- Visit the PhysicsJS site to access documentation and resources and check out the tutorial on building a custom renderer and the article on building a 2D broswer game using PhysicsJS.
- Fork the GitHub repo and create an new renderer (optional).
- Create a new demo showcasing the existing version of PhysicsJS or (optionally) your new renderer.
- Enter your submission by providing: 1) the URL for your demo; 2) a link to a GitHub fork of PhysicsJS that includes your new renderer (if applicable); 3) at least one screenshot of your demo (for the site gallery); 4) a description of what you've created along with any references; and 5) link(s) to any pull requests entered on the PhysicsJS GitHub page.
Project Owner, PhysicsJS
Speed & Efficiency
Customizability & Versatility
(of the renderer methods)
(possibility of rendering behaviors, constraints, and other types of bodies in future)
(source code clarity, documentation, and neatness)
Fanciness of the demo
Creative use of PhysicsJS
(for "Top Demo" prize only)