1

ここで 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);
}
4

1 に答える 1

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 の数字を描いています!

次に、（注：piだけを使用しないのはなぜですか？）ifかどうかをチェックするステートメントがあります。x < TWO_PI/2その if ステートメントが true と評価された場合、24 時間描画"HOWL"します。しかし、待ってください、あなたはすでに1-12!を描いています。

1-12 または のみを描画するようにコードを変更する必要があります"HOWL"。

これを行うには、次の 2 つの方法があります。

オプション 1:最初の for ループをelse{}コードのセクションに移動します。そうすれば1-12、「HUMAN!」を描くときだけを描くことができます。ラベル。

オプション 2:単一の for ループのみを使用しますが、if ステートメントをその for ループ内に移動します。ここにスケルトンがあります：

for (var i=1; i<=12; i++) {
   if (x < TWO_PI/2) { 
      //draw HOWL
   }
   else{
      //draw the number
   }
}
于 2016-03-21T18:40:07.763 に答える