2D сетки объектов в p5.js

Question

То, что я пытаюсь сделать

Я пытаюсь создать игру линкоров и на данный момент я работаю над рисованием доски таким образом, чтобы каждое пятно является объектом. Таким образом, когда пользователь нажимает на них, они могут выбрать, где разместить свои линкоры. Я пытаюсь сделать это, сохраняя каждое пятно как объект в массиве, называемом кругами.

Grid

Проблема

Моя проблема заключается в том, что при попытке создать объекты, я могу только показаться, чтобы сделать всю сетку в качестве одного объекта. Вот код, который я до сих пор (извините за качество, я нуб!):

var circles = []; 
var x = 100; 
var y = 100; 
for(i = 0; i < 2; i++) { 
    circles[i] = { 
     drawGrid: function() { 
      for (var x = 100; x <= 1000; x += 100) { 
       for (var y = 100; y <=1000; y += 100) { 
        fill(0); 
        ellipse(x,y,20,20); 
       } 
      } 
     } 
    } 
} 

function setup() { 
    createCanvas(1100,1100); 
} 

function draw() { 
    for(i = 0; i < 2; i++) { 
     circles[i].drawGrid(); 
    } 
} 

Я подделаны расположение для петель (х, у и я), но ничего не похоже на работу и если я попробую что-нибудь еще, вместо того, чтобы получить сетку, как показано ниже - с каждым O быть объектом:

O O O O 
O O O O 
O O O O 
O O O O 

я получить что-то вроде одного из них:

1) O O O O | 2) O 
    O   |  O 
    O   |  O 
    O   |   O 

Любая помощь высоко оценил, спасибо!

Answer 1

я бы функцию конструктора для круга, как это:

var circles = []; 

function setup() { 
    createCanvas(500, 500); 
    //there's a "b" for every "a" 
    for (var a = 10; a < width; a += 30) { 
    for (var b = 10; b < height; b += 30) { 
     //add the circles to the array at x = a and y = b 
     circles.push(new Circle(a, b)); 
    } 
    } 
    console.log(circles.length); 

} 

function draw() { 
    background(50); 
    for (var b = 0; b < circles.length; b++) { 
    circles[b].show(); 
    //console.log("shown"); 
    } 
} 

function Circle(x, y) { 
    this.x = x; 
    this.y = y; 

    this.show = function() { 
    fill(255); 
    noStroke(); 
    ellipse(this.x, this.y, 10, 10); 
    //console.log("showing"); 
    } 
} 

, конечно, вы будете играть со значениями немного, но это основная идея