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);

!function() {
	function Circle (x, y) {
		this.px = x;
		this.py = y;
    
		this.vx = 0;
    
		this.vy = 0;
	}
	Circle.prototype.draw = function () {
		this.vx += (Math.random() - 0.5) / 2;
		this.vy += (Math.random() - 0.5) / 2;
		this.px += this.vx;
		this.py += this.vy;
		var dx = this.px - ctx.canvas.width  * 0.5;
		var dy = this.py - ctx.canvas.height * 0.5;
		var d  = Math.sqrt(dx * dx + dy * dy);
		var m = Math.min(ctx.canvas.width * 0.5, ctx.canvas.height * 0.5);
		var radius = (-d / m + 1) * m / 10;
		if (radius > 0) {
			requestAnimationFrame(this.draw.bind(this));
			ctx.beginPath();
			ctx.arc(this.px, this.py, radius, 0, 2 * Math.PI);
			ctx.fillStyle = "#fff";
			ctx.fill();
			ctx.strokeStyle = "#000";
			ctx.stroke();
		}
	}
	function resize () {
		ctx.canvas.width = ctx.canvas.offsetWidth;
		ctx.canvas.height = ctx.canvas.offsetHeight;
	}
	window.addEventListener('resize', resize, false);
	resize();

	function click () {
		for (var i = 0; i < 10; i++) {
			var c = new Circle(ctx.canvas.width * 0.5, ctx.canvas.height * 0.5);
			c.draw();
		}
	}
	window.addEventListener("mousedown",  click, false );
	document.body.addEventListener("touchstart", click, false );

	click(); 
	click();
  	click(); 
	click();
}();

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);!function(){function Circle(x,y){this.px=x;this.py=y;this.vx=0;this.vy=0}Circle.prototype.draw=function(){this.vx+=(Math.random()-.5)/2;this.vy+=(Math.random()-.5)/2;this.px+=this.vx;this.py+=this.vy;var dx=this.px-ctx.canvas.width*.5;var dy=this.py-ctx.canvas.height*.5;var d=Math.sqrt(dx*dx+dy*dy);var m=Math.min(ctx.canvas.width*.5,ctx.canvas.height*.5);var radius=(-d/m+1)*m/10;if(radius>0){requestAnimationFrame(this.draw.bind(this));ctx.beginPath();ctx.arc(this.px,this.py,radius,0,2*Math.PI);ctx.fillStyle="#fff";ctx.fill();ctx.strokeStyle="#000";ctx.stroke()}};function resize(){ctx.canvas.width=ctx.canvas.offsetWidth;ctx.canvas.height=ctx.canvas.offsetHeight}window.addEventListener("resize",resize,false);resize();function click(){for(var i=0;i<10;i++){var c=new Circle(ctx.canvas.width*.5,ctx.canvas.height*.5);c.draw()}}window.addEventListener("mousedown",click,false);document.body.addEventListener("touchstart",click,false);click();click();click();click()}();

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