47 lines
1.1 KiB
JavaScript
47 lines
1.1 KiB
JavaScript
function setup() {
|
|
createCanvas(400, 400);
|
|
}
|
|
|
|
function draw() {
|
|
const black = color(0, 0, 0);
|
|
const white = color(255, 255, 255);
|
|
const red = color(255, 0, 0);
|
|
|
|
let millisecond = millis();
|
|
let num_of_square = 10 - Math.floor((millisecond / 500) % 10);
|
|
background(220);
|
|
|
|
var j = 0;
|
|
for (var i = 10; i > 0; i--) {
|
|
console.log(j);
|
|
var top_left_x = 0 + 20 * j;
|
|
var top_left_y = 0 + 20 * j;
|
|
var square_length = 400 - 40 * j;
|
|
var bottom_right_x = 0 + 20 * j + 400 - 40 * j;
|
|
var bottom_right_y = 0 + 20 * j + 400 - 40 * j;
|
|
|
|
if (j + 1 >= num_of_square) {
|
|
if (
|
|
(mouseX > top_left_x) &
|
|
(mouseY > top_left_y) &
|
|
(mouseX < bottom_right_x) &
|
|
(mouseY < bottom_right_y) &
|
|
((mouseX - top_left_x < 20) |
|
|
(mouseY - top_left_y < 20) |
|
|
(bottom_right_x - mouseX < 20) |
|
|
(bottom_right_y - mouseY < 20))
|
|
) {
|
|
fill(red);
|
|
} else if (i % 2 == 0) {
|
|
fill(black);
|
|
} else {
|
|
fill(white);
|
|
}
|
|
|
|
// square(20 * j, 20 * j, 400 - 20 * 2 * j);
|
|
square(top_left_x, top_left_y, square_length);
|
|
}
|
|
j += 1;
|
|
}
|
|
}
|