requirebin sketch

index.js

var Victor = require('victor');
var raf = require('raf');
require('mouse');

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.font = '10px sans-serif';

var v1 = new Victor(200, 200);
var v2 = new Victor(350, 350);

function drawXGuide () {
  var dx = v2.distanceX(v1);
  var dy = v2.distanceY(v1);
  var offset = 7;
  
  if (dy > 0) { offset *= -1; }
  
  var from = new Victor(v1.x, v1.y + offset);
  var to = new Victor(v1.x + dx, v1.y + offset);
  var text = new Victor(from.x + dx / 2, from.y + offset);
  
  ctx.beginPath();
  ctx.moveTo(from.x, from.y);
  ctx.lineWidth = 1;
  ctx.lineTo(to.x, to.y);
  ctx.strokeStyle = '#afe9c6';
  ctx.stroke();
  
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = '#afe9c6';
  ctx.fillText('x: ' + dx, text.x, text.y);
}

function drawYGuide () {
  var dx = v2.distanceX(v1);
  var dy = v2.distanceY(v1);
  var offset = 7;
  
  if (dx > 0) { offset *= -1; }
  
  var from = new Victor(v1.x + offset, v1.y);
  var to = new Victor(v1.x + offset, v1.y + dy);
  var text = new Victor(from.x + offset , from.y + dy / 2);
  
  ctx.beginPath();
  ctx.moveTo(from.x, from.y);
  ctx.lineWidth = 1;
  ctx.lineTo(to.x, to.y);
  ctx.strokeStyle = '#afe9c6';
  ctx.stroke();
  
  ctx.save();
  ctx.translate(text.x, text.y);
  var rot = -Math.PI / 2;
  if (offset >= 0) { rot *= -1; }
  
  ctx.rotate(rot);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = '#afe9c6';
  ctx.fillText('y: ' + dy, 0, 0);
  ctx.restore();
}

function drawOriginPoint () {
  ctx.beginPath();
  ctx.arc(v1.x, v1.y, 3, 0, 2 * Math.PI, false);
  ctx.strokeStyle = '#0cf';
  ctx.stroke();
}

function drawRadius () {
  ctx.beginPath();
  ctx.moveTo(v1.x, v1.y);
  ctx.lineTo(v2.x, v2.y);
  ctx.strokeStyle = '#f59';
  ctx.stroke();
}

function drawCircle () {
  ctx.beginPath();
  ctx.arc(v1.x, v1.y, v1.distance(v2), 0, 2 * Math.PI, false);
  ctx.strokeStyle = '#0cf';
  ctx.stroke();
}

function draw () {
  ctx.fillStyle = '#242424';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  drawXGuide();
  drawYGuide();
  drawOriginPoint();
	drawRadius();
  drawCircle();
};

raf(draw);
mouse.on('move', function (e) {
  v2.x = e.layerX;
  v2.y = e.layerY;
  
  raf(draw);
});





