Awesome

budo-ball-example

^{(click for demo)}

This is a small example of using budō and budō-chrome for rapid prototyping.

To test:

git clone https://github.com/mattdesl/budo-ball-example.git
cd budo-ball-example
npm install
npm start

This will start bundling the file and serve it to http://localhost:9966/. The script supports LiveReload, so you can save the index.js file to trigger a browser reload (without a browser extension).

script injection

You can also test the experimental Chrome Script Injection feature with the following. Be sure to quit other instances of watchify/budo first.

npm run chrome

This should open a new instance of Chrome connected to the remote debugger on port 9222. Open up index.js and change some of the ball settings in the render loop to see them injected without losing application state (like time & position).

...

require('raf-loop')(function(dt) {
    ctx.clearRect(0, 0, width, height)
    world.integratePoint(ball, 24/1000)

    //try changing these with budo-chrome running
    // ball.radius = 30
    // ball.mass = 0.25
    // ball.place([200, 100])
...

Note: In some cases, you may need to refresh the tab to get back into the interactive state. Also, opening DevTools or the console will disconnect the debugger.

Tested on OSX Yosemite. Tweet me or open an issue if you notice problems.

License

MIT, see LICENSE.md for details.