Lesson 07 · 数组与粒子系统 — Creative Coding with P5.js

学习目标

创建数组，并在数组中保存多个粒子对象。

使用 push() 初始化粒子群，再通过遍历统一更新。

理解加速度、速度、位置与上一位置之间的关系。

把二维网格坐标转换为一维索引，读取流场方向。

核心概念

Arraypush()ParticleflowField[]2D → 1D indexp5.Vector

particles[] 保存粒子对象，flowField[] 保存网格方向；粒子根据位置读取方向后更新运动。

setup() 用 push() 建立 500 个粒子，draw() 用 for...of 让每个粒子执行相同流程。

index = x + y * columns 把网格坐标转换为 flowField[] 中的查询位置。

每帧依次更新 acceleration → velocity → position，再连接上一位置形成连续轨迹。

实时运行 · 点击画布或按 R，重置粒子位置与流场

正在载入源码…

先用 push() 建立粒子群，再用一次循环让所有对象执行相同的更新流程。

index = x + y * columns 把二维网格位置映射到 flowField[] 的一维存储位置。

每个 Particle 管理自己的运动状态，数组与主循环负责把个体组织成完整系统。