p5.js如何为网格每个圆形分配随机初始色并沿色盘同步渐变

原代码问题说明 #

你代码中波浪效果的原因是仅使用了一个全局col1变量，在嵌套for循环中每绘制一个圆就累加一次色相，导致后一个圆的色相始终比前一个高一点；同时因为仅定义了一个初始色相变量，所以要么所有圆初始色相同，要么在draw中重复生成导致每帧重置颜色。

解决方案 #

要实现每个圆初始色相随机、后续所有圆同速沿色轮渐变的效果，核心逻辑是给每个圆形单独存储初始随机色相，再通过统一的全局偏移量控制所有圆形的色相同步变化：

• 新增两个全局变量：initialColors 二维数组存储每个网格位置圆形的初始随机色相，hueOffset 变量记录全局色相偏移值，所有圆形的实际色相为「初始色相+全局偏移值」
• 在setup阶段遍历所有网格点位，为每个点位生成随机色相存入initialColors，确保每个圆形初始色唯一且仅初始化一次
• 在draw阶段每次仅更新全局hueOffset，所有圆形都基于自己的初始色相叠加偏移值计算实时色相，实现同速渐变

修改后的完整代码如下：

let intervals = [10];
let count;
let frameWidth;
let distance;
let diam1;
let sat1;
let bri1;
let speed;
// 新增变量：存储每个圆的初始色相、全局色相偏移
let initialColors = [];
let hueOffset = 0;

function setup() {
  createCanvas(800, 800);  
  colorMode(HSB, 360, 100, 100, 1);
  
  count = random(intervals);
  frameWidth = width*0.8;
  distance = frameWidth/count;
  diam1 = distance*0.5;  
  speed = 0.5; // 可自行调整数值控制渐变速度，数值越大渐变越快
  sat1 = 100;
  bri1 = 100;
  noStroke();
  
  // 初始化每个网格位置的随机色相，仅执行一次
  let xIndex = 0;
  for (let x = width * 0.1; x <= width * 0.9; x += distance) {
    initialColors[xIndex] = [];
    let yIndex = 0;
    for (let y = height * 0.1; y <= height * 0.9; y += distance) {
      initialColors[xIndex][yIndex] = random(360);
      yIndex++;
    }
    xIndex++;
  }
}

function draw() {
  background(0, 0, 0, 1);
  // 仅更新全局偏移量，所有圆同步变色
  hueOffset = (hueOffset + speed) % 360;

  // 绘制网格
  let xIndex = 0;
  for (let x = width * 0.1; x <= width * 0.9; x += distance) {
    let yIndex = 0;
    for (let y = height * 0.1; y <= height * 0.9; y += distance) {
      // 计算当前圆的实时色相，模360避免超出HSB取值范围
      let currentCol = (initialColors[xIndex][yIndex] + hueOffset) % 360;
      fill(currentCol, sat1, bri1, 1);
      ellipse(x,y,diam1);
      yIndex++;
    }
    xIndex++;
  }
}

内容的提问来源于stack exchange，提问作者astromango