电子水母函数解析

前言

电子水母黑白

电子水母彩色

最近刷短视频,推送了一个有意思的视频:一个在黑暗背景中优雅游弋、散发着幽幽光芒的"电子水母"。它不像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

相关推荐
阿什么名字不会重复呢1 天前
在线工具+网页平台来学习和操作Python与Excel相关技能
python·数据分析
charlee442 天前
PandasAI连接LLM进行智能数据分析
ai·数据分析·llm·pandasai·deepseek
Re_Yang092 天前
数学专业转型数据分析竞争力发展报告
数据挖掘·数据分析
workflower2 天前
数据分析前景
算法·数据挖掘·数据分析·需求分析·软件需求
我要学习别拦我~2 天前
kaggle分析项目:steam付费游戏数据分析
python·游戏·数据分析
海哥编程2 天前
Python 数据分析(二):Matplotlib 绘图
python·数据分析·matplotlib
Watermelo6173 天前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
Watermelo6173 天前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
SickeyLee3 天前
BI 系统数据看板全解析:让数据可视化驱动业务决策
信息可视化·数据挖掘·数据分析
万能的小裴同学3 天前
星痕共鸣数据分析2
c++·数据分析