document.body.style.margin = 0;
document.body.style.padding = 0;
//document.body.style.overflow = 'hidden'
document.body.appendChild(canvas);

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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}({"1Xd6Lg":[function(require,module,exports){exports=module.exports=Vector;function Vector(x,y){if(!(this instanceof Vector)){return new Vector(x,y)}this.x=x||0;this.y=y||0}Vector.random=function(maxX,maxY){var x=Math.floor(Math.random()*maxX),y=Math.floor(Math.random()*maxY);return new Vector(x,y)};Vector.prototype.copy=function(vec){return new Vector(this.x,this.y)};Vector.prototype.add=function(vec){this.x+=vec.x;this.y+=vec.y};Vector.prototype.addCopy=function(vec){return new Vector(this.x+vec.x,this.y+vec.y)};Vector.prototype.sub=function(vec){this.x-=vec.x;this.y-=vec.y};Vector.prototype.subCopy=function(vec){return new Vector(this.x-vec.x,this.y-vec.y)};Vector.prototype.divide=function(vec){this.x/=vec.x;this.y/=vec.y};Vector.prototype.divideCopy=function(vec){return new Vector(this.x/vec.x,this.y/vec.y)};Vector.prototype.multiply=function(vec){this.x*=vec.x;this.y*=vec.y};Vector.prototype.multiplyCopy=function(vec){return new Vector(this.x*vec.x,this.y*vec.y)};Vector.prototype.distanceX=function(vec){return this.x-vec.x};Vector.prototype.distanceY=function(vec){return this.y-vec.y};Vector.prototype.distance=function(vec){var dx=this.distanceX(vec),dy=this.distanceY(vec);return Math.sqrt(dx*dx+dy*dy)};Vector.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y)};Vector.prototype.limit=function(max,factor){if(Math.abs(this.x)>max){this.x*=factor}if(Math.abs(this.y)>max){this.y*=factor}};Vector.prototype.randomize=function(maxX,maxY){var x=Math.floor(Math.random()*maxX),y=Math.floor(Math.random()*maxY);return new Vector(x,y)};Vector.prototype.randomizeX=function(max){var x=Math.floor(Math.random()*max);this.x=x};Vector.prototype.randomizeY=function(max){var y=Math.floor(Math.random()*max);this.y=y};Vector.prototype.randomizeAny=function(maxX,maxY){if(!!Math.round(Math.random()*1)){this.randomizeX(maxX)}else{this.randomizeY(maxY)}};Vector.prototype.unfloat=function(){this.x=Math.round(this.x);this.y=Math.round(this.y)};Vector.prototype.unfloatCopy=function(){return new Vector(Math.round(this.x),Math.round(this.y))}},{}],victor:[function(require,module,exports){module.exports=require("1Xd6Lg")},{}]},{},[]);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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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){var process=module.exports={};process.nextTick=function(){var canSetImmediate=typeof window!=="undefined"&&window.setImmediate;var canPost=typeof window!=="undefined"&&window.postMessage&&window.addEventListener;if(canSetImmediate){return function(f){return window.setImmediate(f)}}if(canPost){var queue=[];window.addEventListener("message",function(ev){var source=ev.source;if((source===window||source===null)&&ev.data==="process-tick"){ev.stopPropagation();if(queue.length>0){var fn=queue.shift();fn()}}},true);return function nextTick(fn){queue.push(fn);window.postMessage("process-tick","*")}}return function nextTick(fn){setTimeout(fn,0)}}();process.title="browser";process.browser=true;process.env={};process.argv=[];function noop(){}process.on=noop;process.once=noop;process.off=noop;process.emit=noop;process.binding=function(name){throw new Error("process.binding is not supported")};process.cwd=function(){return"/"};process.chdir=function(dir){throw new Error("process.chdir is not supported")}},{}],"5kejYY":[function(require,module,exports){var now=require("performance-now"),global=typeof window==="undefined"?{}:window,vendors=["ms","moz","webkit","o"],suffix="AnimationFrame",raf=global["request"+suffix],caf=global["cancel"+suffix]||global["cancelRequest"+suffix];for(var i=0;i<vendors.length&&!raf;i++){raf=global[vendors[i]+"Request"+suffix];caf=global[vendors[i]+"Cancel"+suffix]||global[vendors[i]+"CancelRequest"+suffix]}if(!raf){var last=0,id=0,queue=[],frameDuration=1e3/60;raf=function(callback){if(queue.length===0){var _now=now(),next=Math.max(0,frameDuration-(_now-last));last=next+_now;setTimeout(function(){var cp=queue.slice(0);queue.length=0;for(var i=0;i<cp.length;i++){if(!cp[i].cancelled){try{cp[i].callback(last)}catch(e){}}}},next)}queue.push({handle:++id,callback:callback,cancelled:false});return id};caf=function(handle){for(var i=0;i<queue.length;i++){if(queue[i].handle===handle){queue[i].cancelled=true}}}}module.exports=function(){return raf.apply(global,arguments)};module.exports.cancel=function(){caf.apply(global,arguments)}},{"performance-now":4}],raf:[function(require,module,exports){module.exports=require("5kejYY")},{}],4:[function(require,module,exports){(function(process){(function(){var getNanoSeconds,hrtime,loadTime;if(typeof performance!=="undefined"&&performance!==null&&performance.now){module.exports=function(){return performance.now()}}else if(typeof process!=="undefined"&&process!==null&&process.hrtime){module.exports=function(){return(getNanoSeconds()-loadTime)/1e6};hrtime=process.hrtime;getNanoSeconds=function(){var hr;hr=hrtime();return hr[0]*1e9+hr[1]};loadTime=getNanoSeconds()}else if(Date.now){module.exports=function(){return Date.now()-loadTime};loadTime=Date.now()}else{module.exports=function(){return(new Date).getTime()-loadTime};loadTime=(new Date).getTime()}}).call(this)}).call(this,require("/home/admin/browserify-cdn/node_modules/browserify/node_modules/insert-module-globals/node_modules/process/browser.js"))},{"/home/admin/browserify-cdn/node_modules/browserify/node_modules/insert-module-globals/node_modules/process/browser.js":1}]},{},[]);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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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}({oz87vw:[function(require,module,exports){void function(){var scroll="pageXOffset"in window?{x:"pageXOffset",y:"pageYOffset"}:{x:"scrollX",y:"scrollY"};var translate={down:"down",up:"up",move:"move",over:"over",out:"out",grab:"grab",drag:"drag",drop:"drop",click:"click",wheel:"wheel",contextmenu:"click",dblclick:"dblclick",mousedown:"down",mouseup:"up",mousemove:"move",mouseover:"over",mouseout:"out",mousewheel:"wheel"};var states=[],keybinds=Object.create(null);void function(i,name){while(i--){states[i]=Object.freeze({left:(i&1)>0,middle:(i&2)>0,right:(i&4)>0});name=[];states[i].left&&name.push("left");states[i].middle&&name.push("middle");states[i].right&&name.push("right");keybinds[name.join("+")]=i}}(8);function interpret(input){if(input==null)return 0;switch(typeof input){case"number":return input<8?input:0;case"string":return input in keybinds?keybinds[input]:0;case"boolean":return+input;case"function":case"object":return(input.left?1:0)|(input.middle?2:0)|(input.right?4:0)}}var allMouse="move over out down up wheel click dblclick grab drag drop";function listen(view,handlers){for(var k in handlers)view.addEventListener(k,handlers[k],true)}function Mouse(view){if(!(this instanceof Mouse))return new Mouse(view);var self=this;var update=this.update.bind(this);var count=0;this.view=view;this.x=0;this.y=0;this.buttons=0;this.buttonStates=states[0];this.active=false;this.listeners=Object.create(null);this.lastActivity=Date.now();this.dragging=false;function dispatch(e){self.update(e);self.emit(e)}var events={mousewheel:dispatch,dblclick:dispatch,mouseup:dispatch,click:function click(e){self.update(e);if(self.dragging){self.lastType="drop";self.emit(e);self.lastType="click";self.dragging=false}self.emit(e);self.buttons&=~(1<<e.button);self.buttonStates=states[self.buttons%8]},mouseover:function over(e){if(e.relatedTarget===null){self.update(e);self.emit(e)}},mouseout:function out(e){if(e.relatedTarget===null){self.update(e);if(self.dragging){self.lastType="drop";self.emit(e)}self.update(e);self.emit(e)}},mousedown:function down(e){self.buttons|=1<<e.button;self.buttonStates=states[self.buttons%8];self.update(e);self.emit(e)},contextmenu:function rightclick(e){if(self.buttons!==4||self.dragging)e.preventDefault();events.click(e)},mousemove:function move(e){if(self.dragging){self.update(e);self.lastType="drag";self.emit(e)}else if(self.buttons&&self.lastType==="down"){self.update(self.last);self.dragging=true;self.lastType="grab";self.emit(self.last)}self.update(e);self.emit(e)}};listen(view,events)}function findHandler(buttons,handler){if(!handler&&typeof buttons==="function")handler=buttons,buttons="buttons"in handler?handler.buttons:0;else buttons=interpret(buttons);handler.buttons=buttons;return handler}Mouse.prototype={constructor:Mouse,emit:function emit(event){var listeners=this.listeners[this.lastType];if(listeners)for(var i=0;i<listeners.length;i++)if(!listeners[i].buttons||listeners[i].buttons===this.buttons)listeners[i].call(this,event)},on:function on(types,buttons,handler){types==="*"&&(types=allMouse);handler=findHandler(buttons,handler);types.split(/\s+/).forEach(function(type){type=translate[type];this[type]||(this[type]=[]);this[type].push(handler)},this.listeners)},once:function once(types,buttons,handler){handler=findHandler(buttons,handler);this.on(types,handler.buttons,function single(e){handler.call(this,e);this.off(types,single)})},off:function off(types,handler){types==="*"&&(types=allMouse);types.split(/\s+/).forEach(function(type){var listeners=this[translate[type]];if(listeners){var index=listeners.indexOf(handler);if(~index)listeners.splice(index,1)}},this.listeners)},update:function update(e){e.name=this.lastType=translate[e.type];e.buttons=this.buttons;e.buttonStates=this.buttonStates;this.x=e.clientX;this.y=e.clientY;this.lastActivity=e.timeStamp;this.last=e}};Object.keys(Mouse.prototype).forEach(function(key){Object.defineProperty(Mouse.prototype,key,{enumerable:false})});if(typeof Window!=="undefined")Window.prototype.Mouse=Mouse;window.mouse=new Mouse(window)}()},{}],mouse:[function(require,module,exports){module.exports=require("oz87vw")},{}]},{},[]);var Victor=require("victor");var raf=require("raf");require("mouse");var canvas=document.createElement("canvas");var ctx=canvas.getContext("2d");ctx.font="10px sans-serif";var v1=new Victor(200,200);var v2=new Victor(350,350);function drawXGuide(){var dx=v2.distanceX(v1);var dy=v2.distanceY(v1);var offset=7;if(dy>0){offset*=-1}var from=new Victor(v1.x,v1.y+offset);var to=new Victor(v1.x+dx,v1.y+offset);var text=new Victor(from.x+dx/2,from.y+offset);ctx.beginPath();ctx.moveTo(from.x,from.y);ctx.lineWidth=1;ctx.lineTo(to.x,to.y);ctx.strokeStyle="#afe9c6";ctx.stroke();ctx.textAlign="center";ctx.textBaseline="middle";ctx.fillStyle="#afe9c6";ctx.fillText("x: "+dx,text.x,text.y)}function drawYGuide(){var dx=v2.distanceX(v1);var dy=v2.distanceY(v1);var offset=7;if(dx>0){offset*=-1}var from=new Victor(v1.x+offset,v1.y);var to=new Victor(v1.x+offset,v1.y+dy);var text=new Victor(from.x+offset,from.y+dy/2);ctx.beginPath();ctx.moveTo(from.x,from.y);ctx.lineWidth=1;ctx.lineTo(to.x,to.y);ctx.strokeStyle="#afe9c6";ctx.stroke();ctx.save();ctx.translate(text.x,text.y);var rot=-Math.PI/2;if(offset>=0){rot*=-1}ctx.rotate(rot);ctx.textAlign="center";ctx.textBaseline="middle";ctx.fillStyle="#afe9c6";ctx.fillText("y: "+dy,0,0);ctx.restore()}function drawOriginPoint(){ctx.beginPath();ctx.arc(v1.x,v1.y,3,0,2*Math.PI,false);ctx.strokeStyle="#0cf";ctx.stroke()}function drawRadius(){ctx.beginPath();ctx.moveTo(v1.x,v1.y);ctx.lineTo(v2.x,v2.y);ctx.strokeStyle="#f59";ctx.stroke()}function drawCircle(){ctx.beginPath();ctx.arc(v1.x,v1.y,v1.distance(v2),0,2*Math.PI,false);ctx.strokeStyle="#0cf";ctx.stroke()}function draw(){ctx.fillStyle="#242424";ctx.fillRect(0,0,canvas.width,canvas.height);drawXGuide();drawYGuide();drawOriginPoint();drawRadius();drawCircle()}raf(draw);mouse.on("move",function(e){v2.x=e.layerX;v2.y=e.layerY;raf(draw)});document.body.style.margin=0;document.body.style.padding=0;document.body.appendChild(canvas);canvas.width=window.innerWidth;canvas.height=window.innerHeight;

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "victor": "0.0.1",
    "raf": "1.0.1",
    "mouse": "0.0.1"
  }
}

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