魔方交互式动画、可编程JavaScript工具库：Roofpig

//|

魔方教学演示。

Roofpig 是一款专为现代网页设计的动画化、可编程且交互式的魔方。它采用 WebGL 或纯 Canvas 技术(通过 three.js 实现)，并以 CoffeeScript 语言编写。

它应可在大多数现代浏览器上运行。

1. 使用方法

您只需一个文件和一个网络服务器。将roofpig_and_three.min.js上传至您的服务器。在HTML中包含该文件及jQuery 3.1.1：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="roofpig_and_three.min.js"></script>

静态创建

要在页面上放置一个立方体，创建一个 class=‘roofpig’ 的 div。配置信息放在 data-config 属性中。通过 CSS 设置高度和宽度。就这样！

<div class=roofpig data-config="alg=R U R' U R U2 R'"></div>

动态创建

要在父 div 下动态创建立方体，调用 CubeAnimation.create_in_dom(parent_div, config, div_attributes)，其中 config 是 data-config，div_attributes 则如其名。

CubeAnimation.create_in_dom('#show-alg', "alg=R U R' U R U2 R'", "class='my-roofpig'");

2. data-config

在 data-config 中设置属性值。格式为 property1=value|prop2=other value | prop99=you get the idea。

这是一个完全配置的示例立方体：

<div class=roofpig style="width:140px; height:160px;"
  data-config="alg=L' U2 L U2 R U' L' U L+R'|solved=U-/ce|colors=F:b B:g U:r D:o R:w L:y">
</div>

有效属性包括：alg、algdisplay、base、colored、colors、flags、hover、pov、setup、solved、speed、tweaks。我们将按逻辑顺序逐一介绍。

2.1 算法：alg

以这种方式定义动画算法：alg=R F' x2 R D Lw'。它支持标准魔方记号法以及更多内容。如果未指定算法，播放按钮将不会显示。

标准记号

Roofpig支持(几乎)所有标准魔方记号。层：F、B、R、L、U、D。M、E、S。x、y、z。Fw, Bw, Rw, Lw, Uw, Dw, f, b, r, l, u, d。转动：2, ‘, 2’。您还可以使用²、Z、1 和 3。

旋转记法

Roofpig 添加了“非破坏性”旋转，即在旋转魔方时保留侧面名称(与插入 x2 不同，后者会改变所有后续操作)。您可以将其视为移动“摄像头”。R> 像 R 操作一样旋转整个魔方。R>> 是双倍旋转，R< 和 R<< 则在相反方向上执行相同操作。这意味着 F> 与 B< 相同。

Roofpig 还支持组合操作。使用 + 符号。侧面安全切片操作：M = L'+R，E = D'+U，S = F'+B。’w’ 操作：Rw = R>+L，Lw = L>+R，Uw = U>+D，等等。整个魔方：y=U+E'+D'。组合无法并行执行的操作，如 L+U 或 Rw+Fw2，会导致可怕且有趣的结果。

Alg 标记演示

2.2 立方体

在 Roofpig 中，你通常定义算法完成后立方体的外观。默认情况下，它是一个完全着色的立方体。你还可以将部分面设置为“已解决”(深灰色)或“忽略”(浅灰色)，移动方块，重新着色贴纸并散布X标记。

但首先我们必须讨论Cubexps。

Cubexps

我们经常需要定义贴纸集。因此我创建了一种简洁的语言来描述贴纸组。

Cubexps只做一件事：定义魔方上54张贴纸中的一个贴纸集。仅此而已。它们不做其他任何事情。

最简单的格式是列出贴纸。UBL表示UBL角块上的所有贴纸。F 是 F 面中心贴纸。这个 Cubexp 是整个 U 层：U UB UBL UBR UF UFL UFR UL UR。对于单个贴纸，UbL 仅指 UBL 上的 U 和 L 贴纸。因此 U Ub Ubl Ubr Uf Ufl Ufr Ul Ur 表示 U 面的贴纸。

