How to add labels onto segments of a circle in p5.js? - p5.js

Question

I’m working on a project with p5.js where I draw a circle, draw arcs (straight red lines) to separate the circle then another arc between each of the red lines (blue lines). The idea looks like the included image below:
What I'm confused about is how to position the labels in the circle drawing so that they're positioned in each segment inside the circle but outside the blue arcs. My question is how do I add text labels to this figure so that it looks like the image below?
Here is the shortened code to produce the first image (circle without the labels) so far:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(255);
let startX = 50;
let startY = 50;
let data = [1, 2, 3, 4];
let width = 80;
let angle = -Math.PI / 2;
let radianPer = Math.PI * 2 / Object.keys(data).length;
noStroke();
fill(255);
ellipse(startX, startY, width, width);
Object.keys(data).forEach(i => {
fill(255);
stroke(255, 0, 0);
arc(startX, startY, width, width, angle, angle + radianPer, PIE);
fill(255);
stroke(0, 0, 255);
arc(startX, startY, width / 2, width / 2, angle, angle + radianPer, PIE);
angle += radianPer;
// add label here
});
}
Edit (02/05/22): updated code to match the screenshot image example.

Answer 1

Displaying a label in the middle of a segment of an arc involves using the angle for the middle of that arc with the sine and cosine functions to find the X and Y coordinates. For more information see the trigonometric functions article on wikipedia.
function setup() {
createCanvas(400, 400);
// Text settings
textAlign(CENTER, CENTER);
}
function draw() {
background(255);
let startX = 50;
let startY = 50;
let data = [1, 2, 3, 4];
let width = 80;
let angle = -Math.PI / 2;
let radianPer = (Math.PI * 2) / Object.keys(data).length;
noStroke();
fill(255);
ellipse(startX, startY, width, width);
Object.keys(data).forEach((i) => {
fill(255);
stroke(255, 0, 0);
arc(startX, startY, width, width, angle, angle + radianPer, PIE);
fill(255);
stroke(0, 0, 255);
arc(startX, startY, width / 2, width / 2, angle, angle + radianPer, PIE);
// add label here
let textAngle = angle + radianPer / 2;
// Use sine and cosine to determine the position for the text
// Since sine is opposite / hypotenuse, taking the sine of the angle and
// multiplying by distance gives us the vertical offset (i.e. the Y
// coordinate).
// Likewise with cosine for the X coordinate
noStroke();
fill(0);
text(
data[i].toString(),
startX + cos(textAngle) * width / 2 * 0.75,
startY + sin(textAngle) * width / 2 * 0.75
);
// Don't update angle until after calculating the angle for the label
angle += radianPer;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>