requirebin sketch

index.js

var cvs = document.querySelector('#cvs');
var ctx = cvs.getContext('2d');
window.addEventListener('resize', resize, false)

function resize(e) {
  cvs.width = window.innerWidth;
  cvs.height = window.innerHeight;
}

resize();

var v3 = require('pocket-physics/v3');
var accelerate = require('pocket-physics/accelerate3d');
var inertia = require('pocket-physics/inertia3d');
var constrain = require('pocket-physics/distanceconstraint3d');

var point1 = {
  cpos: { x: 0, y: 0, z: 0 },
  ppos: { x: 0, y: 0, z: 0 },
  acel: { x: 6, y: 0, z: 0 },
  mass: 5.5
}

var point2 = {
  cpos: { x: 10, y: 0, z: 0 },
  ppos: { x: 10, y: 0, z: 0 },
  acel: { x: 0, y: 6, z: 0 },
  mass: 2.5
}

// Keep the points this far apart always.
var goal = v3.distance(point1.cpos, point2.cpos);
var dt = 16;

// 16 is the delta time between steps in milliseconds
(function step() {
	accelerate(point1, dt);
  accelerate(point2, dt);
  constrain(point1, point2, goal);
  inertia(point1, dt);
  inertia(point2, dt);
  ctx.clearRect(0, 0, cvs.width, cvs.height);
  draw(point1);
  draw(point2);
  requestAnimationFrame(step);
}());

