OLD | NEW |
(Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <script src="../htmlrunner.js"></script> |
| 4 <script> |
| 5 // 3D Cube Rotation |
| 6 // http://www.speich.net/computer/moztesting/3d.htm |
| 7 // Created by Simon Speich |
| 8 |
| 9 var Q = new Array(); |
| 10 var MTrans = new Array(); // transformation matrix |
| 11 var MQube = new Array(); // position information of qube |
| 12 var I = new Array(); // entity matrix |
| 13 var Origin = new Object(); |
| 14 var Testing = new Object(); |
| 15 var LoopTimer; |
| 16 |
| 17 var DisplArea = new Object(); |
| 18 DisplArea.Width = 300; |
| 19 DisplArea.Height = 300; |
| 20 |
| 21 function DrawLine(From, To) { |
| 22 var x1 = From.V[0]; |
| 23 var x2 = To.V[0]; |
| 24 var y1 = From.V[1]; |
| 25 var y2 = To.V[1]; |
| 26 var dx = Math.abs(x2 - x1); |
| 27 var dy = Math.abs(y2 - y1); |
| 28 var x = x1; |
| 29 var y = y1; |
| 30 var IncX1, IncY1; |
| 31 var IncX2, IncY2; |
| 32 var Den; |
| 33 var Num; |
| 34 var NumAdd; |
| 35 var NumPix; |
| 36 |
| 37 if (x2 >= x1) { IncX1 = 1; IncX2 = 1; } |
| 38 else { IncX1 = -1; IncX2 = -1; } |
| 39 if (y2 >= y1) { IncY1 = 1; IncY2 = 1; } |
| 40 else { IncY1 = -1; IncY2 = -1; } |
| 41 if (dx >= dy) { |
| 42 IncX1 = 0; |
| 43 IncY2 = 0; |
| 44 Den = dx; |
| 45 Num = dx / 2; |
| 46 NumAdd = dy; |
| 47 NumPix = dx; |
| 48 } |
| 49 else { |
| 50 IncX2 = 0; |
| 51 IncY1 = 0; |
| 52 Den = dy; |
| 53 Num = dy / 2; |
| 54 NumAdd = dx; |
| 55 NumPix = dy; |
| 56 } |
| 57 |
| 58 NumPix = Math.round(Q.LastPx + NumPix); |
| 59 |
| 60 var i = Q.LastPx; |
| 61 for (; i < NumPix; i++) { |
| 62 Num += NumAdd; |
| 63 if (Num >= Den) { |
| 64 Num -= Den; |
| 65 x += IncX1; |
| 66 y += IncY1; |
| 67 } |
| 68 x += IncX2; |
| 69 y += IncY2; |
| 70 } |
| 71 Q.LastPx = NumPix; |
| 72 } |
| 73 |
| 74 function CalcCross(V0, V1) { |
| 75 var Cross = new Array(); |
| 76 Cross[0] = V0[1]*V1[2] - V0[2]*V1[1]; |
| 77 Cross[1] = V0[2]*V1[0] - V0[0]*V1[2]; |
| 78 Cross[2] = V0[0]*V1[1] - V0[1]*V1[0]; |
| 79 return Cross; |
| 80 } |
| 81 |
| 82 function CalcNormal(V0, V1, V2) { |
| 83 var A = new Array(); var B = new Array(); |
| 84 for (var i = 0; i < 3; i++) { |
| 85 A[i] = V0[i] - V1[i]; |
| 86 B[i] = V2[i] - V1[i]; |
| 87 } |
| 88 A = CalcCross(A, B); |
| 89 var Length = Math.sqrt(A[0]*A[0] + A[1]*A[1] + A[2]*A[2]); |
| 90 for (var i = 0; i < 3; i++) A[i] = A[i] / Length; |
| 91 A[3] = 1; |
| 92 return A; |
| 93 } |
| 94 |
| 95 function CreateP(X,Y,Z) { |
| 96 this.V = [X,Y,Z,1]; |
| 97 } |
| 98 |
| 99 // mulitplies two matrices |
| 100 function MMulti(M1, M2) { |
| 101 var M = [[],[],[],[]]; |
| 102 var i = 0; |
| 103 var j = 0; |
| 104 for (; i < 4; i++) { |
| 105 j = 0; |
| 106 for (; j < 4; j++) M[i][j] = M1[i][0] * M2[0][j] + M1[i][1] * M2
[1][j] + M1[i][2] * M2[2][j] + M1[i][3] * M2[3][j]; |
| 107 } |
| 108 return M; |
| 109 } |
| 110 |
| 111 //multiplies matrix with vector |
| 112 function VMulti(M, V) { |
| 113 var Vect = new Array(); |
| 114 var i = 0; |
| 115 for (;i < 4; i++) Vect[i] = M[i][0] * V[0] + M[i][1] * V[1] + M[i][2] *
V[2] + M[i][3] * V[3]; |
| 116 return Vect; |
| 117 } |
| 118 |
| 119 function VMulti2(M, V) { |
| 120 var Vect = new Array(); |
| 121 var i = 0; |
| 122 for (;i < 3; i++) Vect[i] = M[i][0] * V[0] + M[i][1] * V[1] + M[i][2] *
V[2]; |
| 123 return Vect; |
| 124 } |
| 125 |
| 126 // add to matrices |
| 127 function MAdd(M1, M2) { |
| 128 var M = [[],[],[],[]]; |
| 129 var i = 0; |
| 130 var j = 0; |
| 131 for (; i < 4; i++) { |
| 132 j = 0; |
| 133 for (; j < 4; j++) M[i][j] = M1[i][j] + M2[i][j]; |
| 134 } |
| 135 return M; |
| 136 } |
| 137 |
| 138 function Translate(M, Dx, Dy, Dz) { |
| 139 var T = [ |
| 140 [1,0,0,Dx], |
| 141 [0,1,0,Dy], |
| 142 [0,0,1,Dz], |
| 143 [0,0,0,1] |
| 144 ]; |
| 145 return MMulti(T, M); |
| 146 } |
| 147 |
| 148 function RotateX(M, Phi) { |
| 149 var a = Phi; |
| 150 a *= Math.PI / 180; |
| 151 var Cos = Math.cos(a); |
| 152 var Sin = Math.sin(a); |
| 153 var R = [ |
| 154 [1,0,0,0], |
| 155 [0,Cos,-Sin,0], |
| 156 [0,Sin,Cos,0], |
| 157 [0,0,0,1] |
| 158 ]; |
| 159 return MMulti(R, M); |
| 160 } |
| 161 |
| 162 function RotateY(M, Phi) { |
| 163 var a = Phi; |
| 164 a *= Math.PI / 180; |
| 165 var Cos = Math.cos(a); |
| 166 var Sin = Math.sin(a); |
| 167 var R = [ |
| 168 [Cos,0,Sin,0], |
| 169 [0,1,0,0], |
| 170 [-Sin,0,Cos,0], |
| 171 [0,0,0,1] |
| 172 ]; |
| 173 return MMulti(R, M); |
| 174 } |
| 175 |
| 176 function RotateZ(M, Phi) { |
| 177 var a = Phi; |
| 178 a *= Math.PI / 180; |
| 179 var Cos = Math.cos(a); |
| 180 var Sin = Math.sin(a); |
| 181 var R = [ |
| 182 [Cos,-Sin,0,0], |
| 183 [Sin,Cos,0,0], |
| 184 [0,0,1,0], |
| 185 [0,0,0,1] |
| 186 ]; |
| 187 return MMulti(R, M); |
| 188 } |
| 189 |
| 190 function DrawQube() { |
| 191 // calc current normals |
| 192 var CurN = new Array(); |
| 193 var i = 5; |
| 194 Q.LastPx = 0; |
| 195 for (; i > -1; i--) CurN[i] = VMulti2(MQube, Q.Normal[i]); |
| 196 if (CurN[0][2] < 0) { |
| 197 if (!Q.Line[0]) { DrawLine(Q[0], Q[1]); Q.Line[0] = true; }; |
| 198 if (!Q.Line[1]) { DrawLine(Q[1], Q[2]); Q.Line[1] = true; }; |
| 199 if (!Q.Line[2]) { DrawLine(Q[2], Q[3]); Q.Line[2] = true; }; |
| 200 if (!Q.Line[3]) { DrawLine(Q[3], Q[0]); Q.Line[3] = true; }; |
| 201 } |
| 202 if (CurN[1][2] < 0) { |
| 203 if (!Q.Line[2]) { DrawLine(Q[3], Q[2]); Q.Line[2] = true; }; |
| 204 if (!Q.Line[9]) { DrawLine(Q[2], Q[6]); Q.Line[9] = true; }; |
| 205 if (!Q.Line[6]) { DrawLine(Q[6], Q[7]); Q.Line[6] = true; }; |
| 206 if (!Q.Line[10]) { DrawLine(Q[7], Q[3]); Q.Line[10] = true; }; |
| 207 } |
| 208 if (CurN[2][2] < 0) { |
| 209 if (!Q.Line[4]) { DrawLine(Q[4], Q[5]); Q.Line[4] = true; }; |
| 210 if (!Q.Line[5]) { DrawLine(Q[5], Q[6]); Q.Line[5] = true; }; |
| 211 if (!Q.Line[6]) { DrawLine(Q[6], Q[7]); Q.Line[6] = true; }; |
| 212 if (!Q.Line[7]) { DrawLine(Q[7], Q[4]); Q.Line[7] = true; }; |
| 213 } |
| 214 if (CurN[3][2] < 0) { |
| 215 if (!Q.Line[4]) { DrawLine(Q[4], Q[5]); Q.Line[4] = true; }; |
| 216 if (!Q.Line[8]) { DrawLine(Q[5], Q[1]); Q.Line[8] = true; }; |
| 217 if (!Q.Line[0]) { DrawLine(Q[1], Q[0]); Q.Line[0] = true; }; |
| 218 if (!Q.Line[11]) { DrawLine(Q[0], Q[4]); Q.Line[11] = true; }; |
| 219 } |
| 220 if (CurN[4][2] < 0) { |
| 221 if (!Q.Line[11]) { DrawLine(Q[4], Q[0]); Q.Line[11] = true; }; |
| 222 if (!Q.Line[3]) { DrawLine(Q[0], Q[3]); Q.Line[3] = true; }; |
| 223 if (!Q.Line[10]) { DrawLine(Q[3], Q[7]); Q.Line[10] = true; }; |
| 224 if (!Q.Line[7]) { DrawLine(Q[7], Q[4]); Q.Line[7] = true; }; |
| 225 } |
| 226 if (CurN[5][2] < 0) { |
| 227 if (!Q.Line[8]) { DrawLine(Q[1], Q[5]); Q.Line[8] = true; }; |
| 228 if (!Q.Line[5]) { DrawLine(Q[5], Q[6]); Q.Line[5] = true; }; |
| 229 if (!Q.Line[9]) { DrawLine(Q[6], Q[2]); Q.Line[9] = true; }; |
| 230 if (!Q.Line[1]) { DrawLine(Q[2], Q[1]); Q.Line[1] = true; }; |
| 231 } |
| 232 Q.Line = [false,false,false,false,false,false,false,false,false,false,fa
lse,false]; |
| 233 Q.LastPx = 0; |
| 234 } |
| 235 |
| 236 function Loop() { |
| 237 if (Testing.LoopCount > Testing.LoopMax) return; |
| 238 var TestingStr = String(Testing.LoopCount); |
| 239 while (TestingStr.length < 3) TestingStr = "0" + TestingStr; |
| 240 MTrans = Translate(I, -Q[8].V[0], -Q[8].V[1], -Q[8].V[2]); |
| 241 MTrans = RotateX(MTrans, 1); |
| 242 MTrans = RotateY(MTrans, 3); |
| 243 MTrans = RotateZ(MTrans, 5); |
| 244 MTrans = Translate(MTrans, Q[8].V[0], Q[8].V[1], Q[8].V[2]); |
| 245 MQube = MMulti(MTrans, MQube); |
| 246 var i = 8; |
| 247 for (; i > -1; i--) { |
| 248 Q[i].V = VMulti(MTrans, Q[i].V); |
| 249 } |
| 250 DrawQube(); |
| 251 Testing.LoopCount++; |
| 252 Loop(); |
| 253 } |
| 254 |
| 255 function Init(CubeSize) { |
| 256 // init/reset vars |
| 257 Origin.V = [150,150,20,1]; |
| 258 Testing.LoopCount = 0; |
| 259 Testing.LoopMax = 50; |
| 260 Testing.TimeMax = 0; |
| 261 Testing.TimeAvg = 0; |
| 262 Testing.TimeMin = 0; |
| 263 Testing.TimeTemp = 0; |
| 264 Testing.TimeTotal = 0; |
| 265 Testing.Init = false; |
| 266 |
| 267 // transformation matrix |
| 268 MTrans = [ |
| 269 [1,0,0,0], |
| 270 [0,1,0,0], |
| 271 [0,0,1,0], |
| 272 [0,0,0,1] |
| 273 ]; |
| 274 |
| 275 // position information of qube |
| 276 MQube = [ |
| 277 [1,0,0,0], |
| 278 [0,1,0,0], |
| 279 [0,0,1,0], |
| 280 [0,0,0,1] |
| 281 ]; |
| 282 |
| 283 // entity matrix |
| 284 I = [ |
| 285 [1,0,0,0], |
| 286 [0,1,0,0], |
| 287 [0,0,1,0], |
| 288 [0,0,0,1] |
| 289 ]; |
| 290 |
| 291 // create qube |
| 292 Q[0] = new CreateP(-CubeSize,-CubeSize, CubeSize); |
| 293 Q[1] = new CreateP(-CubeSize, CubeSize, CubeSize); |
| 294 Q[2] = new CreateP( CubeSize, CubeSize, CubeSize); |
| 295 Q[3] = new CreateP( CubeSize,-CubeSize, CubeSize); |
| 296 Q[4] = new CreateP(-CubeSize,-CubeSize,-CubeSize); |
| 297 Q[5] = new CreateP(-CubeSize, CubeSize,-CubeSize); |
| 298 Q[6] = new CreateP( CubeSize, CubeSize,-CubeSize); |
| 299 Q[7] = new CreateP( CubeSize,-CubeSize,-CubeSize); |
| 300 |
| 301 // center of gravity |
| 302 Q[8] = new CreateP(0, 0, 0); |
| 303 |
| 304 // anti-clockwise edge check |
| 305 Q.Edge = [[0,1,2],[3,2,6],[7,6,5],[4,5,1],[4,0,3],[1,5,6]]; |
| 306 |
| 307 // calculate squad normals |
| 308 Q.Normal = new Array(); |
| 309 for (var i = 0; i < Q.Edge.length; i++) Q.Normal[i] = CalcNormal(Q[Q.Edg
e[i][0]].V, Q[Q.Edge[i][1]].V, Q[Q.Edge[i][2]].V); |
| 310 |
| 311 // line drawn ? |
| 312 Q.Line = [false,false,false,false,false,false,false,false,false,false,fa
lse,false]; |
| 313 |
| 314 // create line pixels |
| 315 Q.NumPx = 9 * 2 * CubeSize; |
| 316 for (var i = 0; i < Q.NumPx; i++) new CreateP(0,0,0); |
| 317 |
| 318 MTrans = Translate(MTrans, Origin.V[0], Origin.V[1], Origin.V[2]); |
| 319 MQube = MMulti(MTrans, MQube); |
| 320 |
| 321 var i = 0; |
| 322 for (; i < 9; i++) { |
| 323 Q[i].V = VMulti(MTrans, Q[i].V); |
| 324 } |
| 325 DrawQube(); |
| 326 Testing.Init = true; |
| 327 Loop(); |
| 328 } |
| 329 |
| 330 window.onload = function(){ startTest("dromaeo-3d-cube", ''); |
| 331 |
| 332 test("Rotate 3D Cube", function(){ |
| 333 Init(20); |
| 334 }); |
| 335 |
| 336 endTest(); }; |
| 337 </script> |
| 338 </head> |
| 339 <body></body> |
| 340 </html> |
OLD | NEW |