requirebin sketch

index.js

var canvas = document.body.appendChild(document.createElement('canvas'));
var ctx = canvas.getContext('2d');

var fit = require('canvas-fit');
window.addEventListener('resize', fit(canvas));

var MAX_ENTITIES = 10;

var entities = [];

init();
loop();

function init() {
  for(var i = 0; i < MAX_ENTITIES; i++) {
    entities.push({
      angleX: Math.random() * Math.PI * 2,
      angleY: Math.random() * Math.PI * 2,
      speedX: Math.random() * .1 - .05,
      speedY: Math.random() * .1 - .05,
      radius: 100 + Math.random() * 100
    });
  }
}

function update() {
  ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'; 
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'black';
  entities.forEach(function(e) {
    var x = Math.cos(e.angleX) * e.radius;
    var y = Math.sin(e.angleY) * e.radius;
    e.angleX += e.speedX;
    e.angleY += e.speedY;
    ctx.fillRect(canvas.width/2+x, canvas.height/2+y, 5, 5)
  })
}

function loop() {
  window.requestAnimationFrame(loop);
  update();
}

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;function fit(canvas,parent,scale){canvas.style.position=canvas.style.position||"absolute";canvas.style.top=0;canvas.style.left=0;scale=parseFloat(scale||1);return resize();function resize(){var p=parent||canvas.parentNode;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*scale;canvas.height=height*scale;canvas.style.width=width+"px";canvas.style.height=height+"px";return resize}}},{"element-size":1}]},{},[]);var canvas=document.body.appendChild(document.createElement("canvas"));var ctx=canvas.getContext("2d");var fit=require("canvas-fit");window.addEventListener("resize",fit(canvas));var MAX_ENTITIES=10;var entities=[];init();loop();function init(){for(var i=0;i<MAX_ENTITIES;i++){entities.push({angleX:Math.random()*Math.PI*2,angleY:Math.random()*Math.PI*2,speedX:Math.random()*.1-.05,speedY:Math.random()*.1-.05,radius:100+Math.random()*100})}}function update(){ctx.fillStyle="rgba(255, 255, 255, 0.05)";ctx.fillRect(0,0,canvas.width,canvas.height);ctx.fillStyle="black";entities.forEach(function(e){var x=Math.cos(e.angleX)*e.radius;var y=Math.sin(e.angleY)*e.radius;e.angleX+=e.speedX;e.angleY+=e.speedY;ctx.fillRect(canvas.width/2+x,canvas.height/2+y,5,5)})}function loop(){window.requestAnimationFrame(loop);update()}

package.json

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

page-head.html

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

requirebin.md

made with requirebin