Ausgabe eines Arrays von Textwerten in Form eines Kreises in p5.js

Question

Ahoi! Ich bin neu in p5.js programmieren und arbeiten. Mein Problem ist folgendes: Ich möchte eine digitale Uhr erstellen und die Zahlen auf der Uhr ausgeben, indem ich einige for-Schleifen und ein Array für die Uhrwerte verwende (Text 1-12). Ich habe herausgefunden, wie man ein tickendes Bild einer Uhr macht ... aber ich kann den Rest nicht herausfinden. Wenn ich den untenstehenden Code ausführe, wirft er keine Fehler, aber der Text/die Zahlen auf der Uhr werden nicht ausgeführt. Ich habe versucht, die erste for-Schleife unterhalb der Setup-Funktion zu setzen, und nichts ändert sich. Was mache ich falsch? Ich fühle mich, als ob ich verwirrt bin über die zweite for-Schleife und wie man die Zahlen tatsächlich auf den Bildschirm schreibt, etwa in Bezug auf: (text ([i])). Bitte lassen Sie mich wissen, wenn ich mehr klären muss - jede Hilfe wird geschätzt! Versuche so viel wie möglich zu lernen.

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

Dies ist wirklich eine Frage über polar coordinates. Ihre x und y Koordinaten im kommentierten Abschnitt sind deaktiviert. Das ist die Idee:

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: Voll funktions Code unter

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