1

私はp5.jsで作業しており、リサージュ曲線を作成し、ウサギを描いています(イースターの精神で、私は思います)。うさぎの頭を、流れ星の星の部分のように、リスーカーブに合わせて跳ねさせたいと思います。ただし、現在、すべての「ポイント」でウサギを出力しているため、百万のウサギの頭が画面を埋め尽くしています。曲線に沿ってウサギの頭のぼやけたストリームを出力するのではなく、曲線に沿って画面に沿って跳ねるようにするにはどうすればよいですか?

これは、ウサギがリサジュー曲線と同じループにいる可能性があるという事実と関係があると感じています. ウサギ用に別の関数とリサージュ曲線を作成しようとしましたが、いくつかの変数をいじってみましたが、私はこれに非常に慣れていないので、まだロジックの助けが必要です. 助けてくれてありがとう！そして、答えを少し説明していただければ、次回は自分でできるようにできる限り多くのことを学ぼうとしているので、本当に、本当に感謝しています. ありがとうございました！

//Create a sketch that animates multiple shapes along Lissajous curves. Try animating color and size properties of the shapes using sin() and cos() as well.
var waveLengthOne = 25.0;
var waveLengthTwo = 200.0;
var pointCount = 0;
var angle = 2.0;
var amplitude = 130;
var xpos = 1; //playing around with a variable for x and y positions
var ypos = 1;

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

function draw() {
 // rabbit();

  if (pointCount > 2000) {
   noLoop();
  }
  noFill(); 
  strokeWeight(1);
  stroke(100);
  translate(width / 3, height / 3);
  beginShape();
  for (var i = 0; i < pointCount; i++) {
    angle = i / waveLengthOne * TWO_PI;
    var y = sin(angle) * amplitude;

    angle = i / waveLengthTwo * TWO_PI;
    var x = sin(angle) * amplitude;
    vertex(x, y);
  }
  endShape();
  pointCount++;

  // rabbit

    translate(x, y);
    noStroke()
    fill(255, 192, 203);
    ellipse(0, -60, 35, 40); // head
    fill(0);
    ellipse(-10, -65, 5, 5); //left eye
    ellipse(10, -65, 5, 5); //right eye
    ellipse(0, -55, 6, 5); //nose
    noFill()
    stroke(0);
    ellipse(0,-47, 5, 2); //mouth
    noStroke();
    fill(255, 193, 203); //ear color
    ellipse(-15, -90, 15, 40) //left ear
    ellipse(15, -90, 15, 40) // right ear
    stroke(0);
    line(-25, -60, 0, -55) // top left whisker
    line(-25, -50, 0, -55) // bottom left whisker
    line(25, -60, 0, -55) // top right whisker
    line(25,-50, 0, -55) // bottom right whisker


}
4

1 に答える 1

0

古いフレームをクリアするには、background()関数から関数を呼び出す必要があります。draw()そうしないと、すでにあるものの上に描画しているだけです。

関数の呼び出しbackground()は、通常、draw()ほとんどの処理スケッチの関数の最初の行です。

function draw() {
   background(233);
   //rest of your code
于 2016-03-27T14:39:36.473 に答える