made with requirebin
Created
May 14, 2014 21:27
-
-
Save maxkueng/1f4c4f91e7a6505e0358 to your computer and use it in GitHub Desktop.
requirebin sketch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "requirebin-sketch", | |
"version": "1.0.0", | |
"dependencies": { | |
"victor": "0.0.1", | |
"raf": "1.0.1", | |
"mouse": "0.0.1" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; } | |
body, html { height: 100%; width: 100%; }</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment