let grid = [];
let gridSize = 10;
let spacing = 50;
let isDrawing = false;
let lines = [];

function setup(){
  createCanvas(600, 600);
  ellipseMode(CENTER);
  background(0);

  for(let i = 0; i < gridSize; i++){
    for(let j = 0; j < gridSize*2; j++){
      if(j % 2 == 0){
        grid.push(new Dot(i * spacing, j * spacing/2));
      } else {
        grid.push(new Dot(i * spacing + spacing/2, j * spacing/2));
      }
    }
  }
} // End of setup

function draw(){
  background(0);

  for(let i = 0; i < grid.length; i++){
    grid[i].display();
  }
} // End of draw

function mousePressed(){
  for(let i = 0; i < grid.length; i++){
    if(grid[i].mouseOver){
      isDrawing = true;
      lines.push({x: grid[i].x, y: grid[i].y});
    }
  }

  console.log(lines);
}

class Dot{
  constructor(x, y){
    this.x = x;
    this.y = y;
  }

  mouseOver(){
    let tolerance = 8;

    let distX = this.x - mouseX;
    let distY = this.y - mouseY;
    let dist = Math.sqrt((distX * distX) + (distY * distY));

    return dist <= tolerance;
  }

  display(){
    fill(150);
    noStroke();
    ellipse(this.x, this.y, 4, 4);

    if(this.mouseOver()){
      noFill();
      stroke(255);
      ellipse(this.x, this.y, 16, 16);
    }
  }
}