processingであの花EDっぽいものを作る part2

2013.10.22 実験室 0
processingであの花EDっぽいものを作る part2

 

複数の画像を表示する

さて、今までは1つの画像で処理を行っていましたが、今度は複数の画像を表示させてみます。

これが出来れば基本的な部分は完成ですね。

Flowerというクラスを作成して、画像の表示や移動、回転などの処理はすべてこのクラスにまとめてみました。

setup()内でFlowerクラスのインスタンスを作成しておいて、draw()内でFlowerクラスに作成したshow()を呼び出すことで画像を表示させています。

 

画像に色をつける

次は花に色をつけます。

Pimage型の画像に色をつけるにはtint()を使用します。

あの花のエンディングでは花の色と動きが途中で切り替わるので、花が落ちている時の色を管理するflColorDownと花が上っている時の色を管理するflColorUpを新しく定義しました。それぞれの色はshow()を呼び出す時に指定します。

また、切り替えを管理するためのint型変数upDownも新しく定義し、マウスをクリックすることで1回だけ切り替えできるようにしました。

本来は花の動きも切り替えなければいけないのですが、一気にやると煩雑になるので今回はとりあえず色の切り替えだけ行っています。

 

 

移動方向の切り替えと画面外に出た時の処理をする

 引き続きマウスをクリックすると花が上っていくように変更を加えていきます。

花の移動はx,yの値を増やしていくことで行っていたので、マウスクリック後はx,yの値を減らすようにすれば花が上っていくように見せることが出来ます。

また、今の状態では花が画面外に出てもそのまま進んでいってしまいますので、画面外に出たら画面内に戻って来るように変更します。

これはx,yの値から花が画面外に出ていると考えられる時は、x,yの値を書き換えることで実現させています。

ついでに花に色が付いたので背景色は白に変更しました。

 

 

かなり完成に近づいてきましたね。

ここまではx,yの2次元で作成していましたが、次回はz軸方向に空間を広げて、奥行きを出していきたいと思います。

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です