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

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

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

  // draw circle according to circle draw list
  for (let i = 0; i < circle_xy_list.length; i++) {
    [circle_x, circle_y] = circle_xy_list[i];
    circle(circle_x, circle_y, 30);
  }
}

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

  // update circle position if mouse click inside circle
  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++) {
      //try with x and y in circle list, check if mouse click inside circle
      [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) {
      // record mouse click x and y, add into circle draw list
      circle_xy_list.push([mouseX, mouseY, false]);
    }
  } else {
    // record mouse click x and y, add into circle draw list
    circle_xy_list.push([mouseX, mouseY, false]);
  }
}