Fenz 的在线魔方程序【更新变形魔方】

Fenz

本程序基于 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个魔方。

这次更新除了修正五个魔方的链接都已经开放出来了，之前
有链接的魔方有三个，另外有两个隐藏魔方（都是市面上从未出现过的魔方，即偏门又奇怪），可以通过地址栏输入正确的地址访问到，给大家一点提示，看看有没有人能试出来。提示二：每个魔方的地址都是有规律的，前半段都一样。

其实

另外，隐藏的两个魔方也体现了我的程序的最大特点，也是和许多其他魔方程序的不同之处。

对了，上个截图才能在首页左上角显示。这是一个非常空的空心魔方。

honglei

没试出来,看不到的可以下载uc浏览器.

hubo5563

我看了3×3×3的数据文件3x3x3.js，确实不少。我没用过SVG+JS 技术，提不出什么建议。
如果魔方块多时，最好用程序生成那些块的坐标数据。
我也没有猜到其他两个的名字。

Fenz

honglei 发表于 2014-5-5 06:46
没试出来,看不到的可以下载uc浏览器.

浏览器兼容会尽快完善的，但是旧版本的IE本身不支持SVG，没办法了

Fenz

hubo5563 发表于 2014-5-5 08:58
我看了3×3×3的数据文件3x3x3.js，确实不少。我没用过SVG+JS 技术，提不出什么建议。
如果魔方块多时，最 ...

数据结构是为包容各种奇形怪状和变形的魔方设计的，所以对于这些简单魔方，数据有很大冗余。
对于复杂魔方，怎么建立这些数据还真是令人头疼的问题。
坐标数据可利用对称性用程序生成，转动操作群的数据我却毫无思路，目前都是手工完成的。不知胡老师在这方面是怎么处理的。

SVG+JS只是决定展示的实现方式，程序原理本身应该还是一样的

hubo5563

[ 本帖最后由 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[PiceLunHuan[n][0]];
   
   for(i=1;i<11;i++)
   {
      CubeX[PiceLunHuan[n][i-1]]=CubeX[PiceLunHuan[n][i] ];
   };
   CubeX[PiceLunHuan[n][10]]=k;
   CubeTurn[n]=(CubeTurn[n]+1) % 11;
};

void lunhuanczf(int n)
{   //反向转动一层后的块轮换操作
   int i,k;
   
   
   k=CubeX[PiceLunHuan[n][10]];
   
   for(i=10;i>0;i--)
   {
      CubeX[PiceLunHuan[n][i]]=CubeX[PiceLunHuan[n][i-1] ];
   };
   CubeX[PiceLunHuan[n][0]]=k;
   CubeTurn[n]=(CubeTurn[n]+10) % 11;   
};

CubeTurn[]是一个记录每个面的转动角度数组，用来判断相邻面是否可以转动的，初始都是根据面编码程序自动生成的。
CubeX是个数组，记录转动后魔方各个位置的块序号，初始是顺序的。
n是转动的面号，每次转动根据转动方向执行上面对应的轮换程序。
至于块的方向，都反映在坐标里了，不需要记录。

每次转动时只转动转面牵涉到的块：

      for(i=0;i<11;i++)
        {
        zhuandong(Cube[CubeX[PiceLunHuan[n][i]]]);     //面上的棱块和角块
        };
        zhuandong(Cube[n]);                         //中心块

zhuandong()
就是对块里的每个3D点坐标变换。Cube[]是Piece 数组。

那些数据是根据下面的图输入的，图中粉色数是中心块号，蓝色数是棱块和角块号，需要把图中数加上24：因为块数组前24个是中心块。

otischeng

本身想著隱藏的兩款魔方應該是Fenz最近討論的百慕大幾何體, 不過試了幾個可能的詞彙也沒有中. 看來是猜錯了.

高低手007

不知道什么问题，打不开

dongjiangfeng

Chrome中测试通过！支持楼主的辛勤劳动

redcarrot

个人觉得空心点角块才能转的操作方式有点奇怪。。。还是想去点中间。。。
求公布剩下两个，试不出来！！！