p5.jsの円の形のテキスト値の配列を出力する

Question

Ahoy！私はプログラミングとp5.jsで作業するのが初めてです。私の勘違いはこれです：私はデジタル時計を作成し、いくつかのforループとクロック値（テキスト1-12）の配列を使用して、クロックに数値を出力したいと思います。私はクロックの刻々としたイメージを作る方法を考え出した...しかし、残りの部分を把握することはできません。以下のコードを実行すると、エラーは発生しませんが、時計のテキスト/数字は実行されません。私はsetup関数内で最初のforループを下に置いてみましたが、何も変わりません。私は間違って何をしていますか？私は2番目のforループの周りで混乱しているようで、実際にスクリーンに数値を印刷する方法について、（text（[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)); 
} 

編集：これはアイデアです

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