https://editor.p5js.org/SuperiorCrane1/sketches/jZSegBQrv
var u = 20;
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw() {
background(220);
grid();
displayMousePosition();
noStroke();
c = color(0);
fill(c);
ellipse(width / 2, height / 2, 400);
c = color(255, 255, 255);
fill(c);
arc(width / 2, height / 2, 400, 400, -90, 90);
c = color(0);
fill(c);
ellipse(width / 2, height / 4, 200, 200);
c = color(255, 255, 255);
fill(c);
ellipse(200, 300, 200);
c = color(255, 255, 255);
fill(c);
ellipse(width / 2, height / 4, 50);
c = color(0);
fill(c);
ellipse(200, 300, 50, 50);
}
function grid() {
background(200);
stroke(220);
strokeWeight(1);
for (let x = 0; x <= width; x += u) {
for (let y = 0; y <= height; y += u) {
line(x, 0, x, height);
line(0, y, width, y);
}
}
stroke("black"); // reset stroke
}
function displayMousePosition() {
textFont("menlo");
textSize(14);
text("x:" + mouseX, 10, 20);
text("y:" + mouseY, 10, 40);
}