{"_id":"flywheel","_rev":"6-2c8e69eb4ef54132b19bb4e7535c8b3c","name":"flywheel","description":"Animation looping utility for the browser","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"flywheel","author":{"name":"Hugh FD Jackson","email":"@hughfdjackson"},"description":"Animation looping utility for the browser","version":"0.1.0","main":"src/flywheel.js","keywords":["loop","animation","requestAnimationFrame","time delta"],"license":"MIT","_npmUser":{"name":"hughfdjackson","email":"hughfdjackson@googlemail.com"},"_id":"flywheel@0.1.0","dependencies":{},"devDependencies":{},"engines":{"node":"*"},"_engineSupported":true,"_npmVersion":"1.1.0-beta-10","_nodeVersion":"v0.6.7","_defaultsLoaded":true,"dist":{"shasum":"0178266980fe586d2c500ebfcf0bf3310ed47e49","tarball":"https://registry.npmjs.org/flywheel/-/flywheel-0.1.0.tgz","integrity":"sha512-7QC8oYV6Vx1/Jky0+N49ajZ5B0gsL0/W80l6Z0Ws6nVvZ2SkDpYCTgfDSdbbMC4v/EesvOxLCwlYZrUepja1fA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRSJsceJHrVENaClK3+1utPtsyGojgmQ7wa1/xgTs08AIhAJ5WMbNJ3vm9DdlRFeV1T3I4mKP6gxag/WWm2mhCmvos"}]},"maintainers":[{"name":"hughfdjackson","email":"hughfdjackson@googlemail.com"}]}},"readme":"# Flywheel\n\nFlywheel is a lightweight tool to make working with HTML5's requestAnimationFrame simpler.\n\n## API\n\n#### Setting up a loop\n\nFlywheel takes two arguments:\n\n* A callback to loop over.  It passes the amount of time passed since the last frame to the callback.\n\n* A DOM element, which acts identically to the [requestAnimationFrame second parameter](https://developer.mozilla.org/en/DOM/window.requestAnimationFrame).\n\nAfter setup, it returns an object that can be used to manipulate the loop.  By default, the loop is not running; to start it, use the methods from the next section.\n\n```javascript\n    \n    var element = document.getElementsByTagName(\"canvas\")[0]\n\n    function animation_loop(time_delta){\n        /* do animation work here */\n    }\n\n    var fw = flywheel(animation_loop, element)\n```\n\n\n#### Starting, stopping and toggling a loop\n\n```javascript\n    \n    // start and stop \n    fw.start()\n    fw.stop()\n\n    // toggle loop on and off\n    fw.toggle()\n    fw.toggle()\n```\n\n\n#### Changing the callback and element\n\nTo change a callback:\n\n```javascript\n    fw.callback = function(time_delta){\n        /* do alternative animation work here */\n    }\n```\n\nTo change an element:\n\n```javascript\n    fw.element = document.getElementById(\"my_other_canvas\")\n```\n\n\n#### Time Delta capping:\n\nWhen a page loses focus or the loop is paused, the gap between frames can be large enough to cause problems in games (especially where acceleration or collision detection is involved).  To combat this, flywheel limits the `time_delta` value passed to the callback ( by default, to 50ms; equivilent to ~20fps ).\n\nTo change the cap:\n\n```javascript\n    fw.framerate_cap = 40\n```\n\n\n#### Step for debugging:\n\n```javascript\n\n    // step forwards a frame (assuming a time delta of 16ms; equivilent to ~60fps)\n    fw.step()\n\n    // step forwards with a custom time delta.\n    fw.step(30)\n```\n\n\n## Testing\n\n[Feel free to run the test suite](http://hughfdjackson.github.com/flywheel/src-test/SpecRunner.html)\n\n## Licensing\n\nThis software is available under the MIT license.\n","maintainers":[{"name":"hughfdjackson","email":"hughfdjackson@googlemail.com"}],"time":{"modified":"2022-06-18T02:36:16.970Z","created":"2012-07-30T22:36:20.010Z","0.1.0":"2012-07-30T22:36:21.457Z"},"author":{"name":"Hugh FD Jackson","email":"@hughfdjackson"},"users":{"fgribreau":true}}