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

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

 

processingの入門書として定番であろう「Processingをはじめよう (Make: PROJECTS) 」を一通り終えて、さて何を作ろうかと参考になるサイトを探していたところ、こんな映像を見つけました。

 

やってみようprocessing!!番外編 エセあの花EDに挑戦

http://miterew.com/movie/play/sm14559698
 
 

あの花というのは「あの日見た花の名前を僕達はまだ知らない」というアニメのことです。このアニメは見たことがなかったのですが、映画が公開されることもあって、タイムリーなことにニコニコ動画でアニメ一挙放送をしていました。これも縁かなと思って見てみたら、すごく面白い。どうせ作るなら思い入れのあるもののほうが良いし、まずはこれを再現するところから始めることにしました。

 

で、最終的に出来たものがこちら↓

 

ここからは作り方を説明していきますので、こんなの作りたい!と思った方は参考にしてください。

なお、完全に独学で勉強してますので、もし間違っているところがありましたら優しくご指摘くださいね。

 

 

画像を表示する

まずは画像の表示から。

flower.pngという画像を画面の真ん中に表示します。画像が白いため背景色はとりあえず灰色にしています。

 

 

画像を回転させる

次は画像の回転です。

processingには画像を回転させるためのrotate()という関数があるので、これを使えば簡単にできるかと思ったのですが、単純にrotate()を使うだけでは上手くいきませんでした。

回転の角度を保持する変数”roll”を定義して、少しずつrollの値を増やすことで画像を回転させることが出来ると考えたのですが、結果は上記のとおりでした。

このことから、rotate()は「画面左上を起点に画面全体を回転させている」イメージと考えられます。 よって画像をその場で回転させるためには、「起点を画像の中心に移動」させた後にrotate()すれば良さそうです。

processingには座標を移動するためのtranslate()という関数があるので、これを使って書き直してみたのが以下のコードです。

これで画像を回転させることができました。

 

画像を移動させる

次は画像を回転しながら移動させます。

画像の表示位置はtranslate()で指定した位置となっているので、translate()で指定する座標を変数にして、値を変えていけば画像を移動させることができます。

このコードでは横方向への移動はさせていませんが、xの値を変更することで横方向にも移動させることができます。

さて、今日のところはここまでにして、次回は複数の画像を同時に動かすところから始めたいと思います。

 


コメントを残す

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