processingであの花EDっぽいものを作る part1
processingの入門書として定番であろう「Processingをはじめよう (Make: PROJECTS)
やってみようprocessing!!番外編 エセあの花EDに挑戦
http://miterew.com/movie/play/sm14559698あの花というのは「あの日見た花の名前を僕達はまだ知らない」というアニメのことです。このアニメは見たことがなかったのですが、映画が公開されることもあって、タイムリーなことにニコニコ動画でアニメ一挙放送をしていました。これも縁かなと思って見てみたら、すごく面白い。どうせ作るなら思い入れのあるもののほうが良いし、まずはこれを再現するところから始めることにしました。
で、最終的に出来たものがこちら↓
ここからは作り方を説明していきますので、こんなの作りたい！と思った方は参考にしてください。
なお、完全に独学で勉強してますので、もし間違っているところがありましたら優しくご指摘くださいね。
画像を表示する
まずは画像の表示から。
flower.pngという画像を画面の真ん中に表示します。画像が白いため背景色はとりあえず灰色にしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
【コード】 PImage flowerImg;//PImage型の変数flowerImgを定義 void setup(){ size(800,600); background(#333333);//背景色を灰色に imageMode(CENTER);//画像表示の起点を真ん中に設定 flowerImg = loadImage("flower.png");//flowerImgにflower.pngを格納 } void draw(){ image(flowerImg,width/2,height/2); //flower.pngを表示 } 【実行結果】 <a href="https://tama-lab.net/wp-content/uploads/2013/10/anohanaED1.png"><img class="alignnone size-large wp-image-76" alt="anohanaED1" src="https://tama-lab.net/wp-content/uploads/2013/10/anohanaED1-510x396.png" width="510" height="396" /></a> |
画像を回転させる
次は画像の回転です。
processingには画像を回転させるためのrotate()という関数があるので、これを使えば簡単にできるかと思ったのですが、単純にrotate()を使うだけでは上手くいきませんでした。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
【失敗コード】 PImage flowerImg;//PImage型の変数flowerImgを定義 float roll = 0;//回転の角度を保持する変数 void setup(){ size(800,600); imageMode(CENTER);//画像表示の起点を真ん中に設定 flowerImg = loadImage("flower.png");//flowerImgにflower.pngを格納 } void draw(){ background(#333333);//背景色を灰色に rotate(roll);//画像の回転 image(flowerImg,width/2,height/2); //flower.pngを表示 roll += 0.01;//回転の角度を増やす } 【実行結果】 <a href="https://tama-lab.net/wp-content/uploads/2013/10/missCode1.png"><img class="alignnone size-large wp-image-86" alt="missCode1" src="https://tama-lab.net/wp-content/uploads/2013/10/missCode1-510x391.png" width="510" height="391" /> </a> |
回転の角度を保持する変数”roll”を定義して、少しずつrollの値を増やすことで画像を回転させることが出来ると考えたのですが、結果は上記のとおりでした。
このことから、rotate()は「画面左上を起点に画面全体を回転させている」イメージと考えられます。 よって画像をその場で回転させるためには、「起点を画像の中心に移動」させた後にrotate()すれば良さそうです。
processingには座標を移動するためのtranslate()という関数があるので、これを使って書き直してみたのが以下のコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
【コード】 PImage flowerImg;//PImage型の変数flowerImgを定義 float roll = 0;//回転の角度を保持する変数 void setup(){ size(800,600); imageMode(CENTER);//画像表示の起点を真ん中に設定 flowerImg = loadImage("flower.png");//flowerImgにflower.pngを格納 } void draw(){ background(#333333);//背景色を灰色に translate(width/2, height/2);//画面の中心に起点を移動 rotate(roll);//画面の回転 image(flowerImg, 0, 0); //flower.pngを表示。traslateで画面の中心に座標が移動しているので表示位置は(0,0)に変更 roll += 0.01;//回転の角度を増やす } 【実行結果】 <a href="https://tama-lab.net/wp-content/uploads/2013/10/anohanaED2.png"><img class="alignnone size-large wp-image-91" alt="anohanaED2" src="https://tama-lab.net/wp-content/uploads/2013/10/anohanaED2-510x396.png" width="510" height="396" /></a> |
これで画像を回転させることができました。
画像を移動させる
次は画像を回転しながら移動させます。
画像の表示位置はtranslate()で指定した位置となっているので、translate()で指定する座標を変数にして、値を変えていけば画像を移動させることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
【コード】 PImage flowerImg;//PImage型の変数flowerImgを定義 float roll = 0;//回転の角度を保持する変数 float x = 400;//画像のx座標を保持する変数。画面の中心に設定 float y = 0;//画像のy座標を保持する変数 void setup(){ size(800,600); imageMode(CENTER);//画像表示の起点を真ん中に設定 flowerImg = loadImage("flower.png");//flowerImgにflower.pngを格納 } void draw(){ background(#333333);//背景色を灰色に translate(x, y);//x,yの位置に起点を移動 rotate(roll);//画面の回転 image(flowerImg, 0, 0); //x,yの座標を中心にflower.pngを表示。 roll += 0.01;//回転の角度を増やす y++;//y座標を下方向に増やす } 【実行結果】 <a href="https://tama-lab.net/wp-content/uploads/2013/10/anohanaED3.png"><img class="alignnone size-large wp-image-94" alt="anohanaED3" src="https://tama-lab.net/wp-content/uploads/2013/10/anohanaED3-510x396.png" width="510" height="396" /> </a> |
このコードでは横方向への移動はさせていませんが、xの値を変更することで横方向にも移動させることができます。
さて、今日のところはここまでにして、次回は複数の画像を同時に動かすところから始めたいと思います。