Bir daire şeklinde bir metin değerleri dizisi p5.js içinde çıktı alma

Question

Ahoy! P5.js.'de programlama ve çalışma konusunda yeniyim Benim bilmecem şudur: Dijital bir saat oluşturmak ve saatlerin bazılarını döngüler ve saat değerleri için bir diziyi kullanarak saatte çıkarmak istiyorum (metin 1-12). Bir saatin tıkırtı görüntüsünü nasıl yapacağımı anladım ... ama gerisini anlayamıyorum. Aşağıdaki kodu çalıştırdığımda, herhangi bir hata atmaz, ancak saatteki metin/sayılar çalışmaz. İlk döngü için kurulum işlevinin altına koymaya çalıştım ve hiçbir şey değişmiyor. Neyi yanlış yapıyorum? Döngü için ikinci olarak kafamın karıştığını ve sayıların ekrana nasıl yazdırılacağını düşünüyorum, örneğin: (metin ([i])). Daha fazla açıklığa kavuşturmaya ihtiyacım varsa lütfen bana bildirin - herhangi bir yardım takdir edilir! Elimden geldiğince öğrenmeye çalışıyorum.

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

Bu gerçekten polar coordinates ile ilgili bir soru. Yorumlanan bölümdeki x ve y koordinatlarınız kapalıdır.

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)); 
} 

Düzenleme: Bu fikir

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