first commit

README.md

@@ -0,0 +1,64 @@
+# ticker #
+
+A module for running animation and game loops with
+[browserify](http://browserify.org/).
+
+You've probably heard of
+[`requestAnimationFrame`](http://caniuse.com/#feat=requestanimationframe): a
+helpful method for running animations at higher frame rates than `setInterval`.
+It works really well for rendering animations to the screen, adjusting the
+speed to fit your screen refresh rate and battery life, etc.
+
+Unfortunately it's not predictable - it tends to fluctuate quite a
+bit, and leaves you with results either far too fast or too slow depending on
+the device. You could use setInterval, but that can be unreliable too. Keeping
+track of [delta time](http://viget.com/extend/time-based-animation) is a good
+solution, but it too can behave differently depending on the frame rate.
+
+So ticker handles running your update loop at a more consistent rate - either
+speeding it up or slowing it down in response to performance,
+[this way](http://gafferongames.com/game-physics/fix-your-timestep/).
+
+## Installation ##
+
+``` bash
+npm install ticker
+```
+
+## Usage ##
+
+**ticker = require('ticker')(element, framerate, skips)**
+
+Creates a new ticker instance.
+
+* `element` should either be `window` or the canvas element you're drawing to.
+* `framerate` is the number of frames per second you'd like to tick, and
+  defaults to 60.
+* `skips` is the maximum frames you'd like to skip per render. Defaults to 1.
+  Set to 0 to disable entirely.
+
+**ticker.on('tick', callback)**
+
+Emitted for every frame of logic you should to run.
+
+**ticker.on('draw', callback)**
+
+Emitted for every draw call you should run.
+
+``` javascript
+var ticker = require('ticker')
+  , canvas = document.createElement('canvas')
+  , ctx = canvas.getContext('2d')
+  , x = 0
+  , y = 0
+
+ticker(window, 60).on('tick', function() {
+  x += Math.round(Math.random()*2-1)*10
+  y += Math.round(Math.random()*2-1)*10
+}).on('draw', function() {
+  ctx.fillStyle = 'black'
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  ctx.fillStyle = 'white'
+  ctx.fillRect(x, y, 10, 10)
+})
+```

index.js

@@ -0,0 +1,27 @@
+var raf = require('raf')
+  , EventEmitter = require('events').EventEmitter
+
+module.exports = ticker
+
+function ticker(element, rate, limit) {
+  var millisecondsPerFrame = 1000 / (rate || 60)
+    , time = 0
+    , emitter
+
+  limit = arguments.length > 2 ? +limit + 1 : 2
+  emitter = raf(element || window).on('data', function(dt) {
+    var n = limit
+
+    time += dt
+    while (time > millisecondsPerFrame && n) {
+      time -= millisecondsPerFrame
+      n -= 1
+      emitter.emit('tick')
+    }
+    time = (time + millisecondsPerFrame * 1000) % millisecondsPerFrame
+
+    if (n !== limit) emitter.emit('draw')
+  })
+
+  return emitter
+}

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "ticker",
+  "version": "0.0.1",
+  "dependencies": {
+    "raf": "0.0.2"
+  },
+  "readmeFilename": "README.md",
+  "description": "A module for running animation and game loops with browserify.",
+  "main": "index.js",
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/hughsk/ticker.git"
+  },
+  "keywords": [
+    "tick",
+    "frames",
+    "second",
+    "animation",
+    "loop",
+    "game",
+    "events"
+  ],
+  "author": "Hugh Kennedy <hughskennedy@gmail.com> (http://hughskennedy.com/)",
+  "license": "MIT"
+}