orbit simple 2d
creates a series of nodes to perform a circular orbit. each node lives in its own self contained canvas element, and can be configured with various orbital properties. see example for full property disclosure.
- create a
<canvas id="orbitter">
- when the DOM is ready, create your Orbitter, nodes, and properties!
- call the nodes to orbit and home
var orbitter = debug: true id: "orbitter" size: 350 350 speed: t: 30 // theta, *rpm* timeToOrbit: 1000 // time to orbit radius & theta alignment, ms timeToHome: 1000 // time to home from orbit, ms (defaults to timeToOrbit val) nodes: id: 1 pos: // initial position! r: 0 // radial, px t: 0 // theta, radians orbitPos: // initial position at orbit r: 150 // radial, px t: 0 // theta *offset* from theta position, radians speed: t: 2 // theta, rpm (overrides default from above) style: radius: 15 color: 'red' dir: -1 // clockwise id: 2 pos : r: 0 t: MathPI orbitPos: // position at orbit r: 40 t: MathPI/2 // theta in reference to other nodes at same speed style: radius: 20 color: 'green' id: 3 pos : r: 0 t: MathPI orbitPos: r: 40 t: MathPI style: radius: 20 color: 'pink' id: 4 pos : r: 0 t: MathPI orbitPos: r: 100 t: 2*MathPI/3 style: radius: 20 color: 'blue' ; // orbit all nodes!orbitter; // home them after 4s (+timeToOrbit to return home);
Build
To build your own, consult src/orbit-example.js
. Use any normal commonJs build process you desire! I have configured this repo to build using grunt
and grunt-watchify
(wrapped browserify
). If you just care to edit my orbit-example.js, run the following from the repo root:
npm i
grunt
The final js is placed in build/
. Open the index.html file to preview.
ToDo
- rather than refreshing at a fixed 50/60 Hz, self adjust per browser performance
Thanks
- handy gif tutorial: Chris Messina