function draw(point) {
  ctx.beginPath();
  ctx.arc(point.cpos.x, point.cpos.y, point.mass, 0, Math.PI*2, false);
  ctx.fill();
}

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}({"pocket-physics/v3":[function(require,module,exports){function v3(x,y,z){return{x:x||0,y:y||0,z:z||0}}v3.copy=function(out,a){out.x=a.x;out.y=a.y;out.z=a.z;return out};v3.set=function(out,x,y,z){out.x=x;out.y=y;out.z=z;return out};v3.add=function(out,a,b){out.x=a.x+b.x;out.y=a.y+b.y;out.z=a.z+b.z;return out};v3.sub=function(out,a,b){out.x=a.x-b.x;out.y=a.y-b.y;out.z=a.z-b.z;return out};v3.scale=function(out,a,factor){out.x=a.x*factor;out.y=a.y*factor;out.z=a.z*factor;return out};v3.distance=function(v1,v2){var x=v1.x-v2.x;var y=v1.y-v2.y;var z=v1.z-v2.z;return Math.sqrt(x*x+y*y+z*z)};v3.distance2=v3.dot=function(v1,v2){var x=v1.x-v2.x;var y=v1.y-v2.y;var z=v1.z-v2.z;return x*x+y*y+z*z};v3.magnitude=function(v1){var x=v1.x;var y=v1.y;var z=v1.z;return Math.sqrt(x*x+y*y+z*z)};v3.normalize=function(out,a){var x=a.x;var y=a.y;var z=a.z;var len=x*x+y*y+z*z;if(len>0){len=1/Math.sqrt(len);out.x=a.x*len;out.y=a.y*len;out.z=a.z*len}return out};module.exports=v3},{}]},{},[]);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){function v3(x,y,z){return{x:x||0,y:y||0,z:z||0}}v3.copy=function(out,a){out.x=a.x;out.y=a.y;out.z=a.z;return out};v3.set=function(out,x,y,z){out.x=x;out.y=y;out.z=z;return out};v3.add=function(out,a,b){out.x=a.x+b.x;out.y=a.y+b.y;out.z=a.z+b.z;return out};v3.sub=function(out,a,b){out.x=a.x-b.x;out.y=a.y-b.y;out.z=a.z-b.z;return out};v3.scale=function(out,a,factor){out.x=a.x*factor;out.y=a.y*factor;out.z=a.z*factor;return out};v3.distance=function(v1,v2){var x=v1.x-v2.x;var y=v1.y-v2.y;var z=v1.z-v2.z;return Math.sqrt(x*x+y*y+z*z)};v3.distance2=v3.dot=function(v1,v2){var x=v1.x-v2.x;var y=v1.y-v2.y;var z=v1.z-v2.z;return x*x+y*y+z*z};v3.magnitude=function(v1){var x=v1.x;var y=v1.y;var z=v1.z;return Math.sqrt(x*x+y*y+z*z)};v3.normalize=function(out,a){var x=a.x;var y=a.y;var z=a.z;var len=x*x+y*y+z*z;if(len>0){len=1/Math.sqrt(len);out.x=a.x*len;out.y=a.y*len;out.z=a.z*len}return out};module.exports=v3},{}],"pocket-physics/accelerate3d":[function(require,module,exports){var v3=require("./v3");module.exports=function(cmp,dt){cmp.cpos.x+=cmp.acel.x*dt*dt*.001;cmp.cpos.y+=cmp.acel.y*dt*dt*.001;cmp.cpos.z+=cmp.acel.z*dt*dt*.001;v3.set(cmp.acel,0,0,0)}},{"./v3":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);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){function v3(x,y,z){return{x:x||0,y:y||0,z:z||0}}v3.copy=function(out,a){out.x=a.x;out.y=a.y;out.z=a.z;return out};v3.set=function(out,x,y,z){out.x=x;out.y=y;out.z=z;return out};v3.add=function(out,a,b){out.x=a.x+b.x;out.y=a.y+b.y;out.z=a.z+b.z;return out};v3.sub=function(out,a,b){out.x=a.x-b.x;out.y=a.y-b.y;out.z=a.z-b.z;return out};v3.scale=function(out,a,factor){out.x=a.x*factor;out.y=a.y*factor;out.z=a.z*factor;return out};v3.distance=function(v1,v2){var x=v1.x-v2.x;var y=v1.y-v2.y;var z=v1.z-v2.z;return Math.sqrt(x*x+y*y+z*z)};v3.distance2=v3.dot=function(v1,v2){var x=v1.x-v2.x;var y=v1.y-v2.y;var z=v1.z-v2.z;return x*x+y*y+z*z};v3.magnitude=function(v1){var x=v1.x;var y=v1.y;var z=v1.z;return Math.sqrt(x*x+y*y+z*z)};v3.normalize=function(out,a){var x=a.x;var y=a.y;var z=a.z;var len=x*x+y*y+z*z;if(len>0){len=1/Math.sqrt(len);out.x=a.x*len;out.y=a.y*len;out.z=a.z*len}return out};module.exports=v3},{}],"pocket-physics/inertia3d":[function(require,module,exports){var v3=require("./v3");module.exports=function(cmp){var x=cmp.cpos.x*2-cmp.ppos.x,y=cmp.cpos.y*2-cmp.ppos.y,z=cmp.cpos.z*2-cmp.ppos.z;v3.set(cmp.ppos,cmp.cpos.x,cmp.cpos.y,cmp.cpos.z);v3.set(cmp.cpos,x,y,z)}},{"./v3":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);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){exports=module.exports=require("./debug");exports.log=log;exports.formatArgs=formatArgs;exports.save=save;exports.load=load;exports.useColors=useColors;var storage;if(typeof chrome!=="undefined"&&typeof chrome.storage!=="undefined")storage=chrome.storage.local;else storage=localstorage();exports.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"];function useColors(){return"WebkitAppearance"in document.documentElement.style||window.console&&(console.firebug||console.exception&&console.table)||navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31}exports.formatters.j=function(v){return JSON.stringify(v)};function formatArgs(){var args=arguments;var useColors=this.useColors;args[0]=(useColors?"%c":"")+this.namespace+(useColors?" %c":" ")+args[0]+(useColors?"%c ":" ")+"+"+exports.humanize(this.diff);if(!useColors)return args;var c="color: "+this.color;args=[args[0],c,"color: inherit"].concat(Array.prototype.slice.call(args,1));var index=0;var lastC=0;args[0].replace(/%[a-z%]/g,function(match){if("%%"===match)return;index++;if("%c"===match){lastC=index}});args.splice(lastC,0,c);return args}function log(){return"object"===typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)}function save(namespaces){try{if(null==namespaces){storage.removeItem("debug")}else{storage.debug=namespaces}}catch(e){}}function load(){var r;try{r=storage.debug}catch(e){}return r}exports.enable(load());function localstorage(){try{return window.localStorage}catch(e){}}},{"./debug":2}],2:[function(require,module,exports){exports=module.exports=debug;exports.coerce=coerce;exports.disable=disable;exports.enable=enable;exports.enabled=enabled;exports.humanize=require("ms");exports.names=[];exports.skips=[];exports.formatters={};var prevColor=0;var prevTime;function selectColor(){return exports.colors[prevColor++%exports.colors.length]}function debug(namespace){function disabled(){}disabled.enabled=false;function enabled(){var self=enabled;var curr=+new Date;var ms=curr-(prevTime||curr);self.diff=ms;self.prev=prevTime;self.curr=curr;prevTime=curr;if(null==self.useColors)self.useColors=exports.useColors();if(null==self.color&&self.useColors)self.color=selectColor();var args=Array.prototype.slice.call(arguments);args[0]=exports.coerce(args[0]);if("string"!==typeof args[0]){args=["%o"].concat(args)}var index=0;args[0]=args[0].replace(/%([a-z%])/g,function(match,format){if(match==="%%")return match;index++;var formatter=exports.formatters[format];if("function"===typeof formatter){var val=args[index];match=formatter.call(self,val);args.splice(index,1);index--}return match});if("function"===typeof exports.formatArgs){args=exports.formatArgs.apply(self,args)}var logFn=enabled.log||exports.log||console.log.bind(console);logFn.apply(self,args)}enabled.enabled=true;var fn=exports.enabled(namespace)?enabled:disabled;fn.namespace=namespace;return fn}function enable(namespaces){exports.save(namespaces);var split=(namespaces||"").split(/[\s,]+/);var len=split.length;for(var i=0;i<len;i++){if(!split[i])continue;namespaces=split[i].replace(/\*/g,".*?");if(namespaces[0]==="-"){exports.skips.push(new RegExp("^"+namespaces.substr(1)+"$"))}else{exports.names.push(new RegExp("^"+namespaces+"$"))}}}function disable(){exports.enable("")}function enabled(name){var i,len;for(i=0,len=exports.skips.length;i<len;i++){if(exports.skips[i].test(name)){return false}}for(i=0,len=exports.names.length;i<len;i++){if(exports.names[i].test(name)){return true}}return false}function coerce(val){if(val instanceof Error)return val.stack||val.message;return val}},{ms:3}],3:[function(require,module,exports){var s=1e3;var m=s*60;var h=m*60;var d=h*24;var y=d*365.25;module.exports=function(val,options){options=options||{};if("string"==typeof val)return parse(val);return options.long?long(val):short(val)};function parse(str){var match=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(str);if(!match)return;var n=parseFloat(match[1]);var type=(match[2]||"ms").toLowerCase();switch(type){case"years":case"year":case"yrs":case"yr":case"y":return n*y;case"days":case"day":case"d":return n*d;case"hours":case"hour":case"hrs":case"hr":case"h":return n*h;case"minutes":case"minute":case"mins":case"min":case"m":return n*m;case"seconds":case"second":case"secs":case"sec":case"s":return n*s;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return n}}function short(ms){if(ms>=d)return Math.round(ms/d)+"d";if(ms>=h)return Math.round(ms/h)+"h";if(ms>=m)return Math.round(ms/m)+"m";if(ms>=s)return Math.round(ms/s)+"s";return ms+"ms"}function long(ms){return plural(ms,d,"day")||plural(ms,h,"hour")||plural(ms,m,"minute")||plural(ms,s,"second")||ms+" ms"}function plural(ms,n,name){if(ms<n)return;if(ms<n*1.5)return Math.floor(ms/n)+" "+name;return Math.ceil(ms/n)+" "+name+"s"}},{}],4:[function(require,module,exports){function v3(x,y,z){return{x:x||0,y:y||0,z:z||0}}v3.copy=function(out,a){out.x=a.x;out.y=a.y;out.z=a.z;return out};v3.set=function(out,x,y,z){out.x=x;out.y=y;out.z=z;return out};v3.add=function(out,a,b){out.x=a.x+b.x;out.y=a.y+b.y;out.z=a.z+b.z;return out};v3.sub=function(out,a,b){out.x=a.x-b.x;out.y=a.y-b.y;out.z=a.z-b.z;return out};v3.scale=function(out,a,factor){out.x=a.x*factor;out.y=a.y*factor;out.z=a.z*factor;return out};v3.distance=function(v1,v2){var x=v1.x-v2.x;var y=v1.y-v2.y;var z=v1.z-v2.z;return Math.sqrt(x*x+y*y+z*z)};v3.distance2=v3.dot=function(v1,v2){var x=v1.x-v2.x;var y=v1.y-v2.y;var z=v1.z-v2.z;return x*x+y*y+z*z};v3.magnitude=function(v1){var x=v1.x;var y=v1.y;var z=v1.z;return Math.sqrt(x*x+y*y+z*z)};v3.normalize=function(out,a){var x=a.x;var y=a.y;var z=a.z;var len=x*x+y*y+z*z;if(len>0){len=1/Math.sqrt(len);out.x=a.x*len;out.y=a.y*len;out.z=a.z*len}return out};module.exports=v3},{}],"pocket-physics/distanceconstraint3d":[function(require,module,exports){var v3=require("./v3");var debug=require("debug")("pocket-physics:distanceconstraint");module.exports=function solve(p1,p2,goal){var imass1=1/(p1.mass||1);var imass2=1/(p2.mass||1);var imass=imass1+imass2;var delta=v3.sub(v3(),p2.cpos,p1.cpos);var deltaMag=v3.magnitude(delta);debug("goal",goal);debug("delta",delta);var diff=(deltaMag-goal)/deltaMag;debug("delta mag",v3.magnitude(delta));debug("diff",diff);v3.scale(delta,delta,diff/imass);debug("delta diff/imass",delta);var p1correction=v3.scale(v3(),delta,imass1);var p2correction=v3.scale(v3(),delta,imass2);debug("p1correction",p1correction);debug("p2correction",p2correction);if(p1.mass)v3.add(p1.cpos,p1.cpos,p1correction);if(p2.mass)v3.sub(p2.cpos,p2.cpos,p2correction)}},{"./v3":4,debug:1}]},{},[]);var cvs=document.querySelector("#cvs");var ctx=cvs.getContext("2d");window.addEventListener("resize",resize,false);function resize(e){cvs.width=window.innerWidth;cvs.height=window.innerHeight}resize();var v3=require("pocket-physics/v3");var accelerate=require("pocket-physics/accelerate3d");var inertia=require("pocket-physics/inertia3d");var constrain=require("pocket-physics/distanceconstraint3d");var point1={cpos:{x:0,y:0,z:0},ppos:{x:0,y:0,z:0},acel:{x:6,y:0,z:0},mass:5.5};var point2={cpos:{x:10,y:0,z:0},ppos:{x:10,y:0,z:0},acel:{x:0,y:6,z:0},mass:2.5};var goal=v3.distance(point1.cpos,point2.cpos);var dt=16;(function step(){accelerate(point1,dt);accelerate(point2,dt);constrain(point1,point2,goal);inertia(point1,dt);inertia(point2,dt);ctx.clearRect(0,0,cvs.width,cvs.height);draw(point1);draw(point2);requestAnimationFrame(step)})();function draw(point){ctx.beginPath();ctx.arc(point.cpos.x,point.cpos.y,point.mass,0,Math.PI*2,false);ctx.fill()}

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "pocket-physics": "2.6.0"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->
<canvas id="cvs"></canvas>

page-head.html

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

requirebin.md

made with requirebin