Skip to content

Instantly share code, notes, and snippets.

@kirbysayshi kirbysayshi/index.js
Last active Nov 8, 2017

Embed
What would you like to do?
requirebin sketch
function swiper (root, onUp, onRight, onDown, onLeft) {
const touches = [];
root.addEventListener('touchstart', stash, false);
root.addEventListener('touchmove', stash, false);
root.addEventListener('touchcancel', function () { touches.length = 0; }, false);
root.addEventListener('touchend', compute, false);
// same order at dots below
const cbs = [onUp, onRight, onDown, onLeft];
function compute (e) {
e.preventDefault();
const vec = dir({ x: 0, y: 0 }, touches);
const dots = [
// "up", -1 because +y in screen coords is downward
dot(vec.x, vec.y, 0, -1),
// right
dot(vec.x, vec.y, 1, 0),
// "down", 1 because -y in screen coords is upward
dot(vec.x, vec.y, 0, 1),
// left
dot(vec.x, vec.y, -1, 0),
]
const max = Math.max.apply(null, dots);
const idx = dots.indexOf(max);
document.body.innerHTML = ''
+ 'avg ' + JSON.stringify(vec)
+ '<br>'
+ 'dot {0,1} ' + dots[0]
+ '<br>'
+ 'dot {1,0} ' + dots[1]
+ '<br>'
+ 'dot {0,-1} ' + dots[2]
+ '<br>'
+ 'dot {-1,0} ' + dots[3];
cbs[idx]();
touches.length = 0;
}
function dir (out, touches) {
const originX = touches[0].x;
const originY = touches[0].y;
out.x = 0;
out.y = 0;
for (var i = 0; i < touches.length; i++) {
out.x += touches[i].x - originX;
out.y += touches[i].y - originY;
}
out.x = out.x / touches.length;
out.y = out.y / touches.length;
return out;
}
function stash (e) {
e.preventDefault();
const changed = e.changedTouches;
for (var i = 0; i < changed.length; i++) {
const touch = changed[i];
touches.push({
x: touch.pageX,
y: touch.pageY,
});
}
}
function dot (x1, y1, x2, y2) {
return x1 * x2 + y1 * y2;
}
}
swiper(document,
function () { document.body.innerHTML += '<br>up' },
function () { document.body.innerHTML += '<br>right' },
function () { document.body.innerHTML += '<br>down' },
function () { document.body.innerHTML += '<br>left' }
);
setTimeout(function(){function swiper(root,onUp,onRight,onDown,onLeft){const touches=[];root.addEventListener("touchstart",stash,false);root.addEventListener("touchmove",stash,false);root.addEventListener("touchcancel",function(){touches.length=0},false);root.addEventListener("touchend",compute,false);const cbs=[onUp,onRight,onDown,onLeft];function compute(e){e.preventDefault();const vec=dir({x:0,y:0},touches);const dots=[dot(vec.x,vec.y,0,-1),dot(vec.x,vec.y,1,0),dot(vec.x,vec.y,0,1),dot(vec.x,vec.y,-1,0)];const max=Math.max.apply(null,dots);const idx=dots.indexOf(max);document.body.innerHTML=""+"avg "+JSON.stringify(vec)+"<br>"+"dot {0,1} "+dots[0]+"<br>"+"dot {1,0} "+dots[1]+"<br>"+"dot {0,-1} "+dots[2]+"<br>"+"dot {-1,0} "+dots[3];cbs[idx]();touches.length=0}function dir(out,touches){const originX=touches[0].x;const originY=touches[0].y;out.x=0;out.y=0;for(var i=0;i<touches.length;i++){out.x+=touches[i].x-originX;out.y+=touches[i].y-originY}out.x=out.x/touches.length;out.y=out.y/touches.length;return out}function stash(e){e.preventDefault();const changed=e.changedTouches;for(var i=0;i<changed.length;i++){const touch=changed[i];touches.push({x:touch.pageX,y:touch.pageY})}}function dot(x1,y1,x2,y2){return x1*x2+y1*y2}}swiper(document,function(){document.body.innerHTML+="<br>up"},function(){document.body.innerHTML+="<br>right"},function(){document.body.innerHTML+="<br>down"},function(){document.body.innerHTML+="<br>left"})},0);
{
"name": "requirebin-sketch",
"description": "determine if touch swipes are generally up, right, down, left",
"version": "1.0.0",
"dependencies": {}
}
<!-- contents of this file will be placed inside the <body> -->
<!-- contents of this file will be placed inside the <head> -->
<style type="text/css">
body, html { height: 100%; width: 100%; overflow: hidden }
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.