如何在p5.js中创建带细分效果的椭圆网格

问题根源 #

• 你的CircleSubDivs函数里，绘制圆弧时固定用了画布中心width/2, height/2，所有tile里的椭圆都叠在同一个位置，自然只看到一个
• 函数定义只接收3个参数，但调用时传了4个（x,y,tileW,tileH），根本没用到tile的宽高来适配椭圆的拉伸效果
• 细分圆弧的尺寸用全局width计算，没有根据当前tile的大小缩放

修正方案 #

下面是修改后的完整代码，同时实现了椭圆随tile宽高变形、鼠标位置控制tile数量的功能：

function CircleSubDivs(x, y, tileW, tileH) {
  const amount = 13;
  const r = 360 / amount;
  // 基于tile的最小边计算圆弧的最大尺寸，避免超出tile范围
  const maxSize = min(tileW, tileH);

  for (let j = 0; j < 10; j++) {
    for (let i = 0; i < amount; i++) {
      fill(random(255));
      // 基于当前细分层级计算圆弧尺寸，从maxSize缩到10
      let s = map(j, 0, 9, maxSize, 10);
      // 以tile中心为椭圆中心，宽高匹配tile的宽高
      arc(x + tileW/2, y + tileH/2, s * (tileW/maxSize), s * (tileH/maxSize), radians(r * i), radians(r * (i + 1)));
    }
  }
}

function setup() {
  createCanvas(500, 500);
  frameRate(1);
}

function draw() {
  background("#0F0F0F");
  noStroke();

  // 鼠标位置控制tile数量：x轴控制横向tile，y轴控制纵向tile
  let tilesX = floor(map(mouseX, 0, width, 1, 10));
  let tilesY = floor(map(mouseY, 0, height, 1, 10));
  let tileW = width / tilesX;
  let tileH = height / tilesY;

  for (let x = 0; x < tilesX; x++) {
    for (let y = 0; y < tilesY; y++) {
      CircleSubDivs(x * tileW, y * tileH, tileW, tileH);
    }
  }
}

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

关键修改点说明 #

• 调整CircleSubDivs参数为x, y, tileW, tileH，直接使用tile的宽高来控制椭圆的拉伸比例
• 圆弧中心改为当前tile的中心（x + tileW/2, y + tileH/2），确保每个tile里的椭圆在自己区域内
• 用min(tileW, tileH)计算圆弧的基准尺寸，再根据tile的宽高比例缩放，保证椭圆不会超出tile边界
• 添加鼠标控制逻辑：横向tile数量随鼠标X轴移动从1到10变化，纵向随Y轴变化，实时适配

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