// circle_xy_list = [[circle_x, circle_y, clicked?], ......]
let circle_xy_list = [];

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

function draw() {
  background(220);
  noFill();

  let c_list_length = circle_xy_list.length;

  for (let i = 0; i < c_list_length; i++) {
    circle_x = circle_xy_list[i][0];
    circle_y = circle_xy_list[i][1];

    circle(circle_x, circle_y, 30);
  }

  if (c_list_length > 1) {
    for (let i = 0; i < c_list_length - 1; i++) {
      if (c_list_length > 2 && i == 0) {
        line(
          circle_xy_list[0][0],
          circle_xy_list[0][1],
          circle_xy_list[c_list_length - 1][0],
          circle_xy_list[c_list_length - 1][1]
        );
      }

      line(
        circle_xy_list[i][0],
        circle_xy_list[i][1],
        circle_xy_list[i + 1][0],
        circle_xy_list[i + 1][1]
      );
    }
  }

}

function mouseDragged() {
  // console.log({ mouse_drag: [mouseX, mouseY] });
  mouse_drag_end_xy = [mouseX, mouseY];
  mouse_released = false;

  for (let i = 0; i < circle_xy_list.length; i++) {
    if (circle_xy_list[i][2] == true) {
      circle_xy_list[i][0] = mouseX;
      circle_xy_list[i][1] = mouseY;
    }
  }
  // prevent default
  return false;
}

function mouseReleased() {
  // console.log({ mouse_release: [mouseX, mouseY] });
  mouse_drag_end_xy = [mouseX, mouseY];
  mouse_dragging = false;
  mouse_released = true;

  for (let i = 0; i < circle_xy_list.length; i++) {
    circle_xy_list[i][2] = false;
  }
}

function pythTheorem(a, b) {
  return Math.pow(Math.pow(a, 2) + Math.pow(b, 2), 0.5);
}

function mousePressed() {
  // console.log({ mouse_press: [mouseX, mouseY] });
  mouse_drag_start_xy = [mouseX, mouseY];
  mouse_dragging = true;
  mouse_released = false;

  if (circle_xy_list.length > 0) {
    circle_found = false;
    for (let i = 0; i < circle_xy_list.length; i++) {
      [circle_x, circle_y] = circle_xy_list[i];
      if (pythTheorem(circle_x - mouseX, circle_y - mouseY) < 30) {
        circle_xy_list[i][2] = true;
        circle_found = true;
        break;
      }
    }

    if (circle_found == false) {
      circle_xy_list.push([mouseX, mouseY, false]);
    }
  } else {
    circle_xy_list.push([mouseX, mouseY, false]);
  }
}