Вывод массива текстовых значений в виде круга в p5.js

Question

Ahoy! Я новичок в программировании и работе в p5.js. Моя загадка такова: я хотел бы создать цифровые часы и выводить числа на часах, используя некоторые для циклов и массив для значений часов (текст 1-12). Я выяснил, как сделать тикающее изображение часов ... но не может понять, что остальное. Когда я запускаю приведенный ниже код, он не выдает никаких ошибок, но текст/цифры на часах не выполняются. Я попытался поставить первый цикл цикла ниже в настройке, и ничего не меняется. Что я делаю не так? Мне кажется, что я запутался во втором цикле и как на самом деле печатать цифры на экране, например: (текст ([i])). Пожалуйста, дайте мне знать, если мне нужно уточнить больше - любая помощь приветствуется! Попытка учиться как можно больше.

//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

Это действительно вопрос о polar coordinates. Координаты вашего x и y в комментариях отключены. Это идея:

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: Полный рабочий код ниже

<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>