Outputting an array of text values in the shape of a circle in p5.js

Question

Ahoy! I am new to programming and working in p5.js. My conundrum is this: I'd like to create a digital clock, and output the numbers on the clock by using some for loops and an array for the clock values (text 1-12). I've figured out how to make a ticking image of a clock...but can't figure the rest out. When I run the below code, it doesn't throw any errors but the text/numbers on the clock aren't executing. I've tried putting the first for loop below within the setup function, and nothing changes. What am I doing wrong? I feel like I'm confused around the second for loop and how to actually print the numbers to the screen, like regarding: (text([i])). Please let me know if I need to clarify more - any help is appreciated! Trying to learn as much as I can.

 //Simple second clock.
 // An exercise in translating from polar to cartesian coordinates

    var radius = 120.0;
    var angle = 0.0;
    var x=0, y=0;
    var digits = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

    function setup() {
      createCanvas(windowWidth,windowHeight);
    }

    function draw() {
    for (var i = 0; i < 12; i++) { //loop for digits. Populate array.
    digits[i] = text("[i]", 10, -radius+10);
    for (var i = 0; i < digits.length; i++) {
    fill(255,0,255)
    text([i]);
    }
    }   
      background(255);
      translate(width/2, height/2);
      stroke(205,205,55);
      fill(255,0,255);
      ellipse(0,0,10,10);
      noFill();
      ellipse(0,0,250,250);
      stroke(25);
      fill(205,205,55);
      //text("12", 0, -radius+PI+10); //if I were to manually do each number 
     // text("1", 30, -radius+PI+20);
     // text("2", 60, -radius+PI+30);
     // text("3", 90, -radius+PI+40);

      angle = (second() / 59.0) * TWO_PI;

      // memorize this formula, it's helpful
      x = cos(angle)* radius;
      y = sin(angle)* radius;

      stroke(255,0,255);

      //draw a line from the center of our screen and as long as our radius

      line(0,0,x,y);
      ellipse(x,y,10,10);
    }

Answer 1

This is really a question about polar coordinates. Your x and y coordinates in the commented section are off. This is the idea:

var angleOffset = -1*PI/2;
for (var i=1; i<=12; i++) {
  angle = 2*PI*i/12 + angleOffset;
  text(i, radius*cos(angle), radius*sin(angle));
}

Edit: Full working code below

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script>
<script>

var radius = 120.0;
var angle = 0.0;
var x=0, y=0;
var digits = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

function setup() {
  createCanvas(windowWidth,windowHeight);
}

function draw() {
for (var i = 0; i < 12; i++) { //loop for digits. Populate array.
digits[i] = text("[i]", 10, -radius+10);
for (var i = 0; i < digits.length; i++) {
fill(255,0,255)
text([i]);
}
}   
  background(255);
  translate(width/2, height/2);
  stroke(205,205,55);
  fill(255,0,255);
  ellipse(0,0,10,10);
  noFill();
  ellipse(0,0,250,250);
  stroke(25);
  fill(205,205,55);

  var angleOffset = -1*PI/2;
  for (var i=1; i<=12; i++) {
    angle = 2*PI*i/12 + angleOffset;
    text(i, radius*cos(angle), radius*sin(angle));
  }


  angle = (second() / 59.0) * TWO_PI;

  // memorize this formula, it's helpful
  x = cos(angle)* radius;
  y = sin(angle)* radius;

  stroke(255,0,255);

  //draw a line from the center of our screen and as long as our radius

  line(0,0,x,y);
  ellipse(x,y,10,10);
}

setup();
draw();

</script>