grille Centrage des objets

Question

Comme dans le titre, im essayant de créer une grille d'objets dans P5 Spot(x, y, size), avec un espace de 4 pixels entre eux et le centre sur la toile sans utiliser translate, voici ce que j'ai:

gridSize = 7; 
    spotSize = 60; 
    spots = []; 

    for (var y = height/2 - ((gridSize * spotSize + gridSize * 4)/2); y < (height/2 - ((gridSize * spotSize + gridSize * 4)/2)) + (gridSize * spotSize + gridSize * 4); y += spotSize + 4) { 

    for (var x = width/2 - ((gridSize * spotSize + gridSize * 4)/2); x < (width/2 - ((gridSize * spotSize + gridSize * 4)/2)) + (gridSize * spotSize + gridSize * 4); x += spotSize + 4) { 

     spots.push(new Spot(x, y, spotSize)); 

    } 
    } 

Problème est que ma grille regarde, pourquoi n'est-elle pas centrée? Probablement une erreur vraiment simple et stupide mais je ne peux pas le trouver. Toute aide appréciée.

Mon objet Spot dessine juste une ellipse aux x et y donnés. Code entier à http://codepen.io/felipe_mare/pen/GWyMOL

Answer 1

-SOLVED-

spots.push(new Spot(x + spotSize/2, y + spotSize/2, spotSize)); 

ne prenait pas en compte le fait que l'ellipse est tirée du centre, donc je dois ajouter le rayon du cercle spotSize/2