Skip to content

Commit

Permalink
Fixed problem with MultiTouch
Browse files Browse the repository at this point in the history
  • Loading branch information
Joe Yu committed Jul 18, 2012
1 parent 6e45e13 commit e5fda7e
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 36 deletions.
22 changes: 11 additions & 11 deletions rubic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,32 +32,32 @@
position: relative;
top: 200px;
margin: 0 auto;
height: 100px;
width: 100px;
height: 64px;
width: 64px;
border: 1px solid white;
-webkit-transform-style: preserve-3d;
}
#face {
position: absolute;
height: 100px;
width: 100px;
height: 64px;
width: 64px;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.5s, opacity 2s;
}
.block {
position: absolute;
height: 100px;
width: 100px;
height: 64px;
width: 64px;
/*
border: 1px solid cyan;
*/
-webkit-transform-style: preserve-3d;
}
.plane {
position: absolute;
margin: 2px;
height: 96px;
width: 96px;
margin: 1px;
height: 62px;
width: 62px;
-webkit-border-radius: 12px;
-webkit-box-sizing: border-box;
text-align: center;
Expand Down Expand Up @@ -106,7 +106,7 @@
background-color: darkorange;
}
.controls {
text-align: center;
text-align: left;
width: 80%;
margin: 0 auto;
padding: 5px 20px;
Expand All @@ -129,12 +129,12 @@ <h1>Animations, Transitions and 3D Transforms</h1>
<div>
<button onclick="resetCube()">Restore cube position</button>
</div>
-->
<div style="position:relative">
<p id="debug">debug</p>
<p id="debug2">debug2</p>
<p id="debug3">debug3</p>
</div>
-->
</div>
<div id="container">
<div id="stage">
Expand Down
56 changes: 31 additions & 25 deletions rubik.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,22 +169,22 @@ $(document).ready(function () {
ePlane.addClass(plane);
switch (plane) {
case 'green':
m = 'matrix3d(0,0,-1,0, 0,1,0,0, 1,0,0,0, 50,0,0,1)';
m = 'matrix3d(0,0,-1,0, 0,1,0,0, 1,0,0,0, 32,0,0,1)';
break;
case 'blue':
m = 'matrix3d(0,0,1,0, 0,1,0,0, -1,0,0,0, -50,0,0,1)';
m = 'matrix3d(0,0,1,0, 0,1,0,0, -1,0,0,0, -32,0,0,1)';
break;
case 'white':
m = 'matrix3d(1,0,0,0, 0,0,-1,0, 0,1,0,0, 0,50,0,1)';
m = 'matrix3d(1,0,0,0, 0,0,-1,0, 0,1,0,0, 0,32,0,1)';
break;
case 'yellow':
m = 'matrix3d(1,0,0,0, 0,0,1,0, 0,-1,0,0, 0,-50,0,1)';
m = 'matrix3d(1,0,0,0, 0,0,1,0, 0,-1,0,0, 0,-32,0,1)';
break;
case 'red':
m = 'matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,50,1)';
m = 'matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,32,1)';
break;
case 'orange':
m = 'matrix3d(-1,0,0,0, 0,1,0,0, 0,0,-1,0, 0,0,-50,1)';
m = 'matrix3d(-1,0,0,0, 0,1,0,0, 0,0,-1,0, 0,0,-32,1)';
break;
default:
break;
Expand All @@ -193,7 +193,7 @@ $(document).ready(function () {
ePlane.css("-webkit-transform", m);
ePlane.appendTo(eBlock);
}
m = 'matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, ' + (x - 1) * 100 + ',' + (y - 1) * 100 + ',' + (z - 1) * 100 + ',1)';
m = 'matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, ' + (x - 1) * 64 + ',' + (y - 1) * 64 + ',' + (z - 1) * 64 + ',1)';
eBlock.css("-webkit-transform", m);
eBlock.appendTo("#cube");
blocks[z][y][x] = {elem: eBlock, elemSaved: null};
Expand Down Expand Up @@ -230,9 +230,9 @@ $(document).ready(function () {
m2.m[3][1] = 0;
m2.m[3][2] = 0;
m2 = m.multiply(m2);
m2.m[3][0] = (x2 - 1) * 100;
m2.m[3][1] = (y2 - 1) * 100;
m2.m[3][2] = (z2 - 1) * 100;
m2.m[3][0] = (x2 - 1) * 64;
m2.m[3][1] = (y2 - 1) * 64;
m2.m[3][2] = (z2 - 1) * 64;
if (z2 == 2 && y2 == 0 && x2 == 0)
console.log("[rotateBlock] m2: " + m2);

Expand Down Expand Up @@ -334,10 +334,10 @@ $(document).ready(function () {
var m = mBlock0.multiply(mPlane0);
var t, sign;
for (t = 0; t < 3; ++ t) { // get the facing of the touched plane
if (m.m[3][t] == 150) {
if (m.m[3][t] == 96) {
sign = 1;
break;
} else if (m.m[3][t] == -150) {
} else if (m.m[3][t] == -96) {
sign = -1;
break;
}
Expand Down Expand Up @@ -425,22 +425,28 @@ $(document).ready(function () {
}).multiTouch({
touchmove: function(ev) {
var self = this;
$('#debug').html("fuck");

//var context = self.context;//event.target.getContext("2d");
var origEvent = ev.originalEvent;
var touch = origEvent.changedTouches;
var id = touch.identifier,
touch0 = self.mTouches[id][self.mTouches[id].length - 1],
touch1 = self.mTouches[id][self.mTouches[id].length - 2],
offset = self.offset();
x0 = touch.clientX - offset.left,
y0 = touch.clientY - offset.top,
x1 = touchPre.clientX - offset.left,
y1 = touchPre.clientY - offset.top;
onStageMousemoveTouchmove(x0, y0, x1, y1);
//console.log("origEvent: " + ev.originalEvent);
$.each(origEvent.changedTouches, function(i, touch) {

if ($.inArray(touch, origEvent.targetTouches) >= 0) { // filter
$('#debug2').html("fuck");
var id = touch.identifier,
touch0 = self.mTouches[id][self.mTouches[id].length - 2],
touch1 = self.mTouches[id][self.mTouches[id].length - 1],
offset = self.offset();
x0 = touch0.clientX - offset.left,
y0 = touch0.clientY - offset.top,
x1 = touch1.clientX - offset.left,
y1 = touch1.clientY - offset.top;
$('#debug').html("x0, y0, x1, y1: " + x0 + ',' + y0 + ',' + x1 + ',' + y1);
onStageMousemoveTouchmove(x0, y0, x1, y1);
}
});
}
});

}); // multiTouch
});

function resetCube() {
Expand Down

0 comments on commit e5fda7e

Please sign in to comment.