生成代码来表示托尼·斯塔克钯颈效应

Question

我正在尝试创建一种动画、随机生成的钯毒性颈部效果，就像托尼·斯塔克在钢铁侠 2 中脖子上的效果一样。

我的第一个想法是使用 SVG 的自动生成来创建它，并带有一个循环作为子级拆分。

https://codepen.io/tony-hensler/pen/gOPBJWO 这一点都不顺利，我没有跟踪孩子们的创作过程，而且这些线条看起来太机械化和棱角分明。

我还查看了更改https://codepen.io/Tibixx/pen/MZWRzJ 上提供的代码 通过更改以下值：-

  var cx;
  var cy;

但不幸的是，这也没有成功。

我的下一个尝试是生成一个包含所有必需坐标的 JSON，然后生成一个画出线条的画布。

我坚决认为 SVG 不适合这个，所以我将看看在画布上绘制它。

我可能过度考虑了存储 JSON 的过程。 我还能如何附加此任务？任何推动正确方向的帮助都会令人惊叹。

Answer 1

您是否尝试过以这样一种方式更改递归闪电模式，而不是从 (sx,sy) 到 (cx,cy) 绘制一条直线，而是绘制两条线（一条垂直线和一条水平线）？本质上，您将斜边替换为直角三角形的另外两个边。

我还没有代码示例，但可以想象它运行良好。

编辑：

Here 是结果的一个示例。我在原来的 codepen 上工作，而不是分叉它。不要忘记同时更改 draw() 和 split() 函数。