这足以定义任何贴纸集合。但这样写既繁琐又难以阅读。因此有简写表达式。

  • F*. 整个层(或多层)。U* 是 U 层(U UB UBL UBR UF UFL UFR UL UR)。UF* 是整个 U 和 F 层。
  • F-. 这些层之外的所有部分。U- 表示除 U 层之外的所有部分。ULB- 表示不在 U、L 或 B 层中的部分，即 D DF DFR DR F FR R(DFR 2x2x2 块)。
  • f. 整个 侧面。u 与 U Ub Ubl Ubr Uf Ufl Ufr Ul Ur 相同。
  • *. 整个魔方。用于过滤(见下文)
  • 过滤。所有表达式均可按块类型进行过滤。c 表示角块，e 表示边块，m 表示中块。因此 U*/c 表示 U 层的角块，即 UBL UBR UFL UFR。u/me 表示 U Ub Uf Ul Ur。演示中还有更多内容。

Cubexp 示例

现在我们了解了 Cubexps，可以开始制作立方体了！

已解决 和 已着色

此功能的主要参数是 已解决 和 已着色 的 Cubexps。已解决 贴纸将显示为深灰色。已着色 贴纸将保持正常颜色。未标记为 solved 或 colored 的贴纸将显示为浅灰色，表示“忽略”。solved 优先于 colored。

Solved 和 colored 演示

setupmoves 和 tweaks

当仅标记贴纸为“已解决”和“忽略”不足以满足需求时，需要使用这些工具。

  • setupmoves 对魔方应用某些操作。例如 setupmoves=L' B' R B L B' R' B 可交换 3 个角块。
  • tweaks 是自由形式工具，可将任何贴纸设置为任意颜色——以及更多功能！tweaks=F:RF 将FR边上的两个贴纸均设置为F色。tweaks=R:Ubl 仅将UBL角上的U贴纸设置为R色。除颜色外，还可在贴纸上添加X标记：tweaks=X:Ub x:Ul

setupmoves 和 tweaks 演示(比文字更清晰)

2.3 其他参数

其他参数演示

hover

“peek”贴纸会从立方体上悬浮多远？1表示“完全不悬浮”。10表示“悬浮得太远”。最方便使用别名none、near和far(1、2和7.1)。已解决和被忽略的贴纸不会悬浮。

speed

每回合的毫秒数。默认值为 400。双倍回合耗时 1.5 倍。

flags

只能设置为开或关的选项，需在此自由文本字段中提及以启用。当前标志包括：

  • showalg – 根据 algdisplay 设置显示算法。
  • canvas – 使用常规 2D 画布绘制，而非 WebGL。
  • startsolved – 默认从已解开的魔方开始，而非应用反向算法。

colors

默认颜色为：R – 绿色，L – 蓝色，F – 红色，B – 橙色，U – 黄色，D – 白色。或使用此格式：colors=R:g L:b F:r B:o U:y D:w。除了 ‘g’ 代表绿色等，您还可以使用任何 CSS 颜色，如 pink、#77f、#3d3dff 等。

pov

默认视角位于UFR角，U在顶部。或在此表示法中为Ufr。若要使DFL朝向且F在顶部，请使用pov=Fdl。

algdisplay

此参数定义算法的显示方式(若showalg启用)。与标志类似，这是一个自由格式字符串，其中包含特定的关键词：

  • fancy2s – 双重移动以 F² 形式显示，而非 F2。
  • rotations – 显示 Roofpig 旋转(R>、U<< 等)。默认关闭。
  • 2p – 将逆时针双重移动显示为 2’。默认显示为 2。
  • Z – 将逆时针双步显示为 Z。

2.4 base – 共享配置

此时你可能在想：“但 Lars，如果我使用日语配色方案呢？我真的需要在每个魔方配置中重复设置吗？”对此我回答：“不，亲爱的广告机器人，Roofpig 提供了一种简单的方法来共享通用配置，既减少了重复，又使通用部分易于安全地进行修改！”

你可以使用以“ROOFPIG_CONF_”开头的 JavaScript 变量作为基础。

<script>
  ROOFPIG_CONF_F5 = "solved=U- | colors=F:B B:G U:R D:O R:W L:Y"
</script>
<div class=roofpig data-config="base=F5|alg=L+R' U' R U L' U' R' U R"></div>
<div class=roofpig data-config="base=F5|alg=R' U' R U L U' R' U R+L'"></div>

数据配置中的属性会覆盖从基础配置继承的属性。如果你喜欢这种复杂性，一个base可以引用另一个base来形成复杂的层次结构。

要在页面之间共享配置，你可以将“ROOFPIG_CONF_”放在一个通用的.js文件中。

 

你也许感兴趣的：

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注