图像处理从像素数据开始
位图把画面存储为二维像素网格，每个像素包含红、绿、蓝和透明度四个通道。程序可以读取、比较或重新绘制这些数据，让静态图像成为生成视觉的颜色来源。
学习目标
01
理解数字图像由二维像素网格与 RGBA 颜色通道组成。
02
使用 preload()、loadPixels() 和索引公式读取指定位置的颜色。
03
理解粒子位置如何同时决定流场方向与图像采样位置。
04
阅读从图像数据到彩色轨迹的完整代码执行路径。
核心概念
原理解析
图片只加载与解析一次
preload() 保证《星夜》在 setup() 前就绪；sourceImage.loadPixels() 把颜色写入 pixels[]。500 个粒子共享这份数据，不再为每个粒子重复加载图片。
二维坐标映射 RGBA 索引
sampleImageColor() 先把粒子位置限制在图片范围，再用 (y × width + x) × 4 找到像素起点，依次读取 R、G、B 三个通道作为圆点填色。
粒子把图像颜色带入流场
画布被划分为 10 像素网格，每格保存一个 Perlin noise 方向向量。粒子根据当前位置查找向量、更新加速度与速度，再读取当前位置对应的《星夜》颜色。
代码执行路径与轨迹累积
setup() 只绘制一次白色背景；draw() 不再清屏，因此每一帧的彩色圆点都会留在画布上，逐渐形成原案例的连续流动纹理。
- buildFlowField()：更新噪声方向数组
- follow() → update()：读取力并更新位置
- display()：采样图像颜色并绘制直径 7px 的圆点
案例演示
实时运行 · 500 个粒子持续采样《星夜》的颜色，并在噪声流场中累积轨迹
sketch.js打开源码
正在载入源码…核心要点
图像可以成为颜色数据库
程序不必直接显示原图；只要读取像素颜色，就能让其他图形保留《星夜》的色彩关系。
位置连接采样与运动
同一组粒子坐标既用于查找流场向量，也用于读取图片颜色，使运动结构和图像信息保持同步。
不清屏就会留下时间
当 draw() 不覆盖上一帧时，每次绘制都会累积；时间因此被记录为逐渐加密的彩色轨迹。