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

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

本文关键字：输出 文本 替换 循环 p5 js For 中将      更新时间：2023-09-26

编码和在p5中工作的新手.js在这里...斗争是真实的。我创建了一个数字时钟，并使用数组和 for 循环来输出其外围时钟的时间值 （1-12）。我也让时钟滴答作响。我还设置了它，当股票代码传递某个值时，股票代码旁边的文本从"人类！"变为"穿狼！（奇怪的项目，我知道。每次股票代码传递预设值时，我还设置了代码以将时钟上的时间值从 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);
}

使用适当的缩进来更清楚地显示代码正在执行的操作：

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 语句的计算结果为 true 时，您可以全天候绘制"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
   }
}
相关文章：