requirebin sketch

index.js

var fit = require('canvas-fit');
var ctx = document.body.appendChild(document.createElement('canvas')).getContext('2d');
window.addEventListener('resize', fit(ctx.canvas, window), false);

var particles = [];

var PARTICLES_COUNT = 100;
var PARTICLE_SIZE = 5;
var PARTICLE_MAX_SPEED = 2;

function init() {
  for(var i = 0; i < PARTICLES_COUNT; i++) {
    particles.push({
      x: ~~(Math.random() * ctx.canvas.width),
      y: ~~(Math.random() * ctx.canvas.height),
      vx: (Math.random() * (PARTICLE_MAX_SPEED * 2)) - PARTICLE_MAX_SPEED,
      vy: (Math.random() * (PARTICLE_MAX_SPEED * 2)) - PARTICLE_MAX_SPEED
    });
  }
}

function update() {
  for(var i = 0; i < particles.length; i++) {
  	var particle = particles[i];
    particle.x += particle.vx;
    particle.y += particle.vy;

    if(particle.x > ctx.canvas.width) {
    	particle.vx = -Math.abs(particle.vx);
    } else if(particle.x < 0) {
    	particle.vx = Math.abs(particle.vx);
    } else if(particle.y > ctx.canvas.height) {
    	particle.vy = -Math.abs(particle.vy);
    } else if(particle.y < 0) {
    	particle.vy = Math.abs(particle.vy);
    }
  }
}

function render() {
  for(var i = 0; i < particles.length; i++) {
  	var particle = particles[i];
    ctx.fillRect(particle.x, particle.y, PARTICLE_SIZE, PARTICLE_SIZE);
  }
}

function clear() {
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

init();
(function tick() {
  console.log('foo');
  update();
  clear();
  render();
	window.requestAnimationFrame(tick);
})();

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=getSize;function getSize(element){if(element===window||element===document.body){return[window.innerWidth,window.innerHeight]}if(!element.parentNode){var temporary=true;document.body.appendChild(element)}var bounds=element.getBoundingClientRect();var styles=getComputedStyle(element);var height=(bounds.height|0)+parse(styles.getPropertyValue("margin-top"))+parse(styles.getPropertyValue("margin-bottom"));var width=(bounds.width|0)+parse(styles.getPropertyValue("margin-left"))+parse(styles.getPropertyValue("margin-right"));if(temporary){document.body.removeChild(element)}return[width,height]}function parse(prop){return parseFloat(prop)||0}},{}],"canvas-fit":[function(require,module,exports){var size=require("element-size");module.exports=fit;var scratch=new Float32Array(2);function fit(canvas,parent,scale){canvas.style.position=canvas.style.position||"absolute";canvas.style.top=0;canvas.style.left=0;resize.scale=parseFloat(scale||1);resize.parent=parent;return resize();function resize(){var p=resize.parent||canvas.parentNode;if(typeof p==="function"){var dims=p(scratch)||scratch;var width=dims[0];var height=dims[1]}else if(p&&p!==document.body){var psize=size(p);var width=psize[0]|0;var height=psize[1]|0}else{var width=window.innerWidth;var height=window.innerHeight}canvas.width=width*resize.scale;canvas.height=height*resize.scale;canvas.style.width=width+"px";canvas.style.height=height+"px";return resize}}},{"element-size":1}]},{},[]);var fit=require("canvas-fit");var ctx=document.body.appendChild(document.createElement("canvas")).getContext("2d");window.addEventListener("resize",fit(ctx.canvas,window),false);var particles=[];var PARTICLES_COUNT=100;var PARTICLE_SIZE=5;var PARTICLE_MAX_SPEED=2;function init(){for(var i=0;i<PARTICLES_COUNT;i++){particles.push({x:~~(Math.random()*ctx.canvas.width),y:~~(Math.random()*ctx.canvas.height),vx:Math.random()*(PARTICLE_MAX_SPEED*2)-PARTICLE_MAX_SPEED,vy:Math.random()*(PARTICLE_MAX_SPEED*2)-PARTICLE_MAX_SPEED})}}function update(){for(var i=0;i<particles.length;i++){var particle=particles[i];particle.x+=particle.vx;particle.y+=particle.vy;if(particle.x>ctx.canvas.width){particle.vx=-Math.abs(particle.vx)}else if(particle.x<0){particle.vx=Math.abs(particle.vx)}else if(particle.y>ctx.canvas.height){particle.vy=-Math.abs(particle.vy)}else if(particle.y<0){particle.vy=Math.abs(particle.vy)}}}function render(){for(var i=0;i<particles.length;i++){var particle=particles[i];ctx.fillRect(particle.x,particle.y,PARTICLE_SIZE,PARTICLE_SIZE)}}function clear(){ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)}init();(function tick(){console.log("foo");update();clear();render();window.requestAnimationFrame(tick)})();

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "canvas-fit": "1.4.0"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin