Processingを使って口を開閉するパックマンを描画する方法

2023/5/27 2023/5/27 書き溜め

前回の記事ではProcessingで静止したパックマンを描画する方法を解説しました。

ProcessingのArcを使ってパックマンを描画する方法

今回は、arc()関数の基本的な使い方と、実際にパックマンを描画する方法を書き溜めしときます。 arc()とは arc()は、2D空間上に円弧を描画するための関数です。次の構文で利用できます。 ar...

omohikane.com

2023-05-26 18:01

今回は一歩進めて、パックマンの口を開閉するアニメーションを作る方法を書き溜め。

アニメーションの基本

アニメーションとは、連続的に描画を更新することで動きを表現します。

Processingではdraw()関数内で定義した描画が、フレームレートに従って連続的に更新されます。

このフレーム更新を利用することで、アニメーションを実現します。

パックマンの口を開閉する方法

パックマンの口を開閉するには、arc()関数の始点と終点の角度を動的に変更します。

ここでは、sin()関数を使用して時間に対する口の開閉を表現します。

sin()関数は-1から1までの値を出力し、その出力が連続的に変化するため、

時間経過と共に値が上下するアニメーションに最適です。

開閉の大きさを変更する

開閉の大きさを変更するには、map()関数の最後の二つの引数を調整します。

これらの引数は、変換後の範囲を定義します。

例えば、map関数をmap(abs(sin(frameCount * 0.05)), 0, 1, 0, PI / 2)とすると、開閉の角度が0から90度の範囲で変化します。

口を開閉するパックマンのコード例

次に示すコードは、時間経過とともに口を開閉するパックマンを描画します。

void setup() {
  size(500, 500);
  noStroke();
  fill(255, 255, 0); // 黄色を指定
}

void draw() {
  background(0);
  float openAngle = map(abs(sin(frameCount * 0.05)), 0, 1, 0, PI / 3); // 口を開閉する角度を計算
  arc(width / 2, height / 2, 200, 200, openAngle, TWO_PI - openAngle, PIE);
}

void setup() {

size(500, 500);

noStroke();

fill(255, 255, 0); // 黄色を指定

}

void draw() {

background(0);

float openAngle = map(abs(sin(frameCount * 0.05)), 0, 1, 0, PI / 3); // 口を開閉する角度を計算

arc(width / 2, height / 2, 200, 200, openAngle, TWO_PI - openAngle, PIE);

}

簡単。実行結果はこんな感じ

口の開閉処理についてちょっと細かく

frameCountはProcessingが提供する組み込み変数で、プログラムの開始からのフレーム数を返します。

これをsin()関数に入力することで、時間経過に対するsin波を生成します。

生成されたsin波の絶対値を取ることで0から1の値を得られ、map()関数を用いてこれを所望の口の開き具合の角度（ここでは0から60度）に変換しています。

じゃあねー、

次はパックマンを移動させたい。