生成艺术generative art近年经常出现在前端、创意编程和动效设计场景里它解决的核心问题不是“怎么画一张图”而是“怎么定义一套规则让图自己长出来”。Loop-me 是一个非常典型的轻量生成艺术项目它把循环loop当作生成规则的一部分让程序以固定周期生成同一套噪声场、粒子和色彩播放时首尾相接几乎看不出重新开始的痕迹。很多人第一次做这类作品时画面能动但最后一帧切回第一帧时跳变非常明显问题通常不在随机算法而在时间参数没有真正参与循环。下面的内容会基于一个可运行的 p5.js 最小项目拆解 Loop-me 的循环设计、核心代码、验证方式和常见断点。1. 循环不是播放模式而是一种生成约束1.1 先理解什么叫“可循环的生成艺术”生成艺术并不是让计算机完全随机地乱画。它的流程通常是创作者定义一组规则、参数、随机种子和状态更新方式然后由程序在每一帧或每一次迭代中根据这些规则生成新的图像内容。艺术家控制的是规则空间而不是每一个像素。Loop-me 这个名字里有两个关键词一个是 “Loop”另一个是“me”。从工程角度看Loop 代表这个项目的输出形式必须是可以无缝循环播放的动画序列从设计角度看它意味着“循环”不是一个后期拼接动作而是在生成阶段就写进算法的约束条件。在实际创作中很多人会把生成艺术理解成“让程序自动画图”于是每一帧都重新随机一次结果单帧画面很好看但连续播放时没有连续性。Loop-me 这类项目强调的则是另一种能力让同一个系统在有限时间内完成一轮演化然后平滑回到起点。这种方式非常适合做动态壁纸、循环背景、展示型动效和社交媒体上的短循环视频因为它不需要观众关注剧情只需要视觉上持续呼吸。一个循环动画在视觉上是否成立取决于两件事第一系统在每一帧有没有可重复的确定性第二时间参数从终点回到起点时画面的状态变化是否足够平滑。前者靠随机种子和状态变量保证后者靠时间归一化和周期函数保证。理解了这两点再看 Loop-me 的代码就会非常清楚。1.2 无缝循环依赖 f(0) 与 f(1) 的边界关系如果把一帧画面理解成关于时间 t 的函数 F(t)那么一个长度为 T 帧的循环动画会依次绘制 F(0), F(1), ..., F(T-1)。播放到最后一张 F(T-1) 后下一轮会重新播放 F(0)。因此循环边界是否平滑取决于 F(T-1) 和 F(0) 在视觉上是否接近也取决于两者之间的过渡是否自然。这里容易产生一个误区很多人以为只要满足 F(T) F(0) 就能无缝循环。严格来说F(T) 这一帧在实际播放中并不会出现因为序列只保存 0 到 T-1。真正需要关注的其实是 F(T-1) 与 F(0) 的差。当 T 足够大时这两个时间点的间隔只有 1/T只要动画变化速度不快肉眼就很难察觉。但如果直接使用frameCount作为时间坐标让时间从 0 一直增长到很大的数那么 F(T-1) 和 F(0) 之间可能已经积累了明显的时间差跳变就不可避免。更稳妥的做法是使用周期函数来驱动一切动态量。比如让角度参数取progress * TWO_PI其中 progress 从 0 线性增长到接近 1那么当 progress 回到 0 时角度也回到初始位置系统自然闭合。周期函数保证 F(0) 与 F(1) 在数学上相等同时因为帧率较高F(T-1) 与 F(0) 的视觉差值会非常小。Loop-me 在粒子部分正是采用这种思路而在噪声场部分则可以结合速度控制来实现单向流动感。1.3 Loop-me 如何把 loop 变成设计目标Loop-me 的设计核心可以总结成一句话所有随时间变化的内容都必须由同一个归一化时间参数 progress 来驱动。progress 的取值范围是 [0, 1)它表示当前帧在一个完整循环中的位置。这样设计有三个好处。第一可复现性更强。只要随机种子不变每一次运行同一套参数都会得到同样的结果这非常有利于调试和导出。第二便于控制循环边界。如果某个动态参数希望严格闭环只需要让它成为 progress 的周期函数如果希望它单向流动只需要让它在 progress 变化时缓慢推进保证边界差足够小。第三代码结构更清晰。所有函数都接收 progress 作为参数而不是各自去读全局的 frameCount排查问题时只需要检查 progress 的计算过程。Loop-me 的价值不在于算法有多复杂而在于把“循环”从播放模式提升为生成约束。这个思路可以迁移到很多场景中包括动画系统、数据可视化、WebGL 特效甚至扩展到 agent loop 这类工程系统的设计中一个稳定、可终止、可复现的循环在设计时同样需要考虑边界条件、状态收敛和参数可见性。2. 环境准备与最小项目骨架2.1 运行环境和前置知识Loop-me 的示例使用 p5.js 实现因为它能直接在浏览器中运行安装依赖少适合快速验证生成艺术效果。运行本文示例只需要三样东西一个现代浏览器、一个文本编辑器、一个可以访问 p5.js CDN 的网络环境。如果想离线运行可以下载 p5.min.js 放置到本地 js 目录。前置知识方面不需要掌握复杂算法。会写基础 JavaScript 函数、理解变量和 for 循环了解 p5.js 的 setup 和 draw 两个生命周期方法就足够阅读本文。如果之前写过 Processing 或 p5.js 的任何示例上手会更快。建议环境如下项目推荐版本或工具浏览器Chrome、Edge、Firefox 任一最新稳定版p5.js1.9.x 或 2.x 均可需确认 CDN 地址可用编辑器VS Code 或其他任意文本编辑器静态服务器可选python3 -m http.server 8000 或 npx serveffmpeg可选4.x 以上用于导出 GIF 或视频2.2 项目目录Loop-me 的最小项目结构非常简单只有三个文件。config.js 单独存放所有可调参数sketch.js 负责绘制逻辑index.html 负责加载依赖和入口脚本。loop-me/ ├── index.html ├── config.js └── sketch.js把参数从绘制逻辑中拆出来的原因是生成艺术项目在调参阶段非常频繁如果每次调参数都要去翻绘制函数很容易改错位置。单独一个配置层可以让你快速对比不同参数下的画面效果。后续如果项目变大还可以增加 lib 目录存放 p5.js增加 frames 目录存放导出的帧序列。2.3 入口 HTML 与配置层index.html 的任务很明确引入 p5.js再依次引入 config.js 和 sketch.js。脚本顺序不能颠倒因为 sketch.js 在初始化时就会读取 CONFIG 对象。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleLoop-me/title script srchttps://cdn.jsdelivr.net/npm/p51.9.4/lib/p5.min.js/script script srcconfig.js/script script srcsketch.js/script /head body main/main /body /htmlconfig.js 中定义了一个全局对象 CONFIG集中存放画布尺寸、循环时长、帧率、噪声参数、粒子参数和调色板。这样做的目的是让整个项目成为“参数驱动的生成器”以后想生成不同风格的循环动画只需要改配置不需要动代码逻辑。const CONFIG { SEED: 20240101, SIZE: 800, LOOP_DURATION: 4, FPS: 30, TOTAL_FRAMES: 4 * 30, GRID_SIZE: 40, NOISE_SCALE: 0.08, NOISE_SPEED: 2, MIN_LINE: 4, MAX_LINE: 18, PARTICLE_COUNT: 40, PARTICLE_BASE_RADIUS: 120, PARTICLE_RADIUS_RANGE: 260, PARTICLE_SIZE: 3, ORBIT_TURNS: 1, PALETTE: [ [23, 24, 44], [232, 104, 80], [245, 202, 110] ] };这里注意到 TOTAL_FRAMES 是通过 LOOP_DURATION 和 FPS 相乘得到的。循环时长 4 秒、帧率 30那么总帧数就是 120 帧。这样设置比直接写一个固定数字更直观改循环时长时不容易漏改帧数。3. 实现一个可无缝循环的噪声场3.1 用 progress 统一所有动态时间sketch.js 的入口逻辑集中在 setup 和 draw 两个函数中。setup 负责创建画布、设置帧率、固定随机种子并初始化噪声采样的相位。draw 每帧执行先计算当前帧在一个循环中的 progress再根据 progress 绘制噪声场和粒子。let phase; function setup() { createCanvas(CONFIG.SIZE, CONFIG.SIZE); frameRate(CONFIG.FPS); randomSeed(CONFIG.SEED); phase random(1000); noStroke(); } function draw() { const progress (frameCount % CONFIG.TOTAL_FRAMES) / CONFIG.TOTAL_FRAMES; background(colorAt(0, CONFIG.PALETTE, 0.1)); drawNoiseField(progress); drawParticles(progress); }progress 的计算方式是整个项目的关键frameCount % CONFIG.TOTAL_FRAMES会把帧号限制在 0 到 119 之间再除以 120 得到 0 到约 0.9917 的小数。它表示当前帧在这个循环中的位置。由于求余运算天然具有周期性progress 会一直在这个范围内循环不会无限增长。background(colorAt(0, CONFIG.PALETTE, 0.1))中的透明度 0.1 表示每帧覆盖一层淡淡的背景色制造运动残影效果。如果你想要干净的画面可以把最后的透明度参数改成 1。这里要注意background 带透明度时画面会累积之前几帧的痕迹能明显提升动画的流动感但如果背景透明度太低残影会变得非常脏需要根据画面反复调整。3.2 noise 采样如何回归循环边界噪声函数是生成艺术中最常用的随机源。它和 random 不同noise 在空间上是连续的相邻的自变量通常能得到相近的结果。因此它非常适合用来生成平滑流动的线条、粒子和纹理。但在循环动画中noise 有一个常见陷阱如果你直接使用frameCount或者progress的线性值作为 noise 的第三个采样轴那么当 progress 从接近 1 回到 0 时采样点会发生一次明显跳变。Loop-me 的默认做法是控制推进速度让这种跳变尽可能小。噪声场函数中noise 的第三维参数是progress * CONFIG.NOISE_SPEEDNOISE_SPEED 默认只有 2。最后一帧的 progress 是约 0.9917采样坐标约为 1.9834而下一轮第一帧的采样坐标是 0两者差值只有约 0.03。在 Perlin 噪声中这个差值造成的角度变化非常小肉眼看不出跳动。function drawNoiseField(progress) { const step CONFIG.GRID_SIZE; for (let x 0; x width; x step) { for (let y 0; y height; y step) { const n noise( x * CONFIG.NOISE_SCALE phase, y * CONFIG.NOISE_SCALE phase, progress * CONFIG.NOISE_SPEED ); const angle n * TWO_PI; const length map(n, 0, 1, CONFIG.MIN_LINE, CONFIG.MAX_LINE); stroke(colorAt(progress * 0.4 n * 0.3, CONFIG.PALETTE, 0.8)); strokeWeight(1.5); line( x, y, x cos(angle) * length, y sin(angle) * length ); } } }如果你追求数学上严格无缝可以把噪声场的采样坐标改成周期形式。例如用 cos 和 sin 构造一个环形路径让 progress 从 0 到 1 时采样点绕一圈回到原位。这样 progress0 和 progress1 位置完全相同视觉闭合最可靠。const timeX phase cos(progress * TWO_PI) * CONFIG.NOISE_SPEED; const timeY phase sin(progress * TWO_PI) * CONFIG.NOISE_SPEED; const n noise( x * CONFIG.NOISE_SCALE timeX, y * CONFIG.NOISE_SCALE timeY );不过周期式采样会让噪声场出现一种“往返摆动”的视觉感觉而不是单方向的流动。Loop-me 作为简单项目默认选择线性推进加低速控制同时保留周期式写法作为严格闭环的替代方案。实际项目里可以根据画面风格二选一两种写法都在一个循环系统内成立。3.3 用粒子把“循环感”固定住粒子是生成艺术中制造循环感的重要元素。Loop-me 的粒子系统围绕画布中心旋转每个粒子分布在不同的半径上。半径由噪声决定而旋转角度则由 progress 与黄金角共同计算。function drawParticles(progress) { const cx width / 2; const cy height / 2; noStroke(); fill(colorAt(0.8, CONFIG.PALETTE, 1)); for (let i 0; i CONFIG.PARTICLE_COUNT; i) { const golden i * 2.399963; const radius CONFIG.PARTICLE_BASE_RADIUS noise(i * 0.3, phase) * CONFIG.PARTICLE_RADIUS_RANGE; const orbit golden progress * TWO_PI * CONFIG.ORBIT_TURNS; const px cx cos(orbit) * radius; const py cy sin(orbit) * radius; circle(px, py, CONFIG.PARTICLE_SIZE); } }这里的关键参数是 ORBIT_TURNS它表示整个循环过程中粒子旋转多少圈。它必须是整数因为只有整数圈才能保证 progress 从 0 到 1 后粒子的角度位置与起点完全一致。如果写成 1.25那么循环结束时会比起点多转了四分之一圈画面必然出现跳变。radius 使用 noise 计算时只依赖粒子的索引 i 和固定的 phase 值不依赖 progress所以半径在整个循环中是静止的。如果你希望半径也参与循环运动可以把 noise 的采样参数改成progress * TWO_PI的周期函数确保首尾一致。4. 参数表与颜色系统4.1 CONFIG 参数速查Loop-me 的调参体验非常重要。参数并不是越多越好而是每个参数都要有明确的视觉影响。下面表格列出本文示例中主要参数的含义、默认值和调整方向。参数含义默认值调小影响调大影响SIZE画布边长800画布更小细节密度相对更高画布更大计算量增加LOOP_DURATION一个循环时长4 秒循环更快边界跳动更明显变化更慢导出文件更大FPS播放帧率30动画更卡顿更流畅导出成本更高TOTAL_FRAMES总帧数120循环太短变化不完整循环太长容易暴露重复感GRID_SIZE噪声网格间距40线条更密细节更多线条更疏画面更简洁NOISE_SCALE噪声空间缩放0.08频率更低纹理更宽频率更高纹理更碎NOISE_SPEED噪声时间推进速度2流动更慢边界更平滑流动更快边界跳变更明显ORBIT_TURNS粒子旋转圈数1粒子转得更慢粒子转得更快PARTICLE_COUNT粒子数量
使用p5.js构建无缝循环生成艺术：Loop-me实现解析
生成艺术generative art近年经常出现在前端、创意编程和动效设计场景里它解决的核心问题不是“怎么画一张图”而是“怎么定义一套规则让图自己长出来”。Loop-me 是一个非常典型的轻量生成艺术项目它把循环loop当作生成规则的一部分让程序以固定周期生成同一套噪声场、粒子和色彩播放时首尾相接几乎看不出重新开始的痕迹。很多人第一次做这类作品时画面能动但最后一帧切回第一帧时跳变非常明显问题通常不在随机算法而在时间参数没有真正参与循环。下面的内容会基于一个可运行的 p5.js 最小项目拆解 Loop-me 的循环设计、核心代码、验证方式和常见断点。1. 循环不是播放模式而是一种生成约束1.1 先理解什么叫“可循环的生成艺术”生成艺术并不是让计算机完全随机地乱画。它的流程通常是创作者定义一组规则、参数、随机种子和状态更新方式然后由程序在每一帧或每一次迭代中根据这些规则生成新的图像内容。艺术家控制的是规则空间而不是每一个像素。Loop-me 这个名字里有两个关键词一个是 “Loop”另一个是“me”。从工程角度看Loop 代表这个项目的输出形式必须是可以无缝循环播放的动画序列从设计角度看它意味着“循环”不是一个后期拼接动作而是在生成阶段就写进算法的约束条件。在实际创作中很多人会把生成艺术理解成“让程序自动画图”于是每一帧都重新随机一次结果单帧画面很好看但连续播放时没有连续性。Loop-me 这类项目强调的则是另一种能力让同一个系统在有限时间内完成一轮演化然后平滑回到起点。这种方式非常适合做动态壁纸、循环背景、展示型动效和社交媒体上的短循环视频因为它不需要观众关注剧情只需要视觉上持续呼吸。一个循环动画在视觉上是否成立取决于两件事第一系统在每一帧有没有可重复的确定性第二时间参数从终点回到起点时画面的状态变化是否足够平滑。前者靠随机种子和状态变量保证后者靠时间归一化和周期函数保证。理解了这两点再看 Loop-me 的代码就会非常清楚。1.2 无缝循环依赖 f(0) 与 f(1) 的边界关系如果把一帧画面理解成关于时间 t 的函数 F(t)那么一个长度为 T 帧的循环动画会依次绘制 F(0), F(1), ..., F(T-1)。播放到最后一张 F(T-1) 后下一轮会重新播放 F(0)。因此循环边界是否平滑取决于 F(T-1) 和 F(0) 在视觉上是否接近也取决于两者之间的过渡是否自然。这里容易产生一个误区很多人以为只要满足 F(T) F(0) 就能无缝循环。严格来说F(T) 这一帧在实际播放中并不会出现因为序列只保存 0 到 T-1。真正需要关注的其实是 F(T-1) 与 F(0) 的差。当 T 足够大时这两个时间点的间隔只有 1/T只要动画变化速度不快肉眼就很难察觉。但如果直接使用frameCount作为时间坐标让时间从 0 一直增长到很大的数那么 F(T-1) 和 F(0) 之间可能已经积累了明显的时间差跳变就不可避免。更稳妥的做法是使用周期函数来驱动一切动态量。比如让角度参数取progress * TWO_PI其中 progress 从 0 线性增长到接近 1那么当 progress 回到 0 时角度也回到初始位置系统自然闭合。周期函数保证 F(0) 与 F(1) 在数学上相等同时因为帧率较高F(T-1) 与 F(0) 的视觉差值会非常小。Loop-me 在粒子部分正是采用这种思路而在噪声场部分则可以结合速度控制来实现单向流动感。1.3 Loop-me 如何把 loop 变成设计目标Loop-me 的设计核心可以总结成一句话所有随时间变化的内容都必须由同一个归一化时间参数 progress 来驱动。progress 的取值范围是 [0, 1)它表示当前帧在一个完整循环中的位置。这样设计有三个好处。第一可复现性更强。只要随机种子不变每一次运行同一套参数都会得到同样的结果这非常有利于调试和导出。第二便于控制循环边界。如果某个动态参数希望严格闭环只需要让它成为 progress 的周期函数如果希望它单向流动只需要让它在 progress 变化时缓慢推进保证边界差足够小。第三代码结构更清晰。所有函数都接收 progress 作为参数而不是各自去读全局的 frameCount排查问题时只需要检查 progress 的计算过程。Loop-me 的价值不在于算法有多复杂而在于把“循环”从播放模式提升为生成约束。这个思路可以迁移到很多场景中包括动画系统、数据可视化、WebGL 特效甚至扩展到 agent loop 这类工程系统的设计中一个稳定、可终止、可复现的循环在设计时同样需要考虑边界条件、状态收敛和参数可见性。2. 环境准备与最小项目骨架2.1 运行环境和前置知识Loop-me 的示例使用 p5.js 实现因为它能直接在浏览器中运行安装依赖少适合快速验证生成艺术效果。运行本文示例只需要三样东西一个现代浏览器、一个文本编辑器、一个可以访问 p5.js CDN 的网络环境。如果想离线运行可以下载 p5.min.js 放置到本地 js 目录。前置知识方面不需要掌握复杂算法。会写基础 JavaScript 函数、理解变量和 for 循环了解 p5.js 的 setup 和 draw 两个生命周期方法就足够阅读本文。如果之前写过 Processing 或 p5.js 的任何示例上手会更快。建议环境如下项目推荐版本或工具浏览器Chrome、Edge、Firefox 任一最新稳定版p5.js1.9.x 或 2.x 均可需确认 CDN 地址可用编辑器VS Code 或其他任意文本编辑器静态服务器可选python3 -m http.server 8000 或 npx serveffmpeg可选4.x 以上用于导出 GIF 或视频2.2 项目目录Loop-me 的最小项目结构非常简单只有三个文件。config.js 单独存放所有可调参数sketch.js 负责绘制逻辑index.html 负责加载依赖和入口脚本。loop-me/ ├── index.html ├── config.js └── sketch.js把参数从绘制逻辑中拆出来的原因是生成艺术项目在调参阶段非常频繁如果每次调参数都要去翻绘制函数很容易改错位置。单独一个配置层可以让你快速对比不同参数下的画面效果。后续如果项目变大还可以增加 lib 目录存放 p5.js增加 frames 目录存放导出的帧序列。2.3 入口 HTML 与配置层index.html 的任务很明确引入 p5.js再依次引入 config.js 和 sketch.js。脚本顺序不能颠倒因为 sketch.js 在初始化时就会读取 CONFIG 对象。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleLoop-me/title script srchttps://cdn.jsdelivr.net/npm/p51.9.4/lib/p5.min.js/script script srcconfig.js/script script srcsketch.js/script /head body main/main /body /htmlconfig.js 中定义了一个全局对象 CONFIG集中存放画布尺寸、循环时长、帧率、噪声参数、粒子参数和调色板。这样做的目的是让整个项目成为“参数驱动的生成器”以后想生成不同风格的循环动画只需要改配置不需要动代码逻辑。const CONFIG { SEED: 20240101, SIZE: 800, LOOP_DURATION: 4, FPS: 30, TOTAL_FRAMES: 4 * 30, GRID_SIZE: 40, NOISE_SCALE: 0.08, NOISE_SPEED: 2, MIN_LINE: 4, MAX_LINE: 18, PARTICLE_COUNT: 40, PARTICLE_BASE_RADIUS: 120, PARTICLE_RADIUS_RANGE: 260, PARTICLE_SIZE: 3, ORBIT_TURNS: 1, PALETTE: [ [23, 24, 44], [232, 104, 80], [245, 202, 110] ] };这里注意到 TOTAL_FRAMES 是通过 LOOP_DURATION 和 FPS 相乘得到的。循环时长 4 秒、帧率 30那么总帧数就是 120 帧。这样设置比直接写一个固定数字更直观改循环时长时不容易漏改帧数。3. 实现一个可无缝循环的噪声场3.1 用 progress 统一所有动态时间sketch.js 的入口逻辑集中在 setup 和 draw 两个函数中。setup 负责创建画布、设置帧率、固定随机种子并初始化噪声采样的相位。draw 每帧执行先计算当前帧在一个循环中的 progress再根据 progress 绘制噪声场和粒子。let phase; function setup() { createCanvas(CONFIG.SIZE, CONFIG.SIZE); frameRate(CONFIG.FPS); randomSeed(CONFIG.SEED); phase random(1000); noStroke(); } function draw() { const progress (frameCount % CONFIG.TOTAL_FRAMES) / CONFIG.TOTAL_FRAMES; background(colorAt(0, CONFIG.PALETTE, 0.1)); drawNoiseField(progress); drawParticles(progress); }progress 的计算方式是整个项目的关键frameCount % CONFIG.TOTAL_FRAMES会把帧号限制在 0 到 119 之间再除以 120 得到 0 到约 0.9917 的小数。它表示当前帧在这个循环中的位置。由于求余运算天然具有周期性progress 会一直在这个范围内循环不会无限增长。background(colorAt(0, CONFIG.PALETTE, 0.1))中的透明度 0.1 表示每帧覆盖一层淡淡的背景色制造运动残影效果。如果你想要干净的画面可以把最后的透明度参数改成 1。这里要注意background 带透明度时画面会累积之前几帧的痕迹能明显提升动画的流动感但如果背景透明度太低残影会变得非常脏需要根据画面反复调整。3.2 noise 采样如何回归循环边界噪声函数是生成艺术中最常用的随机源。它和 random 不同noise 在空间上是连续的相邻的自变量通常能得到相近的结果。因此它非常适合用来生成平滑流动的线条、粒子和纹理。但在循环动画中noise 有一个常见陷阱如果你直接使用frameCount或者progress的线性值作为 noise 的第三个采样轴那么当 progress 从接近 1 回到 0 时采样点会发生一次明显跳变。Loop-me 的默认做法是控制推进速度让这种跳变尽可能小。噪声场函数中noise 的第三维参数是progress * CONFIG.NOISE_SPEEDNOISE_SPEED 默认只有 2。最后一帧的 progress 是约 0.9917采样坐标约为 1.9834而下一轮第一帧的采样坐标是 0两者差值只有约 0.03。在 Perlin 噪声中这个差值造成的角度变化非常小肉眼看不出跳动。function drawNoiseField(progress) { const step CONFIG.GRID_SIZE; for (let x 0; x width; x step) { for (let y 0; y height; y step) { const n noise( x * CONFIG.NOISE_SCALE phase, y * CONFIG.NOISE_SCALE phase, progress * CONFIG.NOISE_SPEED ); const angle n * TWO_PI; const length map(n, 0, 1, CONFIG.MIN_LINE, CONFIG.MAX_LINE); stroke(colorAt(progress * 0.4 n * 0.3, CONFIG.PALETTE, 0.8)); strokeWeight(1.5); line( x, y, x cos(angle) * length, y sin(angle) * length ); } } }如果你追求数学上严格无缝可以把噪声场的采样坐标改成周期形式。例如用 cos 和 sin 构造一个环形路径让 progress 从 0 到 1 时采样点绕一圈回到原位。这样 progress0 和 progress1 位置完全相同视觉闭合最可靠。const timeX phase cos(progress * TWO_PI) * CONFIG.NOISE_SPEED; const timeY phase sin(progress * TWO_PI) * CONFIG.NOISE_SPEED; const n noise( x * CONFIG.NOISE_SCALE timeX, y * CONFIG.NOISE_SCALE timeY );不过周期式采样会让噪声场出现一种“往返摆动”的视觉感觉而不是单方向的流动。Loop-me 作为简单项目默认选择线性推进加低速控制同时保留周期式写法作为严格闭环的替代方案。实际项目里可以根据画面风格二选一两种写法都在一个循环系统内成立。3.3 用粒子把“循环感”固定住粒子是生成艺术中制造循环感的重要元素。Loop-me 的粒子系统围绕画布中心旋转每个粒子分布在不同的半径上。半径由噪声决定而旋转角度则由 progress 与黄金角共同计算。function drawParticles(progress) { const cx width / 2; const cy height / 2; noStroke(); fill(colorAt(0.8, CONFIG.PALETTE, 1)); for (let i 0; i CONFIG.PARTICLE_COUNT; i) { const golden i * 2.399963; const radius CONFIG.PARTICLE_BASE_RADIUS noise(i * 0.3, phase) * CONFIG.PARTICLE_RADIUS_RANGE; const orbit golden progress * TWO_PI * CONFIG.ORBIT_TURNS; const px cx cos(orbit) * radius; const py cy sin(orbit) * radius; circle(px, py, CONFIG.PARTICLE_SIZE); } }这里的关键参数是 ORBIT_TURNS它表示整个循环过程中粒子旋转多少圈。它必须是整数因为只有整数圈才能保证 progress 从 0 到 1 后粒子的角度位置与起点完全一致。如果写成 1.25那么循环结束时会比起点多转了四分之一圈画面必然出现跳变。radius 使用 noise 计算时只依赖粒子的索引 i 和固定的 phase 值不依赖 progress所以半径在整个循环中是静止的。如果你希望半径也参与循环运动可以把 noise 的采样参数改成progress * TWO_PI的周期函数确保首尾一致。4. 参数表与颜色系统4.1 CONFIG 参数速查Loop-me 的调参体验非常重要。参数并不是越多越好而是每个参数都要有明确的视觉影响。下面表格列出本文示例中主要参数的含义、默认值和调整方向。参数含义默认值调小影响调大影响SIZE画布边长800画布更小细节密度相对更高画布更大计算量增加LOOP_DURATION一个循环时长4 秒循环更快边界跳动更明显变化更慢导出文件更大FPS播放帧率30动画更卡顿更流畅导出成本更高TOTAL_FRAMES总帧数120循环太短变化不完整循环太长容易暴露重复感GRID_SIZE噪声网格间距40线条更密细节更多线条更疏画面更简洁NOISE_SCALE噪声空间缩放0.08频率更低纹理更宽频率更高纹理更碎NOISE_SPEED噪声时间推进速度2流动更慢边界更平滑流动更快边界跳变更明显ORBIT_TURNS粒子旋转圈数1粒子转得更慢粒子转得更快PARTICLE_COUNT粒子数量
 十分钟完全指南)
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
