嵌套循环生成方格网格：双滑块调节宽高的高度功能实现问题

核心修改点 #

• 修复初始化循环逻辑：原有循环嵌套会生成125个多余网格元素，改为5列×5行的标准嵌套循环，每个网格元素构造时直接存储对应的行、列索引，避免后续通过数组下标反算坐标时出错
• 修正Y轴坐标计算逻辑：原有注释的Y轴计算复用了X轴的公式，不符合行定位规则，改为行索引 × 高度滑块数值的正确逻辑
• 网格矩形的宽高分别绑定两个滑块的数值，保证元素大小和间距同步调整

修改后完整代码 #

let bubbles = [];
var slider, slider2;
function setup() {
  var canvas = createCanvas(windowWidth, windowHeight);
  // 宽度调节滑块
  slider = createSlider(10, 260, 260);
  // 高度调节滑块
  slider2 = createSlider(10, 260, 260);
  // 初始化5行5列网格
  for (var col = 0; col < 5; col++) {
    for (var row = 0; row < 5; row++) {
      let b = new Bubble(col, row);
      bubbles.push(b);
    }
  }
}
function draw() {
  background(0);
  for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].show();
  }
}
class Bubble {
  constructor(col, row) {
    // 存储当前网格的列、行索引，无需后续反算
    this.col = col;
    this.row = row;
    this.brightness = 0;
  }

  show() {
    push();
    stroke(255);
    strokeWeight(0.2);
    fill(this.brightness);
    // 列索引×宽度滑块值 = X坐标
    let x = this.col * slider.value();
    // 行索引×高度滑块值 = Y坐标
    let y = this.row * slider2.value();
    translate(x, y);
    // 矩形宽高分别对应两个滑块的数值
    rect(0, 0, slider.value(), slider2.value());
    pop(); 
  }
}

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