2021-01-30-arcs.md

layout	title	thumbnail	tagline	sort-key	meta-title	meta-description	meta-image	tags	includeP5jsWidget	previousPost	redirect_from	discourseEmbedUrl
post	Arcs	/tutorials/p5js/calling-functions/images/arcs-1.png	Draw a circular pattern using the arc function.	140	p5.js Example - Arcs	Draw a circular pattern using the arc function.	/tutorials/p5js/calling-functions/images/arcs-1.png	example p5.js javascript calling-functions	true	/tutorials/p5js/calling-functions	/examples/p5js/calling-functions/arcs	/examples/p5js/calling-functions/arcs

{% include youtube-embed.html slug="anmHpUacwiY" %}

---

{% include p5js-widget.html width=400 height=400 %} function setup() { createCanvas(400, 400);

strokeWeight(32); strokeCap(SQUARE); noFill();

noLoop(); }

function draw() { background(32);

stroke(random(255), random(255), random(255)); arc(200, 200, 64, 64, 0, PI); stroke(random(255), random(255), random(255)); arc(200, 200, 64, 64, PI, 0);

stroke(random(255), random(255), random(255)); arc(200, 200, 160, 160, PI / 6, PI * 5 / 6); stroke(random(255), random(255), random(255)); arc(200, 200, 160, 160, PI * 5 / 6, PI * 3 / 2); stroke(random(255), random(255), random(255)); arc(200, 200, 160, 160, PI * 3 / 2, PI / 6);

stroke(random(255), random(255), random(255)); arc(200, 200, 256, 256, 0, PI / 2); stroke(random(255), random(255), random(255)); arc(200, 200, 256, 256, PI / 2, PI); stroke(random(255), random(255), random(255)); arc(200, 200, 256, 256, PI, PI * 3 / 2); stroke(random(255), random(255), random(255)); arc(200, 200, 256, 256, PI * 3 / 2, 0);

stroke(random(255), random(255), random(255)); arc(200, 200, 352, 352, PI * 3 / 10, PI * 7 / 10); stroke(random(255), random(255), random(255)); arc(200, 200, 352, 352, PI * 7 / 10, PI * 11 / 10); stroke(random(255), random(255), random(255)); arc(200, 200, 352, 352, PI * 11 / 10, PI * 3 / 2); stroke(random(255), random(255), random(255)); arc(200, 200, 352, 352, PI * 3 / 2, PI * 19 / 10) stroke(random(255), random(255), random(255)); arc(200, 200, 352, 352, PI * 19 / 10, PI * 3 / 10) } </script>

Click here to edit this code in the p5.js editor.

This sketch calls the arc() function to draw a circular pattern. It also uses the random() function to pick a random color for each arc.

Remix Ideas

• Change how many arcs are drawn on each layer. Instead of starting with two half-circles, start with 3 arcs, then go to 2 arcs. Try out different patterns to see what looks cool to you.
• Give your arcs different sizes by changing the stroke weight.
• Make your arcs all shades of blue.