133 lines
3.3 KiB
JavaScript
133 lines
3.3 KiB
JavaScript
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;
|
|
}
|