let fr = 10;

// temp store list of small circle
let small_circles = [];
let num_of_circles = 500;
let mouse_drag_start_xy = [];
let mouse_drag_end_xy = [];

let mouse_dragging = false;
let mouse_released = false;

let highlight_circle = false;
let vibrate_circle = false;

let draw_rectangle = false;

let IDX_RED = 2;
let IDX_GREEN = 3;
let IDX_VIBRATE = 4;

function setup() {
  createCanvas(400, 400);
  background(220);
  frameRate(fr);

  // render random circle position at start
  for (var i = 0; i < num_of_circles; i++) {
    var circle_x = random(400);
    var circle_y = random(400);
    // red, green, vibrate
    small_circles.push([circle_x, circle_y, false, false, false]);
  }
}

function draw() {
  background(220);

  // draw rectangle
  // reorder 2 mouse x,y position, pick smaller one to tackle drag from bottom right to top left
  rect_start = [
    Math.min(mouse_drag_start_xy[0], mouse_drag_end_xy[0]),
    Math.min(mouse_drag_start_xy[1], mouse_drag_end_xy[1]),
  ];
  rect_end = [
    Math.max(mouse_drag_start_xy[0], mouse_drag_end_xy[0]),
    Math.max(mouse_drag_start_xy[1], mouse_drag_end_xy[1]),
  ];

  rect_w = rect_end[0] - rect_start[0];
  rect_h = rect_end[1] - rect_start[1];
  noFill();
  if (mouse_dragging) {
    stroke("red");
    rect(rect_start[0], rect_start[1], rect_w, rect_h);
  }

  fill("white");
  for (var i = 0; i < num_of_circles; i++) {
    [circle_x, circle_y, fill_red, fill_green, vibrate] = small_circles[i];

    // fill_what , decide what to do
    if (circle_x > rect_start[0] && circle_x < rect_end[0]) {
      if (circle_y > rect_start[1] && circle_y < rect_end[1]) {
        if (mouse_dragging) {
          // mouse dragging and inside rectangle
          small_circles[i][IDX_RED] = true;
          small_circles[i][IDX_GREEN] = false;
          small_circles[i][IDX_VIBRATE] = false;
        } else if (mouse_released) {
          // mouse stop dragging and inside rectangle
          small_circles[i][IDX_RED] = false;
          small_circles[i][IDX_GREEN] = true;
          small_circles[i][IDX_VIBRATE] = true;
        } else {
        }
      } else {
        // circle not inside rectangle, reset paint red
        small_circles[i][IDX_RED] = false;
      }
    } else {
      // circle not inside rectangle, reset paint red
      small_circles[i][IDX_RED] = false;
    }

    fill("white");
    [circle_x, circle_y, fill_red, fill_green, vibrate] = small_circles[i];
    let offset_x, offset_y;
    offset_x = 0;
    offset_y = 0;
    stroke("black");

    // do what decided
    if (fill_red) {
      fill("red");
    }

    if (fill_green) {
      fill("green");
    }

    if (vibrate) {
      offset_x = Math.random(1) * 10;
      offset_y = Math.random(1) * 10;
    }

    // output small circle
    circle(circle_x + offset_x, circle_y + offset_y, 5);
  }
}

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

  // prevent default
  return false;
}

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

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