如何用 p5.js 中的不同值替换 For 循环的文本输出

Question

这里是 p5.js 编码和工作的新手...斗争是真实的。我创建了一个数字时钟，并使用一个数组和 for 循环来输出时钟外围 (1-12) 周围的时间值。我也让时钟滴答作响。我还设置了它，以便当代码通过某个值时，代码旁边的文本从 "human!" 更改为 "wear wolf!"（奇怪的项目，我知道。）。每次自动收报机超过预设值时，我还设置了代码以将时钟上的时间值从 1-12 更改为 "HOWL"。但是，我仍然可以看到单词 "HOWL" 后面的 1-12 时间值数字，但不知道如何删除它们。

我该怎么做？感谢您的任何建议！代码如下：

//var line = line(0,0,x,y);
var radius = 110.0;
var angle = 0.0;
var x=0, y=0;

function setup() {
  createCanvas(windowWidth,windowHeight);
}

function draw() {

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


  var angleOffset = -1*PI/2; //create variable//
  for (var i=1; i<=12; i++) { //generate 12 numbers//
   angle = 2*PI*i/12 + angleOffset; //what is this? another variable? //
   text(i, radius*cos(angle), radius*sin(angle));
  }
  //text outputs the i generated in for loop, then x and y coordinates times the angle set//
  if (x < TWO_PI/2) { 

  //fill(10,10,124);
  fill(10,105,55);
  text("WEARWOLF", x+10, y+15);

  var angleOffset = -1*PI/2; //create variable//
  for (var i=1; i<=12; i++) { //generate 12 numbers//
   angle = 2*PI*i/12 + angleOffset; //what is this? another variable? //
   text("HOWL", radius*cos(angle), radius*sin(angle))
   noFill();
   text(i, radius*cos(angle), radius*sin(angle))

  }
   } else {
  noFill();
  text("HUMAN!", x+10, y+5);
  //ellipse(0,0,250,250)


 }



  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

使用适当的缩进使您的代码在做什么更明显：

var radius = 110.0;
var angle = 0.0;
var x=0, y=0;

function setup() {
    createCanvas(windowWidth,windowHeight);
}

function draw() {

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


    var angleOffset = -1*PI/2; //create variable//

    for (var i=1; i<=12; i++) { //generate 12 numbers//
        angle = 2*PI*i/12 + angleOffset; //what is this? another variable? //
        text(i, radius*cos(angle), radius*sin(angle));
    }

    //text outputs the i generated in for loop, then x and y coordinates times the angle set//
    if (x < TWO_PI/2) { 
        fill(10,105,55);
        text("WEARWOLF", x+10, y+15);

        var angleOffset = -1*PI/2; //create variable//
        for (var i=1; i<=12; i++) { //generate 12 numbers//
            angle = 2*PI*i/12 + angleOffset; //what is this? another variable? //
            text("HOWL", radius*cos(angle), radius*sin(angle))
            noFill();
            text(i, radius*cos(angle), radius*sin(angle))

        }
    } else {
        noFill();
        text("HUMAN!", x+10, y+5);
        //ellipse(0,0,250,250)
    }

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script>

现在检查 draw() 函数中的代码。请注意第一个 for 循环：您总是绘制数字 1-12！

然后你有一个 if 语句来检查是否 x < TWO_PI/2 （注意：为什么不直接使用 pi？）。当该 if 语句的计算结果为真时，您就会全天候绘制 "HOWL"。但是等等，你已经画了 1-12!

您将不得不修改您的代码，以便您只绘制 1-12 或 "HOWL".

有两种方法可以做到这一点：

选项 1： 将第一个 for 循环移动到代码的 else{} 部分。这样，当您绘制 `"HUMAN!" 标签时，您只会绘制 1-12。

选项 2： 仅使用单个 for 循环，但将 if 语句移到该 for 循环中。这是骨架：

for (var i=1; i<=12; i++) {
   if (x < TWO_PI/2) { 
      //draw HOWL
   }
   else{
      //draw the number
   }
}

如何用 p5.js 中的不同值替换 For 循环的文本输出

How to Replace Text Output from For Loop with Different Values in p5.js

javascript

processing

for-loop

if-statement

p5.js