电子水母函数解析

前言

电子水母黑白

电子水母彩色

最近刷短视频，推送了一个有意思的视频：一个在黑暗背景中优雅游弋、散发着幽幽光芒的"电子水母"。它不像CG动画那样真实，却有一种独特的、由像素和光影构成的数字生命感。心血来潮，我决定看看这东西到底是怎么实现的。

试着让大模型还原一下，几秒钟后，它给了我一段代码。出乎我意料的是，代码本身惊人地简洁，核心部分不过十几行。然而，当真正去看那几行代码时，它的实现原理远比代码长度要复杂得多。

代码很简单，但实现并不简单。真正的魔法，隐藏在那些看似随机组合，实则环环相扣的数学公式之中。

下面，创造这个数字生命的全过程。

第一印象：代码简洁，但公式"面目狰狞"

拿到代码后，我发现其核心是一个名为 transformAndDraw 的函数。整个动画，就是通过一个循环，对成千上万个点反复执行这个函数里的计算。而这个函数，就是所有魔法的源头：

复制代码

function transformAndDraw(x, y) {
    let k = x / 8 - 12.5;
    let e = y / 8 - 12.5;
    let o = mag(k, e);
    let distortionField = (o / 12) * cos(sin(k / 2) * cos(e / 2));
    let d = 5 * cos(distortionField);

    let termX = sin(d * 2 + t) + sin(y * o * o) / 9;
    let px = (x + d * k * termX) / 1.5 + 133;

    let termY = 19 * cos(d + t);
    let py = (y / 3 - d * 40 + termY) * 1.5 + 300;

    point(px, py);
}

就是这些公式。没有图片，没有模型，只有纯粹的数学构成了上面的水母，下面是解析过程。

原材料：一块平整的"数字黏土"

首先，想象我们的画布上有一张由40000个点构成的、整齐划一的网格。这是我们进行所有操作的基础，我们的"原材料"。

雕刻流程：一步步看懂公式在做什么

步骤 1: 建立一个中心参考系

复制代码

let k = x / 8 - 12.5;
let e = y / 8 - 12.5;

**功能解析：**这一步的唯一目的，就是把坐标系的原点从左上角移动到网格的正中心。这就像雕刻前，先在石料上画好中心线，后续所有操作都将围绕这个中心进行，便于塑造对称形态。

步骤 2: 生成一张"径向"灰度图

复制代码

let o = mag(k, e);

功能解 析：此公式计算每个点到新中心点的距离，并存为变量 o。我们可以将 o 值想象成一张灰度图：中心点是纯黑 (o=0)，越往外越亮。这张图至关重要，它让我们能区分"中心区域"和"边缘区域"，并对它们施加不同的变形效果。

步骤 3: 制作一张复杂的"雕刻模板"

复制代码

let distortionField = ...
let d = 5 * cos(distortionField);

功能解析： 这是最核心的塑形步骤。它利用三角函数组合，生成了一个极其复杂的、类似细胞或水波纹的图案。这个图案的强度还受距离 o 的影响，形成了从中心向外围呈波浪状增强的"雕刻模板" d。正是这个模板，决定了水母伞盖上那些自然的褶皱。

步骤 4: 最终变形与动画

复制代码

// Y轴变形 (主体轮廓)
let py = (y / 3 - d * 40 + termY) ...

// X轴变形 (收缩动画)
let px = (x + d * k * termX) ...

功能解析： 最后，程序用"雕刻模板" d 和时间 t 来移动每个点。

Y轴的 - d * 40 是主要塑形力，它将点垂直拉伸，强度大的（边缘）被拉得远形成触须，强度小的（中心）基本不动形成伞盖。
包含时间 t 的项 (termX, termY) 则是动画力，它们让成型的水母有节奏地上下浮动和内外收缩。

结论

通过这套可视化的流程。将一个简单的网格，通过**"居中 → 测量 → 设计模板 → 变形"**这一系列逻辑清晰的步骤，逐步雕刻和驱动而成的。每一个公式都有其明确的视觉功能，它们的组合最终涌现出了我们看到的、富有生命感的电子水母。

电子水母相关资源下载：

链接: https://pan.baidu.com/s/1f7073Li7_bIkV2XJ6jWGLA 提取码: azm5