Arcs

index.html

<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/gh/georgesb/lib/drawGrid.js"></script>
<script src="script.js"></script>

script.js

let w = 150;
let h = 150;
	
function setup() {
	createCanvas(650, 450);
	drawGrid();
	noStroke();
}
	
/* arc function arc(x,y,width,height,start,stop) */
function draw() {
	let up = radians(270);
	let down = radians(90);
	let left = radians(180);
	let right = radians(0);
	
	fill('black');
	arc(200, 100, w, h, left, right);
	fill(220);
	arc(200, 100, w, h, right, left);
	fill('black');	
	arc(200, 300, w, h, up, down);	
	fill(220);
	arc(200, 300, w, h, down, up);
	
	fill('black');
	arc(400, 100, w, h, left, up);	
	fill(220);
	arc(400, 100, w, h, right, down);
	fill('black');	
	arc(400, 300, w, h, down, left);	
	fill(220);
	arc(400, 300, w, h, up, right);	
}

thumbnail.png