Fenz 的在线魔方程序【更新变形魔方】
本帖最后由 Fenz 于 2014-5-21 21:40 编辑本程序基于 SVG+JS 技术目前在 Chrome、FireFox、Safari、Opero、IE11 等浏览器下测试通过，国产的那些二次包装的浏览器就不一一测了。至于低版本的IE(9以下)不支持SVG，没有办法了，建议还是换更优秀的浏览器用吧。
代码是开源的，欢迎参考借鉴，更欢迎高手指点。
网址：http://uukoo.xjisu.cn/cube/
操作和胡老师的程序差不多，转视角操作略有不同，是用中键。
shift+中键拖拽是缩放，Alt+中键拖拽是调焦距，Ctrl+中键拖动是在屏幕面上旋转。
没有中键的朋友可以用其它键在魔方以外的地方拖拽，代替中键。Opera浏览器的中键行为比较怪异，请在魔方以外用左右键拖动。
5月9日更新了视角转动算法，将原来的二维转动改为三维转动，由于使用的是微分算法，和鼠标拖动事件的离散性，导致拖动过快时会有跳动的BUG，所以刻意减慢了转动速度比率。不知道其他程序是怎么处理三维视角转动，希望有人能指点一下。
5月10日更新视角控制规则，学习借鉴了胡波老师的算法，视角的三维旋转这块算是完善了。另外发现利用这个坐标变换矩阵，还能做许多有趣的事情。
魔方的转动具体是
二阶：直接点击转单层，Shift点击转整体；
三阶：直接点击转单层，Shift点击转中层，Ctrl点击转两层，Shift+Ctrl点击转整体
目前做了5个魔方。
这次更新除了修正五个魔方的链接都已经开放出来了，之前
有链接的魔方有三个，另外有两个隐藏魔方（都是市面上从未出现过的魔方，即偏门又奇怪），可以通过地址栏输入正确的地址访问到，给大家一点提示，看看有没有人能试出来。提示二：每个魔方的地址都是有规律的，前半段都一样。
其实
另外，隐藏的两个魔方也体现了我的程序的最大特点，也是和许多其他魔方程序的不同之处。
对了，上个截图才能在首页左上角显示。这是一个非常空的空心魔方。
没试出来,看不到的可以下载uc浏览器.
本帖最后由 hubo5563 于 2014-5-5 09:39 编辑
我看了3×3×3的数据文件3x3x3.js，确实不少。我没用过SVG+JS 技术，提不出什么建议。
如果魔方块多时，最好用程序生成那些块的坐标数据。
我也没有猜到其他两个的名字。
honglei 发表于 2014-5-5 06:46 static/image/common/back.gif
没试出来,看不到的可以下载uc浏览器.
浏览器兼容会尽快完善的，但是旧版本的IE本身不支持SVG，没办法了 hubo5563 发表于 2014-5-5 08:58 static/image/common/back.gif
我看了3×3×3的数据文件3x3x3.js，确实不少。我没用过SVG+JS 技术，提不出什么建议。
如果魔方块多时，最 ...
数据结构是为包容各种奇形怪状和变形的魔方设计的，所以对于这些简单魔方，数据有很大冗余。
对于复杂魔方，怎么建立这些数据还真是令人头疼的问题。
坐标数据可利用对称性用程序生成，转动操作群的数据我却毫无思路，目前都是手工完成的。不知胡老师在这方面是怎么处理的。
SVG+JS只是决定展示的实现方式，程序原理本身应该还是一样的 [ 本帖最后由 hubo5563 于 2014-5-5 11:53 编辑 ]
转动操作的块轮换我也是手工输入的，魔方复杂时数据很多，例如百慕大五角24面体，24个转动面，每个面有11个块，我用一个数组表示，这些数据也是手工输入的：
private static final int[][] PiceLunHuan=
{ //24个面转动360/11度角的各个块的位置轮换
{37,92, 36, 93,38, 94,39, 95,25, 80,24}, //0
{24,80, 25, 81,26, 82,27, 83,28, 84,29}, //1
{29,84, 28, 85,30, 86,31, 87,32, 88,33}, //2
{33,88, 32, 89,34, 90,35, 91,36, 92,37}, //3
{54,113,53,117,56,116,57,115,58,114,59}, //4
{59,114,58,118,38, 93,36, 91,35,109,60}, //5
{60,109,35, 90,34,108,50,107,49,110,55}, //6
{55,110,49,106,48,111,52,112,53,113,54}, //7
{65,123,64,127,71,128,72,129,73,131,74}, //8
{74,131,73,130,26, 81,25, 95,39,125,67}, //9
{67,125,39, 94,38,118,58,115,57,124,66}, //10
{66,124,57,116,56,121,63,122,64,123,65}, //11
{76,139,75,134,44, 99,41, 97,40,137,79}, //12
{79,137,40, 96,30, 85,28, 83,27,138,78}, //13
{78,138,27, 82,26,130,73,129,72,132,77}, //14
{77,132,72,128,71,126,70,133,75,139,76}, //15
{47,102,46,105,48,106,49,107,50,103,51}, //16
{51,103,50,108,34, 89,32, 87,31,104,43}, //17
{43,104,31, 86,30, 96,40, 97,41, 98,42}, //18
{42, 98,41, 99,44,100,45,101,46,102,47}, //19
{69,135,70,126,71,127,64,122,63,120,62}, //20
{62,120,63,121,56,117,53,112,52,119,61}, //21
{61,119,52,111,48,105,46,101,45,136,68}, //22
{68,136,45,100,44,134,75,133,70,135,69} //23
};
里面都是块的顺序号。
处理转动群的程序简单：
void lunhuancz(int n)
{ //正向转动一层后的块轮换操作
int i,k;
k=CubeX];
for(i=1;i<11;i++)
{
CubeX]=CubeX ];
};
CubeX]=k;
CubeTurn=(CubeTurn+1) % 11;
};
void lunhuanczf(int n)
{ //反向转动一层后的块轮换操作
int i,k;
k=CubeX];
for(i=10;i>0;i--)
{
CubeX]=CubeX ];
};
CubeX]=k;
CubeTurn=(CubeTurn+10) % 11;
};
CubeTurn[]是一个记录每个面的转动角度数组，用来判断相邻面是否可以转动的，初始都是根据面编码程序自动生成的。
CubeX是个数组，记录转动后魔方各个位置的块序号，初始是顺序的。
n是转动的面号，每次转动根据转动方向执行上面对应的轮换程序。
至于块的方向，都反映在坐标里了，不需要记录。
每次转动时只转动转面牵涉到的块：
for(i=0;i<11;i++)
{
zhuandong(Cube]]); //面上的棱块和角块
};
zhuandong(Cube); //中心块
zhuandong()
就是对块里的每个3D点坐标变换。Cube[]是Piece 数组。
那些数据是根据下面的图输入的，图中粉色数是中心块号，蓝色数是棱块和角块号，需要把图中数加上24：因为块数组前24个是中心块。
本身想著隱藏的兩款魔方應該是Fenz最近討論的百慕大幾何體, 不過試了幾個可能的詞彙也沒有中. 看來是猜錯了. 不知道什么问题，打不开 Chrome中测试通过！支持楼主的辛勤劳动:) 个人觉得空心点角块才能转的操作方式有点奇怪。。。还是想去点中间。。。
求公布剩下两个，试不出来！！！