如何在两个循环内访问数组中的对象？

Question

I'm using p5.js in this project, I wanted to make rectangles that will fill the entire canvas, so I coded this:

for (let x = 0; x < cols; x++) {
    for (let y = 0; y < rows; y++) {
        cx = w + x * w - w;
        cy = w + y * w - w;
        rect(cx, cy, w, w)
    }
}

and obviously it works but I needed to make a rectangle class, but I don't know how to draw them all onto the screen, here is the code after creating the class, it doesn't really work...

for (let x = 0; x < cols; x++) {
    for (let y = 0; y < rows; y++) {
        cx = w + x * w - w;
        cy = w + y * w - w;        
        rects.push(new Rectangle(cx, cy, w));
        rects[x * y].show()
    }
}

Answer 1

Your index x * y is wrong, you need:

 rects[x * rows + y].show();

But you could also just take the last element:

 rects[rects.length-1].show();

More intuitive (and more readable, and more efficient) would be to first assign the new object to a separate variable:

 var rect = new Rectangle(cx, cy, w);
 rects.push(rect);
 rect.show();

Answer 2

Assuming that your rectangle class works how you want it to, you would just need to change the last line to:

rects[y + (x * rows].show();

After 10 minutes scratching my head... you would normally iterate through the rows and then then columns of each row. This puts your data starting from left to right, rather than top to bottom.