如何用JavaScript生成渐变大小的彩色重叠圆形图案？

当然可以用JavaScript结合p5.js实现你想要的效果，你的雏形代码已经搭建了基础框架，下面我们一步步修改来实现参考图里的大小渐变和色彩重叠效果：

第一步：修正代码基础错误 #

你定义的变量是dial，但在ellipse()里误用了diam，先统一变量名，同时调整循环起始位置，避免圆形超出画布边缘：

let spaceX = 25,
  spaceY = 25;

function setup() {
  createCanvas(400, 400);
  noStroke();
}

function draw() {
  background(220);

  // 从spaceX/2开始，避免圆形边缘超出画布
  for (let x = spaceX/2; x <= width; x += spaceX) {
    for (let y = spaceY/2; y <= height; y += spaceY) {
      ellipse(x, y, 20); // 先保留固定直径，后续修改
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

第二步：实现圆形大小渐变 #

参考图里的圆形大小变化更接近自然的噪声渐变，而非简单线性渐变，我们用p5.js内置的noise()函数来实现：

1. 添加噪声控制变量，调整noiseScale可以改变渐变的平滑程度：

let spaceX = 25,
  spaceY = 25,
  noiseScale = 0.01; // 值越小，渐变越平滑

2. 在循环中计算每个网格点的噪声值，再将其映射到我们需要的直径范围：

function draw() {
  background(220);

  for (let x = spaceX/2; x <= width; x += spaceX) {
    for (let y = spaceY/2; y <= height; y += spaceY) {
      // 生成当前点的噪声值（范围0-1）
      let noiseVal = noise(x * noiseScale, y * noiseScale);
      // 将噪声值映射为直径，范围可自行调整（这里是5到30）
      let diam = map(noiseVal, 0, 1, 5, 30);
      ellipse(x, y, diam);
    }
  }
}

如果想要简单的线性渐变（比如从左到右、从上到下逐渐变大），可以用坐标比例计算：

// 线性渐变示例：对角线方向的圆形最大
let xRatio = x / width;
let yRatio = y / height;
let diam = map(xRatio + yRatio, 0, 2, 5, 30);

第三步：实现色彩重叠效果 #

参考图里的色彩重叠可以通过半透明填充色实现，我们可以结合噪声值调整颜色，让大小不同的圆形对应不同色调：

修改fill()函数，添加透明度参数（第四个值，范围0-255，值越小越透明），同时用噪声值调整颜色：

function draw() {
  background(220);

  for (let x = spaceX/2; x <= width; x += spaceX) {
    for (let y = spaceY/2; y <= height; y += spaceY) {
      let noiseVal = noise(x * noiseScale, y * noiseScale);
      let diam = map(noiseVal, 0, 1, 5, 30);
      // 基于噪声值生成绿色系颜色，添加半透明效果
      fill(80 + noiseVal*120, 180 + noiseVal*75, 80, 160);
      ellipse(x, y, diam);
    }
  }
}

如果想要模拟参考图里的多色重叠，可以分层绘制不同颜色的圆形，比如先画深绿色，再画黄色，最后画白色，每层都用半透明：

function draw() {
  background(220);

  for (let x = spaceX/2; x <= width; x += spaceX) {
    for (let y = spaceY/2; y <= height; y += spaceY) {
      let noiseVal = noise(x * noiseScale, y * noiseScale);
      let diam = map(noiseVal, 0, 1, 5, 30);
      
      // 第一层：深绿色半透明
      fill(50, 150, 50, 120);
      ellipse(x, y, diam);
      // 第二层：黄色半透明
      fill(255, 220, 80, 100);
      ellipse(x, y, diam*0.8);
      // 第三层：白色半透明
      fill(255, 255, 255, 80);
      ellipse(x, y, diam*0.6);
    }
  }
}

完整最终代码 #

let spaceX = 25,
  spaceY = 25,
  noiseScale = 0.01;

function setup() {
  createCanvas(400, 400);
  noStroke();
}

function draw() {
  background(220);

  for (let x = spaceX/2; x <= width; x += spaceX) {
    for (let y = spaceY/2; y <= height; y += spaceY) {
      let noiseVal = noise(x * noiseScale, y * noiseScale);
      let diam = map(noiseVal, 0, 1, 5, 30);
      
      fill(80 + noiseVal*120, 180 + noiseVal*75, 80, 160);
      ellipse(x, y, diam);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

你可以根据自己的喜好调整noiseScale、直径范围、颜色参数，得到不同的视觉效果。

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