2018-03-27 17:39:08 +00:00
|
|
|
//////////////////
|
|
|
|
// HELPERS ///////
|
|
|
|
//////////////////
|
|
|
|
|
2018-04-18 18:02:27 +00:00
|
|
|
Math.TAU = 6.2831853072; // for true believers
|
2018-03-27 17:39:08 +00:00
|
|
|
|
|
|
|
// The poor man's jQuery
|
|
|
|
function $(query){
|
|
|
|
return document.querySelector(query);
|
|
|
|
}
|
|
|
|
function $all(query){
|
|
|
|
return document.querySelectorAll(query);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Wide Sigmoid
|
|
|
|
function sigmoid(x){
|
|
|
|
return x / (1 + Math.abs(x));
|
|
|
|
}
|
|
|
|
|
|
|
|
// Create retina canvas
|
|
|
|
function createCanvas(canvas, width, height){
|
|
|
|
|
|
|
|
// The "canvas" arg not provided? make a new one!
|
|
|
|
if(arguments.length==2){
|
|
|
|
height = arguments[1];
|
2018-03-28 14:57:19 +00:00
|
|
|
width = arguments[0];
|
2018-03-27 17:39:08 +00:00
|
|
|
canvas = document.createElement("canvas");
|
|
|
|
}
|
|
|
|
|
|
|
|
// Set difference in width & height
|
|
|
|
canvas.width = width*2;
|
|
|
|
canvas.height = height*2;
|
|
|
|
canvas.style.width = width;
|
|
|
|
canvas.style.height = height;
|
|
|
|
|
|
|
|
return canvas;
|
|
|
|
|
2018-03-27 19:20:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Copy an object
|
|
|
|
function cloneObject(obj){
|
|
|
|
return JSON.parse(JSON.stringify(obj));
|
|
|
|
}
|
2018-03-28 17:12:05 +00:00
|
|
|
|
|
|
|
// Get words
|
|
|
|
function getWords(wordsID){
|
2018-04-06 16:06:55 +00:00
|
|
|
return $("words#"+wordsID).innerHTML.trim();
|
2018-04-01 16:34:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Remove from array
|
|
|
|
function removeFromArray(array, item){
|
|
|
|
var index = array.indexOf(item);
|
|
|
|
if(index>=0) array.splice(index,1);
|
|
|
|
}
|
2018-04-02 17:43:20 +00:00
|
|
|
|
|
|
|
// Fade In
|
|
|
|
function fadeIn(container, dom){
|
|
|
|
dom.style.opacity = 0;
|
2018-04-03 15:25:13 +00:00
|
|
|
dom.classList.add("transitionable");
|
2018-04-03 17:32:26 +00:00
|
|
|
dom.style.display = "block";
|
|
|
|
if(!container.contains(dom)) container.appendChild(dom);
|
2018-04-02 17:43:20 +00:00
|
|
|
setTimeout(function(){
|
|
|
|
dom.style.opacity = 1;
|
|
|
|
},50);
|
|
|
|
}
|
|
|
|
function fadeOut(container, dom){
|
2018-04-03 15:25:13 +00:00
|
|
|
dom.classList.add("transitionable");
|
2018-04-02 17:43:20 +00:00
|
|
|
dom.style.opacity = 0;
|
|
|
|
setTimeout(function(){
|
2018-04-03 17:32:26 +00:00
|
|
|
if(container.contains(dom)) container.removeChild(dom);
|
2018-04-02 17:43:20 +00:00
|
|
|
},300);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Tween position
|
2018-04-15 21:24:22 +00:00
|
|
|
function tweenPosition(from, to, callback, ease, speed){
|
2018-04-02 17:43:20 +00:00
|
|
|
var x1 = from.x;
|
|
|
|
var y1 = from.y;
|
|
|
|
var x2 = to.x;
|
|
|
|
var y2 = to.y;
|
|
|
|
var dx = x2-x1;
|
|
|
|
var dy = y2-y1;
|
|
|
|
var t = 0;
|
2018-04-15 21:24:22 +00:00
|
|
|
ease = ease || easeInOutSine;
|
|
|
|
speed = speed || 3/60;
|
2018-04-02 17:43:20 +00:00
|
|
|
var handle = subscribe("update", function(){
|
|
|
|
|
|
|
|
// Time
|
2018-04-15 21:24:22 +00:00
|
|
|
t += speed;
|
2018-04-02 17:43:20 +00:00
|
|
|
if(t>=1){
|
|
|
|
from.x = x2;
|
|
|
|
from.y = y2;
|
|
|
|
unsubscribe(handle);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Update
|
|
|
|
from.x = x1 + dx*easeInOutSine(t);
|
|
|
|
from.y = y1 + dy*easeInOutSine(t);
|
|
|
|
|
2018-04-12 17:12:45 +00:00
|
|
|
// Callback
|
|
|
|
if(callback){
|
|
|
|
callback(from);
|
|
|
|
}
|
|
|
|
|
2018-04-02 17:43:20 +00:00
|
|
|
});
|
|
|
|
}
|
2018-04-12 17:12:45 +00:00
|
|
|
/*function tweenBox(box, to){
|
|
|
|
var from = {
|
|
|
|
x: parseInt(box.style.left),
|
|
|
|
y: parseInt(box.style.top)
|
|
|
|
};
|
|
|
|
to.x = (to.x===undefined) ? from.x : to.x;
|
|
|
|
to.y = (to.y===undefined) ? from.y : to.y;
|
|
|
|
tweenPosition(from, to, function(position){
|
|
|
|
box.style.left = position.x + "px";
|
|
|
|
box.style.top = position.y + "px";
|
|
|
|
});
|
|
|
|
}*/
|
2018-04-02 17:43:20 +00:00
|
|
|
// From Robert Penner: http://robertpenner.com/scripts/easing_equations.txt
|
|
|
|
function easeInOutSine(t) {
|
|
|
|
return -1/2 * (Math.cos((Math.TAU/2)*t) - 1);
|
|
|
|
};
|
2018-04-15 21:24:22 +00:00
|
|
|
function easeLinear(t){
|
|
|
|
return t;
|
|
|
|
}
|
2018-04-02 17:43:20 +00:00
|
|
|
|
|
|
|
// Get Bounding Box of points
|
|
|
|
function getBoundsOfPoints(points){
|
|
|
|
var minX=Infinity, minY=Infinity,
|
|
|
|
maxX=-Infinity, maxY=-Infinity;
|
|
|
|
points.forEach(function(p){
|
|
|
|
if(p.x<minX) minX=p.x;
|
|
|
|
if(p.y<minY) minY=p.y;
|
|
|
|
if(maxX<p.x) maxX=p.x;
|
|
|
|
if(maxY<p.y) maxY=p.y;
|
|
|
|
});
|
|
|
|
return {
|
|
|
|
x: minX,
|
|
|
|
y: minY,
|
|
|
|
width: maxX-minX,
|
|
|
|
height: maxY-minY,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2018-04-10 17:00:22 +00:00
|
|
|
// Some Vector Shtuff
|
|
|
|
function getVectorFromTo(from, to){
|
|
|
|
return {
|
|
|
|
x: to.x - from.x,
|
|
|
|
y: to.y - from.y,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function getVectorLength(v){
|
|
|
|
return Math.sqrt(v.x*v.x + v.y*v.y);
|
|
|
|
}
|
|
|
|
function getUnitVector(v){
|
|
|
|
var length = getVectorLength(v);
|
|
|
|
return {
|
|
|
|
x: v.x/length,
|
|
|
|
y: v.y/length
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function multiplyVector(v, scale){
|
|
|
|
return {
|
|
|
|
x: v.x * scale,
|
|
|
|
y: v.y * scale
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function addVectors(a,b){
|
|
|
|
return {
|
|
|
|
x: a.x + b.x,
|
|
|
|
y: a.y + b.y
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function rotateVector(v, a){
|
|
|
|
return {
|
|
|
|
x: Math.cos(a)*v.x - Math.sin(a)*v.y,
|
|
|
|
y: Math.sin(a)*v.x + Math.cos(a)*v.y
|
|
|
|
}
|
|
|
|
}
|
2018-04-02 17:43:20 +00:00
|
|
|
|
2018-04-24 14:22:06 +00:00
|
|
|
// Cross Browser Crap
|
|
|
|
function _getBoundingClientRect(dom){
|
|
|
|
var bounds = dom.getBoundingClientRect();
|
|
|
|
if(!bounds.x) bounds.x = bounds.left; // crossbrowser crap
|
|
|
|
if(!bounds.y) bounds.y = bounds.top; // crossbrowser crap
|
|
|
|
return bounds;
|
2018-04-24 18:12:38 +00:00
|
|
|
}
|
|
|
|
function _stopPropButton(button){
|
|
|
|
button.onmousedown = function(event){
|
|
|
|
event.stopPropagation();
|
|
|
|
};
|
|
|
|
button.ontouchstart = function(event){
|
|
|
|
event.stopPropagation();
|
|
|
|
};
|
2018-04-24 14:22:06 +00:00
|
|
|
}
|