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

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

其实

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

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

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只是决定展示的实现方式，程序原理本身应该还是一样的

Fenz

redcarrot 发表于 2014-5-5 17:30
个人觉得空心点角块才能转的操作方式有点奇怪。。。还是想去点中间。。。
求公布剩下两个，试不出来！！！

棱块预留给中层转动了，中间又没有块可以点。。不过倒是可以考虑加一些透明块在中间

Fenz

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

百慕大系列的数据比较复杂，还没着手呢。
那两个是做完了二阶，改三阶的过程中无意间弄出来的。看来光靠猜命中的概率太小了，今晚就把链接放出来。

Fenz

hubo5563 发表于 2014-5-5 11:16
[ 本帖最后由 hubo5563 于 2014-5-5 11:53 编辑 ]

转动操作的块轮换我也是手工输入的，魔方复杂时数据很多 ...

这数据好多。。。
现在才体会到胡老师做一个魔方软件背后的辛苦。

胡老师用轮换处理，在位置变化这点上，数据量比我的节省了3/4。值得借鉴一下。

Fenz

高低手007 发表于 2014-5-5 14:05
不知道什么问题，打不开

你用的是什么浏览器？
这个程序已经兼容Chrome、FireFox、Safari、Opera。
IE 10和11我的电脑系统不够新装不了，没有条件测，9以下是不行的，不支持SVG没有办法。

Fenz

thindy 发表于 2014-5-6 22:27
隐藏的两个魔方其实都是一般的2x2x2而已，只不过是用电脑程序做成奇怪的样子，目前的可以估计造不出来，不过 ...

是的，二阶改三阶的过程中搞出来的怪东西。真要造的话可以用像鱼竿那样的伸缩装置。不过估计没人有兴趣去去搞吧。

Fenz

honglei 发表于 2014-5-6 20:11
那两个隐藏的魔方看起来就是普通的二阶.

是的，变形的二阶。这个程序对变形的处理主要是为了让像非精准百慕大这样的魔方外观完整，那种小程度的变形不容易被感觉到。
这两个二阶是副产品中的简单例子，还可以弄出好些有趣的东西，比如那个分两半的二阶加上面、棱块，变成三阶，而面、棱块很多时候又会挤扁了看不见，转一转才能出现，玩起来别有味道。

Fenz

海上晴天 发表于 2014-5-6 22:09
支持楼主 SVG倒是想研究研究

SVG非常有意思，DOM结构的矢量图，玩起来就像在拼一些可变形的积木。而canvas 则像是一帧一帧地画画，图也是一个像素一个像素的位图。所以我更喜欢玩SVG。