schteppe/p2.js — pull request #57 by nileshtrivedi (2014-01-21 21:36:45+00:00)
Title: Initial work on implementing shape controls

Hi Stefan,

I tried taking a stab at implementing shape controls for PixiDemo.js. It's not complete in any sense. I just want to get your opinion on the overall strategy before proceeding and fixing the bugs. You can try it out with demos/car.html (disabling the motor will make the test easy).

I added Shape.prototype.controls() which returns an array of controls that a Shape supports. For eg, a circle may support controls for radius and angle, a box may support width, height (or perhaps a single control for size) etc. etc. A control consists of 3 things: a name, the desired position of the control with respect to the local co-ordinates of the shape and a callback function that determines what happens when the user drags the control. It's entirely up to the rendering library to use or ignore this capability. For now, I've just added a control for changing a circle's radius. In future, we can also have something like Body.prototype.controls() for changing force/velocity values.

Inside PixiDemo.prototype.addRenderable(), once the shapes have been drawn on the body's sprite, we draw these controls using the new method PixiDemo.prototype.drawControls(). Because all the relevant information about controls came from the Shape, this is a very simple method and works for all shapes. It currently uses an image texture as a control and uses Pixi.js's interactivity to handle mousedown, mousemove and mouseup events. Inside mousemove, we go back to the callback function that was provided by the Shape. The callback function manipulates the shape only at the data structure level and the redrawing of the shape is accomplished back in mousemove handler. I do the redrawing by removing the body renderable and adding it back.

I am able to resize the car's wheels using this solution. There are many known problems, for eg, while resizing a circle, panning of the scene still happens. But does the approach seem okay to you?