Skip to content

Commit

Permalink
Temporarily made front side switching
Browse files Browse the repository at this point in the history
  • Loading branch information
Zhou Yu committed Jul 11, 2012
1 parent aadf1c8 commit 0e390a2
Showing 1 changed file with 122 additions and 90 deletions.
212 changes: 122 additions & 90 deletions rubic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,21 @@
border: 1px solid white;
-webkit-transform-style: preserve-3d;
}
#face {
position: absolute;
height: 100px;
width: 100px;
-webkit-transform-style: preserve-3d;
}
.block {
position: absolute;
height: 100px;
width: 100px;
/*
border: 1px solid cyan;
border: 1px solid cyan;
*/
-webkit-transition: -webkit-transform 1s, opacity 2s;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s, opacity 2s;
}
.plane {
position: absolute;
Expand Down Expand Up @@ -111,8 +117,40 @@
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript" charset="utf-8">
function Matrix(m) {
this.n = m.length;
this.m = m;
if (typeof m == 'string') {
var i, j;

m = m.replace(/ /g, '');
this.m = [];
var mm = m.split(',');

if (mm.length == 6) { // 3x2 -> 4x4
this.n = 4;
this.m[0] = [parseFloat(mm[0]), parseFloat(mm[1]), 0, 0];
this.m[1] = [parseFloat(mm[2]), parseFloat(mm[3]), 0, 0];
this.m[2] = [0,0,1,0];
this.m[3] = [parseFloat(mm[4]), parseFloat(mm[5]), 0, 1];
} else {
this.n = Math.sqrt(mm.length);
for (i = 0; i < this.n; i ++) {
this.m[i] = [];
for (j = 0; i < this.n; j ++) {
this.m[i][j] = parseFloat(mm[i * this.n + j]);
}
}
}
} else if (m instanceof Array) {
if (m.length == 3 && m[0].length == 2) { // 3x2 -> 4x4
this.n = 4;
this.m[0] = m[0].concat([0,0]);
this.m[1] = m[1].concat([0,0]);
this.m[2] = [0,0,1,0];
this.m[3] = m[3].concat([0,1]);
} else {
this.n = m.length;
this.m = m;
}
}
}

Matrix.prototype.multiply = function (xyzt) {
Expand Down Expand Up @@ -178,10 +216,15 @@
];
var m;
var x, y, z;
var i;
var eBlock, ePlane;
var i,j;
var eFace, eBlock, ePlane;
var plane;
var blocks = [];
var xyz = ['x', 'y', 'z'];

// Create the face element, which contains 9 blocks at the same side
$("<div id='face'/>").appendTo("#shape");

for (z = 0; z < 3; ++z) {
blocks[z] = [];
for (y = 0; y < 3; ++y) {
Expand Down Expand Up @@ -230,92 +273,84 @@
}
}

function rotateBlock(blocks, m, x, y, z) {
var result;
var x2,y2,z2,x3,y3,z3;
var mStr;
var matrix = '';

var clicked = false;
result = m.multiply([x,y,z,1]);
x2 = x + 1;
y2 = y + 1;
z2 = z + 1;
x3 = result[0] + 1;
y3 = result[1] + 1;
z3 = result[2] + 1;
if (x2 == x3 && y2 == y3 && z2 == z3) {
return;
}
blocks[z3][y3][x3].elemPrev = blocks[z3][y3][x3].elem; // save the current one
if (blocks[z2][y2][x2].elemPrev) {
blocks[z3][y3][x3].elem = blocks[z2][y2][x2].elemPrev; // assign the new one
blocks[z2][y2][x2].elemPrev = null;
} else {
blocks[z3][y3][x3].elem = blocks[z2][y2][x2].elem; // assign the new one
blocks[z2][y2][x2].elem = null;
}
//matrix += result[0] + 1 + ',' + (result[1] + 1) + ',' + (result[2] + 1) + '<br/>';
matrix += x + ',' + y + ',' + z + ' --> ' + result[0] + ',' + result[1] + ',' + result[2] + '<br/>';
//matrix += (x2) + ',' + (y2) + ',' + (z2) + ' --> ' + x3 + ',' + y3 + ',' + z3 + '<br/>';
//if (x2 == 2 && y2 == 2) {
//$("#debug").html("x2,y2,z2: " + x2 + "," + y2 + "," + z2 + " --> " + "x3,y3,z3: " + x3 + "," + y3 + "," + z3);
$("#matrix3d").html(matrix.toString());
mStr = $(blocks[z3][y3][x3].elem).css("-webkit-transform");
$("#debug").html("mStr: " + mStr);
if (mStr.search('matrix3d') != 0) { // is 3x2
mStr = mStr.replace(/^matrix\((.*)\)$/, '$1');
mStr = 'matrix3d(' + (new Matrix(mStr)).toString() + ')';
}
mStr = mStr.replace(/(,[^,]+){4}$/, ',');
mStr += (x3 - 1) * 100 + ',' + (y3 - 1) * 100 + ',' + (z3 - 1) * 100 + ',1)';
mStr += ' ' + 'matrix3d(' + m.toString() + ')';
//$("#matrix3d").html(mStr);
$(blocks[z3][y3][x3].elem).css("-webkit-transform", mStr);
//}
}

$("#shape").click(function() {
if (!clicked) {
//$(".plane").css("-webkit-transform", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -50, 1)");
var plane = {xyz: 'z', num: 1};
var x,y,z;
var result;
var m, mStr;
var matrix = '';
switch (plane.xyz) {
case 'x':
m = new Matrix([[1,0,0,0], [0,0,-1,0], [0,1,0,0], [0,0,0,1]]);
break;
case 'y':
m = new Matrix([[0,0,-1,0], [0,1,0,0], [1,0,0,0], [0,0,0,1]]);
break;
case 'z':
m = new Matrix([[0,1,0,0], [-1,0,0,0], [0,0,1,0], [0,0,0,1]]);
break;
//$(".plane").css("-webkit-transform", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -50, 1)");
var plane = {xyz: 'x', num: 0};
var x,y,z;
var m;
switch (plane.xyz) {
case 'x':
m = new Matrix([[1,0,0,0], [0,0,1,0], [0,-1,0,0], [0,0,0,1]]);
break;
case 'y':
m = new Matrix([[0,0,1,0], [0,1,0,0], [-1,0,0,0], [0,0,0,1]]);
break;
case 'z':
m = new Matrix([[0,1,0,0], [-1,0,0,0], [0,0,1,0], [0,0,0,1]]);
break;
}
//$("#debug").html(m.toString());
for (z = -1; z < 2; z ++) {
if (plane.xyz === 'z' && plane.num != z) {
continue;
}
$("#debug").html(m.toString());
for (z = -1; z < 2; z ++) {
if (plane.xyz === 'z' && plane.num != z) {
for (y = -1; y < 2; y ++) {
if (plane.xyz === 'y' && plane.num != y) {
continue;
}
for (y = -1; y < 2; y ++) {
if (plane.xyz === 'y' && plane.num != y) {
continue;
}
if (plane.xyz === 'x') {
if (plane.num == x) {
result = m.multiply([z,y,x,1]);
if (blocks[z+1][y+1][x+1].elemPrev) {
blocks[z+1][y+1][x+1].elem = blocks[z+1][y+1][x+1].elemPrev;
blocks[z+1][y+1][x+1].elemPrev = null;
}
blocks[result[0]+1][result[1]+1][result[2]+1].elemPrev = blocks[result[0]+1][result[1]+1][result[2]+1].elem;
blocks[result[0]+1][result[1]+1][result[2]+1].elem = blocks[z+1][y+1][x+1].elem;
blocks[z+1][y+1][x+1].elem = null;
$("#matrix3d").html(result[0] + ',' + result[1] + ',' + result[2]);
$(blocks[result[0]+1][result[1]+1][result[2]+1].elem).css("-webkit-transform", "matrix3d(" + m.toString() + ")");
}
} else {
for (x = -1; x < 2; x ++) {
result = m.multiply([x,y,z,1]);
//result = [z,y,x,1];
x2 = x + 1;
y2 = y + 1;
z2 = z + 1;
x3 = result[0] + 1;
y3 = result[1] + 1;
z3 = result[2] + 1;
if (x2 == x3 && y2 == y3 && z2 == z3) {
continue;
}
if (blocks[z2][y2][x2].elemPrev) {
blocks[z2][y2][x2].elem = blocks[z2][y2][x2].elemPrev;
blocks[z2][y2][x2].elemPrev = null;
}
blocks[z3][y3][x3].elemPrev = blocks[z3][y3][x3].elem; // save the current one
blocks[z3][y3][x3].elem = blocks[z2][y2][x2].elem; // assign the new one
blocks[z2][y2][x2].elem = null;
//matrix += result[0] + 1 + ',' + (result[1] + 1) + ',' + (result[2] + 1) + '<br/>';
matrix += x + ',' + y + ',' + z + ' --> ' + result[0] + ',' + result[1] + ',' + result[2] + '<br/>';
//matrix += (x2) + ',' + (y2) + ',' + (z2) + ' --> ' + x3 + ',' + y3 + ',' + z3 + '<br/>';
//if (x2 == 2 && y2 == 2) {
//$("#debug").html("x2,y2,z2: " + x2 + "," + y2 + "," + z2 + " --> " + "x3,y3,z3: " + x3 + "," + y3 + "," + z3);
$("#matrix3d").html(matrix.toString());
mStr = $(blocks[z3][y3][x3].elem).css("-webkit-transform");
$("#debug").html("mStr: " + mStr);
mStr = mStr.replace(/(,[^,]+){4}$/, ',');
mStr += (x3 - 1) * 100 + ',' + (y3 - 1) * 100 + ',' + (z3 - 1) * 100 + ',1)';
mStr += ' ' + 'matrix3d(' + m.toString() + ')';
//$("#matrix3d").html(mStr);
$(blocks[z3][y3][x3].elem).css("-webkit-transform", mStr);
//}
}
if (plane.xyz === 'x') {
x = plane.num;
rotateBlock(blocks, m, x, y, z);
} else {
for (x = -1; x < 2; x ++) {
rotateBlock(blocks, m, x, y, z);
}
}
}
// $("#matrix3d").html(matrix);
clicked = true;
} else {
//$(".plane").css("-webkit-transform", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 50, 1)");
clicked = false;
}
});

Expand All @@ -335,14 +370,11 @@
dx = x1 - x0;
dy = y1 - y0;
var m = $("#shape").css("-webkit-transform");
if (m === "none") m = '';
if (m === "none") {
m = '';
}
var w = (dx / 300) * Math.PI;
var v = -(dy / 300) * Math.PI;
//m += " matrix3d(" +
// Math.cos(w) + ", 0," + -Math.sin(w) + ",0," +
// "0," + Math.cos(v) + "," + Math.sin(v) + ",0," +
// Math.sin(w) + "," + -Math.sin(v) + "," + Math.cos(w) * Math.cos(v) + ",0," +
// "0, 0, 0, 1)";
m += " matrix3d(" + Math.cos(w) + "," + "0," + -Math.sin(w) + "," + "0," + "0," + "1," + "0," + "0," + Math.sin(w) + "," + "0," + Math.cos(w) + "," + "0," + "0, 0, 0, 1)";
m += " matrix3d(" + "1," + "0," + "0," + "0," + "0," + Math.cos(v) + "," + Math.sin(v) + "," + "0," + "0," + -Math.sin(v) + "," + Math.cos(v) + "," + "0," + "0, 0, 0, 1)";
$("#shape").css("-webkit-transform", m);
Expand Down

0 comments on commit 0e390a2

Please sign in to comment.