59 lines
1.2 KiB
JavaScript
59 lines
1.2 KiB
JavaScript
let fr = 10;
|
|
let redCircleX = -99;
|
|
let redCircleY = -99;
|
|
let redCircleRadius = 5;
|
|
let redCircleDiameter = redCircleRadius;
|
|
|
|
function setup() {
|
|
createCanvas(400, 400);
|
|
background(220);
|
|
|
|
frameRate(fr);
|
|
}
|
|
|
|
function draw() {
|
|
background(220);
|
|
const white = color(255, 255, 255);
|
|
const black = color(0, 0, 0);
|
|
const red = color(255, 0, 0);
|
|
|
|
// NOTE: resume to 500
|
|
for (var i = 0; i < 500; i++) {
|
|
var circleX = random(400);
|
|
var circleY = random(400);
|
|
|
|
redCircleRadius = redCircleDiameter / 2;
|
|
var radius_square = Math.pow(redCircleRadius, 2);
|
|
var x_dist_square = Math.pow(circleX - redCircleX, 2);
|
|
var y_dist_square = Math.pow(circleY - redCircleY, 2);
|
|
|
|
if (x_dist_square + y_dist_square <= radius_square) {
|
|
stroke(red);
|
|
fill(white);
|
|
circle(circleX, circleY, 5);
|
|
} else {
|
|
stroke(black);
|
|
fill(white);
|
|
circle(circleX, circleY, 5);
|
|
}
|
|
}
|
|
|
|
if (redCircleDiameter < 200) {
|
|
stroke(red);
|
|
noFill();
|
|
circle(redCircleX, redCircleY, redCircleDiameter);
|
|
redCircleDiameter += 10;
|
|
} else {
|
|
// red circle enlarge done
|
|
redCircleX = -99;
|
|
redCircley = -99;
|
|
}
|
|
}
|
|
|
|
function mousePressed() {
|
|
redCircleX = mouseX;
|
|
redCircleY = mouseY;
|
|
|
|
redCircleDiameter = 5;
|
|
}
|