在 p5.js 中输出圆形文本值数组

Question

哎呀！我是编程新手，在 p5.js 工作。我的难题是：我想创建一个数字时钟，并通过使用一些 for 循环和时钟值数组（文本 1-12）输出时钟上的数字。我已经想出如何制作时钟的滴答作响的图像……但无法弄清楚其余部分。当我运行下面的代码时，它不会抛出任何错误，但时钟上的 text/numbers 没有执行。我试过将第一个 for 循环放在下面的设置函数中，但没有任何变化。我究竟做错了什么？我觉得我对第二个 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>

Answer 2

// ABC CLOCK
var radius = 120.0;
var angle = 0.0;
var x = 0,
  y = 0;
var digits = [];
var se = 0;
var nloops=0
var sentence="12 1 2 3 4 5 6 7 8 9 10 11"
//var sentence="A B C D E F G"
var nl = 0;
var letter1=''
var letter2=''

function setup() {
  createCanvas(windowWidth, windowHeight);
  digits = sentence.split(" ");
  letter1=digits[0]
  letter2=digits[0]
  nl = digits.length; //numberOfLetters
  textAlign(CENTER, CENTER);
  frameRate(1);
}

function draw() {
  background(9);
  textAlign(LEFT, CENTER);
  fill(255)
  text(letter1+'    '+letter2, 40,40)
  //text(nloops+'    '+se,40,60)
  translate(width / 2, height / 2);
  textAlign(CENTER, CENTER);
  cont = 0;
  mod = (2 * PI) / nl;
  ia = -HALF_PI; //init angle
  pr1= 0.9; //proportion radius letters
  pr2= 0.5; //proportion radius letters
  rl = radius * pr1; //radius letter
  for (var i = 0; i < nl; i++) {
    noFill();
    stroke(120);
    text(digits[i], rl * cos(cont + ia), rl * sin(cont + ia));
    cont += mod;
  }
  
  angle = (TWO_PI / nl) * se;
  angle2 = (TWO_PI / nl) * nloops;
  
  x = rl * cos(angle + ia);
  y = rl * sin(angle + ia);

  x1 = rl * cos(angle2 + ia);
  y1 = rl * sin(angle2 + ia);

  stroke(55);
  line(0, 0, x * pr1, y * pr1);
  
  stroke(255);
  line(0, 0, x1 * pr2, y1 * pr2);

  stroke(55);
  fill(0);
  ellipse(0, 0, 10, 10);
  noFill();
  ellipse(0, 0, 250, 250);

  se += 1;
  if(se%nl==0){
    nloops+=1
    if (nloops%nl==0){
      nloops=0
    }
    se=0
  }
  letter1=digits[nloops]
  letter2=digits[se]
  
}

A little more developed

在 p5.js 中输出圆形文本值数组

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

javascript

arrays

nested-loops

shapes

p5.js