2d:null 2e:["$","title",null,{"children":"I-Ching Cube | emma-ba | Observable"}] 33:T8c9,{ var canvas = DOM.canvas(640, 350); var context = canvas.getContext('2d'); context.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre //context.strokeStyle = '#222222'; var modelSize = canvas.width / 4; var scale = modelSize / 2; var cx = 0.001, cy = 0.001; var lx = null, ly = null; var x = 0, y = 0; var decay = 0.98; var move = function(e) { e.preventDefault(); var mouseX = e.pageX; var mouseY = e.pageY; var canvasX = canvas.offsetLeft; var canvasY = canvas.offsetTop; var canvasWidth = canvas.offsetWidth; var canvasHeight = canvas.offsetHeight; var px = (mouseX - canvasX) / canvasWidth; var py = (mouseY - canvasY) / canvasHeight; if (lx && ly) { cx = (px - lx); cy = (py - ly); } lx = px; ly = py; }; var leave = function() { lx = null; ly = null; }; canvas.addEventListener('mousemove', move); canvas.addEventListener('touchmove', move); canvas.addEventListener('mouseleave', leave); canvas.addEventListener('touchend', leave); render(function() { cx *= decay; cy *= decay; x += cx; y += cy; context.clearRect(- canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height); var transform = Mat3.rotationX(-y * 2 * Math.PI) .multiply(Mat3.rotationY(x * 2 * Math.PI)); var fx = function(vertex) { return vertex.x * scale; }; var fy = function(vertex) { return vertex.y * scale; }; drawAxisIndicator(context, transform); //for (var i = 0; i < struct_L1.length; ++i) { // drawPolygon3(context, struct_L1[i], transform, fx, fy, '#f00'); //} // for (var i = 0; i < modelPolygons.length; ++i) { // drawPolygon3(context, modelPolygons[i], transform, fx, fy, '#ccc'); // } for (var i = 0; i < struct_L1_corner.length; ++i) { drawPolygon3(context, struct_L1_corner[i], transform, fx, fy, '#ccc'); } for (var i = 0; i < struct_L1_diag.length; ++i) { drawPolygon3(context, struct_L1_diag[i], transform, fx, fy, '#f00'); } for (var i = 0; i < struct_L2.length; ++i) { drawPolygon3(context, struct_L2[i], transform, fx, fy, '#999'); } for (var i = 0; i < struct_L3.length; ++i) { drawPolygon3(context, struct_L3[i], transform, fx, fy, '#c66'); } }); return canvas; }34:T1ad8,vertices = [ new Vertex(-1.0, -1.0, -1.0), //0 IIIIII - new Vertex( 1.0, 1.0, 1.0), //1 iiiiii + new Vertex( 1.0, -1.0, -1.0), //2 iIIIIi + new Vertex(-1.0, 1.0, 1.0), //3 IiiiiI - new Vertex( 1.0, 1.0, -1.0), //4 IIiiII --- new Vertex(-1.0, -1.0, 1.0), //5 iiIIii +++ new Vertex( 1.0, -1.0, 1.0), //6 iIiiIi + new Vertex(-1.0, 1.0, -1.0), //7 IiIIiI - new Vertex( 0.5, -0.5, 0), // 8 IIIiii new Vertex(-0.5, 0.5, -0), // 9 iiiIII new Vertex( 0, -0.5, 0.5), //10 iIiIiI new Vertex(-0, 0.5, -0.5), //11 IiIiIi // 0 - 12/13 - 2 // 0 - 16/17 - 4 // 0 - 20/21 - 7 // 1 - 14/15 - 3 // 1 - 18/19 - 5 // 1 - 22/23 - 6 // 2 - 24/25 - 5 // 2 - 28/29 - 6 // 3 - 26/27 - 4 // 3 - 30/31 - 7 // 4 - 34/35 - 6 // 5 - 32/33 - 7 new Vertex(0, -0.95, -0.95), //12 iIIIII 0 to 2 - IIIIII to iIIIIi 1====6 new Vertex(0, -1.05, -1.05), //13 IIIIIi new Vertex(0, 1.05, 1.05), //14 Iiiiii 1 to 3 - iiiiii to IiiiiI 1====6 new Vertex(0, 0.95, 0.95), //15 iiiiiI new Vertex(0, 0, -1.05), //16 IIiIII 0 to 4 - IIIIII to IIiiII ==34== new Vertex(0, 0, -0.95), //17 IIIiII new Vertex(0, 0, 0.95), //18 iiIiii 1 to 5 - iiiiii to iiIIii ==34== new Vertex(0, 0, 1.05), //19 iiiIii new Vertex(-1.05, 0, -1.05), //20 IiIIII 0 to 7 - IIIIII to IiIIiI =2==5= new Vertex(-0.95, 0, -0.95), //21 IIIIiI new Vertex( 0.95, 0, 0.95), //22 iIiiii 1 to 6 - iiiiii to iIiiIi =2==5= new Vertex( 1.05, 0, 1.05), //23 iiiiIi new Vertex(0, -1.05, 0), //24 iiIIIi 2 to 5 - iIIIIi to iiIIii =2==5= new Vertex(0, -0.95, 0), //25 iIIIii new Vertex(0, 0.95, 0), //26 IIiiiI 3 to 4 - IiiiiI to IIiiII =2==5= new Vertex(0, 1.05, 0), //27 IiiiII new Vertex( 1.05, -1.05, 0), //28 iIiIIi 2 to 6 - iIIIIi to iIiiIi ==34== new Vertex( 0.95, -0.95, 0), //29 iIIiIi new Vertex(-0.95, 0.95, 0), //30 IiIiiI 3 to 7 - IiiiiI to IiIIiI ==34== new Vertex(-1.05, 1.05, 0), //31 IiiIiI new Vertex(-1.05, 0, 0), //32 IiIIii 5 to 7 - iiIIii to IiIIiI 1====6 new Vertex(-0.95, 0, 0), //33 iiIIiI new Vertex(0.95, 0, 0), //34 iIiiII 4 to 6 - IIiiII to iIiiIi 1====6 new Vertex(1.05, 0, 0), //35 IIiiIi //////// // 4: IIiiII -(2)-> 27: IiiiII -(5)-> 3: IiiiiI -(1)-> 15: iiiiiI -(6)-> 1: iiiiii // 4: IIiiII -(2)-> 27: IiiiII -(5)-> 3: IiiiiI -(6)-> 14: Iiiiii -(1)-> 1: iiiiii new Vertex(1.05, 1.05, 0), //36: IiiiIi - IIiiII 4->1: iiiiii 12==56 // 4: IIiiII -(6)-> 35: IIiiIi -(2)-> 36: IiiiIi -(1)-> 23: iiiiIi -(5)-> 1: iiiiii // 4: IIiiII -(6)-> 35: IIiiII -(2)-> 36: IiiiIi -(5)-> 14: Iiiiii -(1)-> 1: iiiiii // 4: IIiiII -(2)-> 27: IiiiII -(6)-> 36: IiiiIi -(1)-> 23: iiiiIi -(5)-> 1: iiiiii // 4: IIiiII -(2)-> 27: IiiiII -(6)-> 36: IiiiIi -(5)-> 14: Iiiiii -(1)-> 1: iiiiii // 36: 35 27 23 14 new Vertex(0.95, 0.95, 0), //37: iIiiiI - IIiiII 4->1: iiiiii 12==56 // 4: IIiiII -(1)-> 34: iIiiII -(5)-> 37: iIiiiI -(6)-> 22: iIiiii -(2)-> 1: iiiiii // 4: IIiiII -(5)-> 26: IIiiiI -(1)-> 37: iIiiiI -(2)-> 15: iiiiiI -(2)-> 1: iiiiii // 37: 34 26 22 15 new Vertex(-0.95, -0.95, 0), //38: iIIIiI - iiIIii 5->0: IIIIII 12==56 // 5: iiIIii -(2)-> 25: iIIIii -(6)-> 38: iIIIiI -(1)-> 21: IIIIiI -(5)-> 0: IIIIII // 5: iiIIii -(2)-> 25: iIIIii -(6)-> 38: iIIIiI -(5)-> 12: iIIIII -(1)-> 0: IIIIII // 5: iiIIii -(6)-> 33: iiIIiI -(2)-> 38: iIIIiI -(1)-> 21: IIIIiI -(5)-> 0: IIIIII // 5: iiIIii -(6)-> 33: iiIIiI -(2)-> 38: iIIIiI -(5)-> 12: iIIIII -(1)-> 0: IIIIII //38: 25 33 21 12 new Vertex(-1.05, -1.05, 0), //39: IiIIIi - iiIIii 5->0: IIIIII 12==56 // 5: iiIIii -(1)-> 32: IiIIii -(5)-> 39: IiIIIi -(2)-> 13: IIIIIi -(6)-> 0: IIIIII // 5: iiIIii -(1)-> 32: IiIIii -(5)-> 39: IiIIIi -(6)-> 20: IiIIII -(2)-> 0: IIIIII // 5: iiIIii -(5)-> 24: iiIIIi -(1)-> 39: IiIIIi -(2)-> 13: IIIIIi -(6)-> 0: IIIIII // 5: iiIIii -(5)-> 24: iiIIIi -(1)-> 39: IiIIIi -(6)-> 20: IiIIII -(2)-> 0: IIIIII //39: 32 24 13 20 new Vertex(0, 1.05, -1.05), //40: IiiIII - IIiiII 4->7: IiIIiI =2345= // 4: IIiiII -(2)-> 27: IiiiII -(4)-> : IiiIII -(3)-> 20: IiIIII -(5)-> 7: IiIIiI // 4: IIiiII -(2)-> 27: IiiiII -(4)-> : IiiIII -(5)-> 31: IiiIiI -(3)-> 7: IiIIiI // 4: IIiiII -(4)-> 16: IIiIII -(2)-> : -(3)-> : -(5)-> 7: IiIIiI // 4: IIiiII -(4)-> 16: IIiIII -(2)-> : -(5)-> : -(3)-> 7: IiIIiI // 40: 27 16 20 31 new Vertex(0, 0.95, -0.95), //41 IIIiiI - IIiiII 4->7: IiIIiI =2345= // 4: IIiiII -(3)-> 17: IIIiII -(5)-> : -(2)-> 30: IiIiiI -(4)-> 7: IiIIiI // 4: IIiiII -(3)-> 17: IIIiII -(5)-> : -(4)-> 21: IIIIiI -(2)-> 7: IiIIiI // 4: IIiiII -(5)-> 26: IIiiiI -(3)-> : -(2)-> : -(4)-> 7: IiIIiI // 4: IIiiII -(5)-> 26: IIiiiI -(3)-> : -(4)-> : -(2)-> 7: IiIIiI // 41: 17 26 30 21 new Vertex(0, -0.95, 0.95), //42: iIIiii - iiIIii 5->6: iIiiIi =2345= // 5: iiIIii -(2)-> 25: iIIIii -(4)-> 42: iIIiii -(3)-> 22: iIiiii -(5)-> 6: iIiiIi // 5: iiIIii -(2)-> 25: iIIIii -(4)-> 42: iIIiii -(5)-> 29: iIIiIi -(1)-> 6: iIiiIi // 5: iiIIii -(4)-> 18: iiIiii -(2)-> 42: iIIiii -(3)-> 22: iIiiii -(5)-> 6: iIiiIi // 5: iiIIii -(4)-> 18: iiIiii -(2)-> 42: iIIiii -(5)-> 29: iIIiIi -(3)-> 6: iIiiIi // 42: 25 18 22 29 new Vertex(0, -1.05, 1.05), //43: iiiIIi - iiIIii 5->6: iIiiIi =2345= // 5: iiIIii -(3)-> 19: iiiIii -(5)-> 43: iiiIIi -(2)-> 28: iIiIIi -(4)-> 6: iIiiIi // 5: iiIIii -(3)-> 19: iiiIii -(5)-> 43: iiiIIi -(4)-> 23: iiiiIi -(2)-> 6: iIiiIi // 5: iiIIii -(5)-> 24: iiIIIi -(3)-> 43: iiiIIi -(2)-> 28: iIiIIi -(4)-> 6: iIiiIi // 5: iiIIii -(5)-> 24: iiIIIi -(3)-> 43: iiiIIi -(4)-> 23: iiiiIi -(2)-> 6: iIiiIi // 43: 19 24 28 23 new Vertex(0.95, 0, -0.95), //44: iIiIII - IIiiII 4->2: iIIIIi 1=34=6 // 4: IIiiII -(1)-> 34: iIiiII -(4)-> 44: iIiIII -(3)-> 12: iIIIII -(6)-> 2: iIIIIi // 4: IIiiII -(4)-> 16: IIiIII -(1)-> 44: iIiIII -(6)-> 28: iIiIIi -(3)-> 2: iIIIIi // 44: 34 16 12 28 new Vertex(1.05, 0, -1.05), //45: IIIiIi - IIiiII 4->2: iIIIIi // 4: IIiiII -(3)-> 17: IIIiII -(6)-> 45: IIIiIi -(1)-> 29: iIIiIi -(4)-> 2: iIIIIi // 4: IIiiII -(6)-> 35: IIiiIi -(3)-> 45: IIIiIi -(4)-> 13: IIIIIi -(1)-> 2: iIIIIi // 45: 17 35 13 29 // ------------------ ok new Vertex(-1.05, 0, 1.05), //46 IiIiii - iiIIii 5->3: IiiiiI 1=34=6 // 5: iiIIii -(1)-> 32: IiIIii -(4)-> 46: IiIiii -(3)-> 14: Iiiiii -(6)-> 3: IiiiiI // 5: iiIIii -(4)-> 18: iiIiii -(1)-> 46: IiIiii -(6)-> 30: IiIiiI -(3)-> 3: IiiiiI // 46: 32 18 14 30 new Vertex(-0.95, 0, 0.95) //47 iiiIiI - iiIIii 5->3: IiiiiI // 5: iiIIii -(3)-> 19: iiiIii -(6)-> 47: iiiIiI -(1)-> 31: IiiIiI -(4)-> 3: IiiiiI // 5: iiIIii -(6)-> 33: iiIIiI -(3)-> 47: iiiIiI -(4)-> 15: iiiiiI -(1)-> 3: IiiiiI // 47: 19 33 31 15 // : -()-> : -()-> : -()-> : -()-> : ]35:Td8e,struct_L3 = [ // 36: 35 27 23 14 new Polygon([ modelVerts[36], // modelVerts[35] // ]), new Polygon([ modelVerts[36], // modelVerts[27] // ]), new Polygon([ modelVerts[36], // modelVerts[23] // ]), new Polygon([ modelVerts[36], // modelVerts[14] // ]), // 37: 34 26 22 15 new Polygon([ modelVerts[37], // modelVerts[34] // ]), new Polygon([ modelVerts[37], // modelVerts[26] // ]), new Polygon([ modelVerts[37], // modelVerts[22] // ]), new Polygon([ modelVerts[37], // modelVerts[15] // ]), //38: 25 33 21 12 new Polygon([ modelVerts[38], // modelVerts[25] // ]), new Polygon([ modelVerts[38], // modelVerts[33] // ]), new Polygon([ modelVerts[38], // modelVerts[21] // ]), new Polygon([ modelVerts[38], // modelVerts[12] // ]), //39: 32 24 13 20 new Polygon([ modelVerts[39], // modelVerts[32] // ]), new Polygon([ modelVerts[39], // modelVerts[24] // ]), new Polygon([ modelVerts[39], // modelVerts[13] // ]), new Polygon([ modelVerts[39], // modelVerts[20] // ]), // 40: 27 16 20 31 new Polygon([ modelVerts[40], // modelVerts[27] // ]), new Polygon([ modelVerts[40], // modelVerts[16] // ]), new Polygon([ modelVerts[40], // modelVerts[20] // ]), new Polygon([ modelVerts[40], // modelVerts[31] // ]), // 41: 17 26 30 21 new Polygon([ modelVerts[41], // modelVerts[17] // ]), new Polygon([ modelVerts[41], // modelVerts[26] // ]), new Polygon([ modelVerts[41], // modelVerts[30] // ]), new Polygon([ modelVerts[41], // modelVerts[21] // ]), // 42: 25 18 22 29 new Polygon([ modelVerts[42], // modelVerts[25] // ]), new Polygon([ modelVerts[42], // modelVerts[18] // ]), new Polygon([ modelVerts[42], // modelVerts[22] // ]), new Polygon([ modelVerts[42], // modelVerts[29] // ]), // 43: 19 24 28 23 new Polygon([ modelVerts[43], // modelVerts[19] // ]), new Polygon([ modelVerts[43], // modelVerts[24] // ]), new Polygon([ modelVerts[43], // modelVerts[28] // ]), new Polygon([ modelVerts[43], // modelVerts[23] // ]), // 44: 34 16 12 28 new Polygon([ modelVerts[44], // modelVerts[34] // ]), new Polygon([ modelVerts[44], // modelVerts[16] // ]), new Polygon([ modelVerts[44], // modelVerts[12] // ]), new Polygon([ modelVerts[44], // modelVerts[28] // ]), // 45 17 35 13 29 new Polygon([ //////////////// modelVerts[45], // modelVerts[17] // ]), new Polygon([ modelVerts[45], // modelVerts[35] // ]), new Polygon([ modelVerts[45], // modelVerts[13] // ]), new Polygon([ //////////// modelVerts[45], // modelVerts[29] // ]), // 46: 32 18 14 30 new Polygon([ modelVerts[46], // modelVerts[32] // ]), new Polygon([ modelVerts[46], // modelVerts[18] // ]), new Polygon([ modelVerts[46], // modelVerts[14] // ]), new Polygon([ modelVerts[46], // modelVerts[30] // ]), // 47: 19 33 31 15 new Polygon([ modelVerts[47], // modelVerts[19] // ]), new Polygon([ modelVerts[47], // modelVerts[33] // ]), new Polygon([ modelVerts[47], // modelVerts[31] // ]), new Polygon([ modelVerts[47], // modelVerts[15] // ]) ]36:Tff8,struct_L2 = [ //// 0 - 12/13 - 2 //// 0 - 16/17 - 4 //// 0 - 20/21 - 7 //// 1 - 14/15 - 3 //// 1 - 18/19 - 5 //// 1 - 22/23 - 6 //// 2 - 24/25 - 5 //// 2 - 28/29 - 6 //// 3 - 26/27 - 4 //// 3 - 30/31 - 7 //// 4 - 34/35 - 6 //// 5 - 32/33 - 7 new Polygon([ modelVerts[0], // IIIIII modelVerts[12] // iIIIII ]), new Polygon([ modelVerts[12], // iIIIII modelVerts[2] // iIIIIi ]), new Polygon([ modelVerts[0], // IIIIII modelVerts[13] // IIIIIi ]), new Polygon([ modelVerts[13], // IIIIIi modelVerts[2] // iIIIIi ]), new Polygon([ modelVerts[1], // iiiiii modelVerts[14] // Iiiiiii ]), new Polygon([ modelVerts[14], // Iiiiiii modelVerts[3] // IiiiiI ]), new Polygon([ modelVerts[1], // iiiiii modelVerts[15] // iiiiiI ]), new Polygon([ modelVerts[15], // iiiiiI modelVerts[3] // IiiiiI ]), new Polygon([ modelVerts[0], // IIIIII modelVerts[16] // IIiIII ]), new Polygon([ modelVerts[16], // IIiIII modelVerts[4] // IIiiII ]), new Polygon([ modelVerts[0], // IIIIII modelVerts[17] // IIIiII ]), new Polygon([ modelVerts[17], // IIIiII modelVerts[4] // IIiiII ]), new Polygon([ modelVerts[1], // iiiiii modelVerts[18] // iiIiii ]), new Polygon([ modelVerts[18], // iiIiii modelVerts[5] // iiIIii ]), new Polygon([ modelVerts[1], // iiiiii modelVerts[19] // iiiIii ]), new Polygon([ modelVerts[19], // iiiIii modelVerts[5] // iiIIii ]), new Polygon([ modelVerts[0], // IIIIII modelVerts[20] // IiIIII ]), new Polygon([ modelVerts[20], // IiIIII modelVerts[7] // IiIIiI ]), new Polygon([ modelVerts[0], // IIIIII modelVerts[21] // IIIIiI ]), new Polygon([ modelVerts[21], // IIIIiI modelVerts[7] // IiIIiI ]), new Polygon([ modelVerts[1], // iiiiii modelVerts[22] // iIiiii ]), new Polygon([ modelVerts[22], // iIiiii modelVerts[6] // iIiiIi ]), new Polygon([ modelVerts[1], // iiiiii modelVerts[23] // iiiiIi ]), new Polygon([ modelVerts[23], // iiiiIi modelVerts[6] // iIiiIi ]), new Polygon([ modelVerts[2], // iIIIIi modelVerts[24] // iiIIIi ]), new Polygon([ modelVerts[24], // iiIIIi modelVerts[5] // iiIIii ]), new Polygon([ modelVerts[2], // iIIIIi modelVerts[25] // iIIIii ]), new Polygon([ modelVerts[25], // iIIIii modelVerts[5] // iiIIii ]), new Polygon([ modelVerts[3], // IiiiiI modelVerts[26] // IIiiiI ]), new Polygon([ modelVerts[26], // IIiiiI modelVerts[4] // IIiiII ]), new Polygon([ modelVerts[3], // IiiiiI modelVerts[27] // IiiiII ]), new Polygon([ modelVerts[27], // IiiiII modelVerts[4] // IIiiII ]), new Polygon([ modelVerts[2], // iIIIIi modelVerts[28] // iIiIIi ]), new Polygon([ modelVerts[28], // iIiIIi modelVerts[6] // iIiiIi ]), new Polygon([ modelVerts[2], // iIIIIi modelVerts[29] // iIIiIi ]), new Polygon([ modelVerts[29], // iIIiIi modelVerts[6] // iIiiIi ]), new Polygon([ modelVerts[3], // IiiiiI modelVerts[30] // IiIiiI ]), new Polygon([ modelVerts[30], // IiIiiI modelVerts[7] // IiIIiI ]), new Polygon([ modelVerts[3], // IiiiiI modelVerts[31] // IiiIiI ]), new Polygon([ modelVerts[31], // IiiIiI modelVerts[7] // IiIIiI ]), //32-33 IiIIii-iiIIiI 4 to 7 - iiIIii to IiIIiI new Polygon([ modelVerts[5], // modelVerts[32] // IiIIii ]), new Polygon([ modelVerts[32], // IiIIii modelVerts[7] // IiIIiI ]), new Polygon([ modelVerts[5], // modelVerts[33] // iiIIiI ]), new Polygon([ modelVerts[33], // iiIIiI modelVerts[7] // IiIIiI ]), //34-35 iIiiII 5 to 6 - IIiiII to iIiiIi new Polygon([ modelVerts[4], // IIiiII modelVerts[34] // iIiiII ]), new Polygon([ modelVerts[34], // iIiiII modelVerts[6] // iIiiIi ]), new Polygon([ modelVerts[4], // modelVerts[35] // IIiiIi ]), new Polygon([ modelVerts[35], // IIiiIi modelVerts[6] // iIiiIi ]) ]37:T4ad,backup = [ /// 4-7 5-6 new Polygon([ modelVerts[40], // modelVerts[20] // iIiiII ]), new Polygon([ modelVerts[40], // modelVerts[27] // iIiiII ]), new Polygon([ modelVerts[40], // modelVerts[30] // iIiiII ]), new Polygon([ modelVerts[41], // modelVerts[21] // iIiiII ]), new Polygon([ modelVerts[41], // modelVerts[26] // iIiiII ]), new Polygon([ modelVerts[41], // modelVerts[31] // iIiiII ]), /// new Polygon([ modelVerts[42], // modelVerts[22] // iIiiII ]), new Polygon([ modelVerts[42], // modelVerts[25] // iIiiII ]), new Polygon([ modelVerts[42], // modelVerts[28] // iIiiII ]), new Polygon([ modelVerts[43], // modelVerts[24] // iIiiII ]), new Polygon([ modelVerts[43], // modelVerts[23] // iIiiII ]), new Polygon([ modelVerts[43], // modelVerts[29] // iIiiII ]), // 4-2 5-3 new Polygon([ modelVerts[44], // modelVerts[34] // iIiiII ]), new Polygon([ modelVerts[44], // modelVerts[17] // iIiiII ]), new Polygon([ modelVerts[45], // modelVerts[35] // iIiiII ]), new Polygon([ modelVerts[45], // modelVerts[16] // iIiiII ]) ]38:T731,Mat3 = { function Mat3(elements) { if (elements.length !== 9) { throw new Error('Mat3 must have 9 elements'); } this.element = function(x, y) { if (x < 0 || x > 2) { throw new Error('x must be in the range 0 -2'); } if (y < 0 || y > 2) { throw new Error('y must be in the range 0 - 2'); } return elements[y * 3 + x]; }; this.multiply = function(other) { if (!(other instanceof Vec3) && !(other instanceof Mat3)) { throw new Error('vector must be either a Vec3 or Mat3'); } if (other instanceof Vec3) { var elements = []; for (var y = 0; y < 3; ++y) { var sum = 0; for (var x = 0; x < 3; ++x) { sum += other.element(x) * this.element(x, y); } elements.push(sum); } return new Vec3(elements); } else { var elements = []; for (var z = 0; z < 3; ++z) { for (var y = 0; y < 3; ++y) { var sum = 0; for (var x = 0; x < 3; ++x) { sum += other.element(y, x) * this.element(x, z); } elements.push(sum); } } return new Mat3(elements); } }; } Mat3.identity = function() { return new Mat3([ 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ]); } Mat3.rotationX = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ 1.0, 0.0, 0.0, 0.0, a, -b, 0.0, b, a, ]); }; Mat3.rotationY = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ a, 0.0, b, 0.0, 1.0, 0.0, -b, 0.0, a, ]); }; Mat3.rotationZ = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ a, -b, 0.0, b, a, 0.0, 0.0, 0.0, 1.0, ]); }; Mat3.isometric = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ a, 0, a, -b, 1, b, 0, 0, 0 ]); }; return Mat3; }39:T424, function drawAxisIndicator(context, matrix) { context.save(); context.textBaseline = 'middle'; context.textAlign = 'center'; context.strokeStyle = '#F06'; context.fillStyle = '#F06'; var x = new Vec3([30.0, 0.0, 0.0]).multiply(matrix); context.fillText('X', x.element(0), -1 * x.element(1)); drawLineFromVectors( context, new Vec3([0.0, 0.0, 0.0]).multiply(matrix), new Vec3([20.0, 0.0, 0.0]).multiply(matrix) ); context.strokeStyle = '#F90'; context.fillStyle = '#F90'; var y = new Vec3([0.0, 30.0, 0.0]).multiply(matrix); context.fillText('Y', y.element(0), -1 * y.element(1)); drawLineFromVectors( context, new Vec3([0.0, 0.0, 0.0]).multiply(matrix), new Vec3([0.0, 20.0, 0.0]).multiply(matrix) ); context.strokeStyle = '#09C'; context.fillStyle = '#09C'; var z = new Vec3([0.0, 0.0, 30.0]).multiply(matrix); context.fillText('Z', z.element(0), -1 * z.element(1)); drawLineFromVectors( context, new Vec3([0.0, 0.0, 0.0]).multiply(matrix), new Vec3([0.0, 0.0, 20.0]).multiply(matrix) ); context.restore(); }3a:[] 31:{"id":"7f88eb09db33d9cf","slug":"i-ching-cube","title":"I-Ching Cube","thumbnail":"1e40950d08a82296f1aef6111074647067dc7e9c1548c1c6f2c991ee77bbda90","access_level":"public","create_time":"$D2023-04-06T09:01:28.284Z","update_time":"$D2023-04-07T22:47:13.150Z","view_time":null,"first_public_time":"$D2023-04-06T09:01:28.284Z","fork":{"id":"faeff14d1da6cfe3","slug":"projection-of-3d-models-using-javascript-and-html5-canvas","title":"Projection of 3D Models using JavaScript and HTML5 Canvas","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5d9b00b2cdcd8028","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":"starter_2024"},"version":744,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"261e0273bd70e808","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":null}],"members":[{"type":"individual","id":"261e0273bd70e808","login":"emma-ba","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3950b079ad1fc587c84ccfe712c3cc77ad1e122194ac7deeaf2ea35c7bf0f25a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"I-Ching Cube","cells":[{"id":0,"value":"md`# I-Ching Cube`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"struct_L1 = [\n\tnew Polygon([\n\t\tmodelVerts[0], // IIIIII\n\t\tmodelVerts[1] // iiiiii\n\t]), // Diag\n\tnew Polygon([\n\t\tmodelVerts[2], // iIIIIi\n\t\tmodelVerts[3] // IiiiiI\n\t]), // Diag\n\tnew Polygon([\n\t\tmodelVerts[4], // iiIIii\n\t\tmodelVerts[5] // IIiiII\n\t]), // \n\tnew Polygon([\n\t\tmodelVerts[6], // iIiiIi\n\t\tmodelVerts[7] // IiIIiI\n\t])\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"struct_L1_corner = [\n\tnew Polygon([\n\t\tmodelVerts[2], // iIIIIi\n\t\tmodelVerts[3] // IiiiiI\n\t]),\n new Polygon([\n\t\tmodelVerts[0], // IIIIII\n\t\tmodelVerts[1] // iiiiii\n\t]), // \n\tnew Polygon([\n\t\tmodelVerts[6], // iIiiIi\n\t\tmodelVerts[7] // IiIIiI\n\t])\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"struct_L1_diag = [\n\t // Diag\n\tnew Polygon([\n\t\tmodelVerts[4], // iiIIii\n\t\tmodelVerts[5] // IIiiII\n\t])\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"struct_L1_in = [\n\tnew Polygon([\n\t\tmodelVerts[8], // IIIIII\n\t\tmodelVerts[9] // iiiiii\n\t]), // \n\tnew Polygon([\n\t\tmodelVerts[10], // iIIIIi\n\t\tmodelVerts[11] // IiiiiI\n\t])\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"function drawPolygon3(context, polygon, matrix, fx, fy, color) {\n context.strokeStyle = color;\n\tcontext.beginPath();\n\tvar vertex = Vertex.transform(polygon.vertex(0), matrix);\n\tvar vertex_end = Vertex.transform(polygon.vertex(0), matrix);\n\tcontext.moveTo(fx(vertex), -1 * fy(vertex));\n\tfor (var i = 1; i < polygon.count(); ++i) {\n\t\tvertex = Vertex.transform(polygon.vertex(i), matrix);\n\t\tcontext.lineTo(fx(vertex), -1 * fy(vertex));\n\t}\n\tcontext.closePath();\n\tcontext.stroke();\n \n context.beginPath();\n context.moveTo(fx(vertex), -1 * fy(vertex));\n context.arc(fx(vertex), -1 * fy(vertex), 2, 0, 2 * Math.PI);\n context.fill();\n \n context.beginPath();\n context.moveTo(fx(vertex_end), -1 * fy(vertex_end));\n context.arc(fx(vertex_end), -1 * fy(vertex_end), 2, 0, 2 * Math.PI);\n context.fill();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"modelPolygons = [\n\tnew Polygon([\n\t\tmodelVerts[0],\n\t\tmodelVerts[1],\n\t\tmodelVerts[5],\n\t\tmodelVerts[4]\n\t]), // FRONT\n\tnew Polygon([\n\t\tmodelVerts[2],\n\t\tmodelVerts[3],\n\t\tmodelVerts[7],\n\t\tmodelVerts[6]\n\t]), // REAR\n\tnew Polygon([\n\t\tmodelVerts[0],\n\t\tmodelVerts[1],\n\t\tmodelVerts[3],\n\t\tmodelVerts[2]\n\t]), // BOTTOM\n\tnew Polygon([\n\t\tmodelVerts[4],\n\t\tmodelVerts[5],\n\t\tmodelVerts[7],\n\t\tmodelVerts[6]\n\t]), // TOP\n\tnew Polygon([\n\t\tmodelVerts[0],\n\t\tmodelVerts[2],\n\t\tmodelVerts[6],\n\t\tmodelVerts[4]\n\t]), // LEFT\n\tnew Polygon([\n\t\tmodelVerts[1],\n\t\tmodelVerts[3],\n\t\tmodelVerts[7],\n\t\tmodelVerts[5]\n\t]) // RIGHT\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"class Vertex {\n constructor (x, y, z) {\n this.x = x;\n this.y = y;\n this.z = z;\n }\n \n static transform (vertex, matrix) {\n\treturn Vertex.fromVec3(\n\t\tmatrix.multiply(\n\t\t\tVertex.toVec3(vertex)\n\t\t)\n\t);\n }\n\n static toVec3 (vertex) {\n\treturn new Vec3([vertex.x, vertex.y, vertex.z]);\n }\n\n static fromVec3 (vector) {\n\treturn new Vertex(vector.element(0), vector.element(1), vector.element(2));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"faces = [\n new Polygon([vertices[0], vertices[1], vertices[5], vertices[4]]), // Front\n new Polygon([vertices[2], vertices[3], vertices[7], vertices[6]]), // Rear\n new Polygon([vertices[0], vertices[1], vertices[3], vertices[2]]), // Bottom\n new Polygon([vertices[4], vertices[5], vertices[7], vertices[6]]), // Top\n new Polygon([vertices[0], vertices[2], vertices[6], vertices[4]]), // Left\n new Polygon([vertices[1], vertices[3], vertices[7], vertices[5]]) // Right\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function Polygon(vertices) {\n this.count = function() {\n return vertices.length;\n };\n this.vertex = function(i) {\n if (i < 0) {\n throw new Error('Vertex index must be a positive integer')\n }\n if (i >= vertices.length) {\n throw new Error('Vertex index out of bounds');\n }\n return vertices[i];\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"modelVerts = vertices","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"function Vec3(elements) {\n\n\tif (elements.length !== 3) {\n\t\tthrow new Error('Vec3 must have 3 elements');\n\t}\n\n\tthis.element = function(i) {\n\n\t\tif (i < 0 || i > 2) {\n\t\t\tthrow new Error('i must be in the range 0 - 2');\n\t\t}\n\n\t\treturn elements[i];\n\t};\n\n\tthis.multiply = function(matrix) {\n\n//\t\tif (!(matrix instanceof Mat3)) {\n//\t\t\tthrow new Error('matrix must be a Mat3');\n//\t\t}\n\n\t\treturn matrix.multiply(this);\n\t}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"\nfunction drawLineFromVectors(context, a, b) {\n\tcontext.beginPath();\n\tcontext.moveTo(a.element(0), -1 * a.element(1));\n\tcontext.lineTo(b.element(0), -1 * b.element(1));\n\tcontext.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"function render (f) {\n var step = () => {\n f();\n window.requestAnimationFrame(step);\n };\n window.requestAnimationFrame(step);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"