Fenz 发表于 2014-5-5 01:01:47

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个魔方。

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

其实

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

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



honglei 发表于 2014-5-5 06:46:20

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

hubo5563 发表于 2014-5-5 08:58:32

本帖最后由 hubo5563 于 2014-5-5 09:39 编辑

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

Fenz 发表于 2014-5-5 09:39:44

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

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

Fenz 发表于 2014-5-5 10:54:59

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:16:33

[ 本帖最后由 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个是中心块。





otischeng 发表于 2014-5-5 12:52:01

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

高低手007 发表于 2014-5-5 14:05:43

不知道什么问题,打不开

dongjiangfeng 发表于 2014-5-5 16:39:25

Chrome中测试通过!支持楼主的辛勤劳动:)

redcarrot 发表于 2014-5-5 17:30:35

个人觉得空心点角块才能转的操作方式有点奇怪。。。还是想去点中间。。。
求公布剩下两个,试不出来!!!
页: [1] 2 3 4
查看完整版本: Fenz 的在线魔方程序【更新变形魔方】