Proccesingにおける波の描き方

「The Nature of Code」から波について取り上げます。静止している波と運動している波の描き方を見ていきます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。

波の描き方
波を描く:静止
波を描く:運動
運動している波の比較
まとめ
参考書籍

波の描き方

角度、角速度、振幅を使って波を描きます。波を描くには、以下の計算をします。

角度の振幅と正弦に従ってy座標を計算する
(x, y)の位置に点を描く
角速度に応じて角度を増やす

波を描く:静止

以下は、静止している波の参考例です。ここでは、点を繋げて波を描きます。

//Static wave drawn as a continuous line
float angle = 0;
float angleVel = 0.2;

size(400,200);
background(255);

stroke(0);
strokeWeight(2);
noFill();

beginShape();
for (int x = 0; x <= width; x += 5) {
  float y = map(sin(angle),-1,1,0,height);
  vertex(x,y);
  angle +=angleVel;
}
endShape();

波を描く:運動

以下は、運動している波の参考例です。ここでは、波を円で表現して描きます。

//The Wave
float startAngle = 0;
float angleVel = 0.05;

void setup(){
  size(400,200);
}

void draw(){
  background(255);

  startAngle += 0.015;
  float angle = startAngle;

  for (int x = 0; x <= width; x += 24) {
    float y = map(sin(angle),-1,1,0,height);
    stroke(0);
    fill(0, 50);
    strokeWeight(2);
    ellipse(x,y, 48, 48);
    angle +=angleVel;
  }
}