Jasper Palfree (@wellcaffeinated) and ChallengePost invite developers and designers to create new renderers and demos using PhysicsJS, a modular, extendable, and easy-to-use physics engine for JavaScript. Check out Lava Lamp, tearable cloth, fruitcake on wheels, and autumn leaves to see PhysicsJS in action.

About PhysicsJS

PhysicsJS is a JavaScript physics engine that lets you apply the laws of motion to create animations that simulate real-world physics. It's fun, easy to set up, and written in JavaScript. With little effort, you can incorporate awesome motion graphics into games, presentation, or apps.  

• 100% pure JavaScript physics engine
• 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

The Challenge

There are two ways you can participate in the challenge:

1. Demos: Create a new demo that highlights the capabilities of PhysicsJS by using existing or custom-built extensions. Showcase PhysicsJS with a dazzling animation with real world motion.

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!

$400 in prizes

1. Click “Register” to sign up.
2. 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.
3. Fork the GitHub repo and create an new renderer (optional).
4. Create a new demo showcasing the existing version of PhysicsJS or (optionally) your new renderer.
5. 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.

• Speed & Efficiency
  
• Customizability & Versatility
  (of the renderer methods)
• Development Foresight
  (possibility of rendering behaviors, constraints, and other types of bodies in future)
• Clarity
  (source code clarity, documentation, and neatness)
• Fanciness of the demo
  
• Creative use of PhysicsJS
  (for "Top Demo" prize only)