requirebin sketch

index.js

// Load up the `raf` module.
var raf = require('raf')

// Create the canvas, and add it
// to the page.
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
var width = 500
var height = 300

canvas.width = width
canvas.height = height

document.body.appendChild(canvas)

// Create a square object with a position
// and a speed property.
var square = {
  pos: {
    x: width / 2,
    y: height / 2
  },
  spd: {
    x: Math.random() * 5,
    y: Math.random() * 5
  },
  width: 32,
  height: 32
}

raf(canvas).on('data', function() {
  ctx.fillStyle = '#f2f2f2'
  ctx.fillRect(0, 0, width, height)

  // Increase the square's position by its
  // speed every frame
  square.pos.x += square.spd.x
  square.pos.y += square.spd.y

  // Reverse direction when hitting the edge of
  // the canvas!
  if (square.pos.x > width)  square.spd.x = -square.spd.x
  if (square.pos.y > height) square.spd.y = -square.spd.y
  if (square.pos.x < 0)      square.spd.x = -square.spd.x
  if (square.pos.y < 0)      square.spd.y = -square.spd.y

  // Actually draw the square to the screen
  ctx.fillStyle = '#f53'
  ctx.fillRect(
    square.pos.x - square.width/2,
    square.pos.y - square.height/2,
    square.width,
    square.height
  )
})

document.body.style.margin =
document.body.style.padding = 0
document.body.style.overflow = 'hidden'

minified.js

require=function(e,t,n){function r(n,i){if(!t[n]){if(!e[n]){var o="function"==typeof require&&require;if(!i&&o)return o(n,!0);if(s)return s(n,!0);throw Error("Cannot find module '"+n+"'")}var a=t[n]={exports:{}};e[n][0].call(a.exports,function(t){var s=e[n][1][t];return r(s?s:t)},a,a.exports)}return t[n].exports}for(var s="function"==typeof require&&require,i=0;n.length>i;i++)r(n[i]);return r}({raf:[function(e,t){t.exports=e("FOtTOL")},{}],FOtTOL:[function(e,t){(function(){function n(e){function t(){var r=n.now(),a=r-s;s=r,i.emit("data",a),i.paused||o(t,e)}var s=n.now(),i=new r;return i.pause=function(){i.paused=!0},i.resume=function(){i.paused=!1},o(t,e),i}t.exports=n;var r=e("events").EventEmitter,s="undefined"==typeof window?this:window,i=s.performance&&s.performance.now?function(){return performance.now()}:Date.now||function(){return+new Date},o=s.requestAnimationFrame||s.webkitRequestAnimationFrame||s.mozRequestAnimationFrame||s.msRequestAnimationFrame||s.oRequestAnimationFrame||(s.setImmediate?function(e){setImmediate(e)}:function(e){setTimeout(e,0)});n.polyfill=o,n.now=i})()},{events:1}],2:[function(e,t){var n=t.exports={};n.nextTick=function(){var e="undefined"!=typeof window&&window.setImmediate,t="undefined"!=typeof window&&window.postMessage&&window.addEventListener;if(e)return function(e){return window.setImmediate(e)};if(t){var n=[];return window.addEventListener("message",function(e){if(e.source===window&&"process-tick"===e.data&&(e.stopPropagation(),n.length>0)){var t=n.shift();t()}},!0),function(e){n.push(e),window.postMessage("process-tick","*")}}return function(e){setTimeout(e,0)}}(),n.title="browser",n.browser=!0,n.env={},n.argv=[],n.binding=function(){throw Error("process.binding is not supported")},n.cwd=function(){return"/"},n.chdir=function(){throw Error("process.chdir is not supported")}},{}],1:[function(e,t,n){(function(e){function t(e,t){if(e.indexOf)return e.indexOf(t);for(var n=0;e.length>n;n++)if(t===e[n])return n;return-1}e.EventEmitter||(e.EventEmitter=function(){});var r=n.EventEmitter=e.EventEmitter,s="function"==typeof Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},i=10;r.prototype.setMaxListeners=function(e){this._events||(this._events={}),this._events.maxListeners=e},r.prototype.emit=function(e){if("error"===e&&(!this._events||!this._events.error||s(this._events.error)&&!this._events.error.length))throw arguments[1]instanceof Error?arguments[1]:Error("Uncaught, unspecified 'error' event.");if(!this._events)return!1;var t=this._events[e];if(!t)return!1;if("function"==typeof t){switch(arguments.length){case 1:t.call(this);break;case 2:t.call(this,arguments[1]);break;case 3:t.call(this,arguments[1],arguments[2]);break;default:var n=Array.prototype.slice.call(arguments,1);t.apply(this,n)}return!0}if(s(t)){for(var n=Array.prototype.slice.call(arguments,1),r=t.slice(),i=0,o=r.length;o>i;i++)r[i].apply(this,n);return!0}return!1},r.prototype.addListener=function(e,t){if("function"!=typeof t)throw Error("addListener only takes instances of Function");if(this._events||(this._events={}),this.emit("newListener",e,t),this._events[e])if(s(this._events[e])){if(!this._events[e].warned){var n;n=void 0!==this._events.maxListeners?this._events.maxListeners:i,n&&n>0&&this._events[e].length>n&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),console.trace())}this._events[e].push(t)}else this._events[e]=[this._events[e],t];else this._events[e]=t;return this},r.prototype.on=r.prototype.addListener,r.prototype.once=function(e,t){var n=this;return n.on(e,function r(){n.removeListener(e,r),t.apply(this,arguments)}),this},r.prototype.removeListener=function(e,n){if("function"!=typeof n)throw Error("removeListener only takes instances of Function");if(!this._events||!this._events[e])return this;var r=this._events[e];if(s(r)){var i=t(r,n);if(0>i)return this;r.splice(i,1),0==r.length&&delete this._events[e]}else this._events[e]===n&&delete this._events[e];return this},r.prototype.removeAllListeners=function(e){return 0===arguments.length?(this._events={},this):(e&&this._events&&this._events[e]&&(this._events[e]=null),this)},r.prototype.listeners=function(e){return this._events||(this._events={}),this._events[e]||(this._events[e]=[]),s(this._events[e])||(this._events[e]=[this._events[e]]),this._events[e]}})(e("__browserify_process"))},{__browserify_process:2}]},{},[]);var raf=require("raf"),canvas=document.createElement("canvas"),ctx=canvas.getContext("2d"),width=500,height=300;canvas.width=width,canvas.height=height,document.body.appendChild(canvas);var square={pos:{x:width/2,y:height/2},spd:{x:5*Math.random(),y:5*Math.random()},width:32,height:32};raf(canvas).on("data",function(){ctx.fillStyle="#f2f2f2",ctx.fillRect(0,0,width,height),square.pos.x+=square.spd.x,square.pos.y+=square.spd.y,square.pos.x>width&&(square.spd.x=-square.spd.x),square.pos.y>height&&(square.spd.y=-square.spd.y),0>square.pos.x&&(square.spd.x=-square.spd.x),0>square.pos.y&&(square.spd.y=-square.spd.y),ctx.fillStyle="#f53",ctx.fillRect(square.pos.x-square.width/2,square.pos.y-square.height/2,square.width,square.height)}),document.body.style.margin=document.body.style.padding=0,document.body.style.overflow="hidden";

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

view on requirebin