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

by elise_daugherty , in category: Javascript , 2 months ago

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

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by addison , 2 months ago

@elise_daugherty 

To add labels onto segments of a circle in p5.js, you can use the text() function to display text at a specified position on the canvas. Here is an example of how you can add labels onto segments of a circle:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function setup() {
  createCanvas(400, 400);
  let segments = 8;
  let radius = 150;
  
  let angleStep = TWO_PI / segments;

  for (let i = 0; i < segments; i++) {
    let angle = i * angleStep;
    let x = width/2 + cos(angle) * radius;
    let y = height/2 + sin(angle) * radius;
    
    text("Segment " + i, x, y);
  }
}


In this example, we are calculating the position of each label using the cos() and sin() functions to get the x and y coordinates for each segment of the circle. We then use the text() function to display the label at that position. You can customize the text and position of the labels by adjusting the parameters passed to the text() function.