アニメーション基礎 〜図形を動かしてみよう〜【 Processing 入門編 No.8 】
こんにちはみおです！
今回はアニメーションの基本という事で、図形を動かしていきたいと思います。
アニメーションに入ってから3回目の記事だと思うんですけど、実は図形の動かし方を紹介するのは初めてなんじゃないかなと思います！
まずProcessingって何？と思った方はこちらの記事を読んでみてください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
それでは早速やっていきましょう！
今日の作品
今日紹介するコードで出来る作品がこちら
静止画にするとこのような感じになります。
このコードは最後に紹介するので、ぜひ最後まで見てもらえたら嬉しいです！
今日使う新しい単語
まずは今日使っていく新しい単語について軽く紹介していきたいと思います。
詳しい説明はまた出てきたときにするので、こんな単語があるんだなぐらいで大丈夫です！
- || : AまたはB
- locationX : X座標の現在位置
- direction : 移動する向き
それではやっていきましょう！
1.前回までのコードを使って準備をしよう
まずは前回までのコードを使って準備をしていきたいと思います。
下記のコードを入力してみてください。
分からない方はそれぞれの記事を見てみてください。
- sizeが分からない方
【 Processing 入門編 No.2 】 〜意外と簡単⁉︎ 基本図形の描画の描画方法〜 - Processingの基礎と応用
- fill / stroke / background が分からない方
【 Processing 入門編 No.3 】 〜色の設定 カラフルな作品を作ろう〜 - Processingの基礎と応用
- void setup / void draw / frameRate が分からない方
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
ここまで入力が出来たらいよいよコードを書いていきましょう！
2.円を動かすアニメーションを作ろう
『locationX / direction 』を使って設定をしよう
まずは『 locationX 』と『 direction 』を使っていきます。
最初に軽く説明しましたが、locationX というのはX座標の現在位置（始まる位置）を設定する事が出来る変数です。
そして、direction はその位置からどちらに移動するのか選択する事が出来る変数です。
locationXで最初の位置を決めて、directionで移動する方向を決められるという事になります。
それではコードに書いてみましょう！
setup の上に行を空けて、そこに書いてみてください。
int locationX ;
int direction ;
まずはこのように宣言します。
そして、setup のかっこ（ { } ）の中に
locationX = 0 ;
direction = -1 ;
と入れてみてください！
ここまでは大丈夫ですか？
これで始まりの位置と移動する向きを設定する事が出来ました。
コードがこのようになっていたら完璧です！
円を描いていこう動かす設定をしよう
それではいよいよ円を描いていきます！
まずは円を描く時にはいつも通り『 ellipse 』を使います。
- ellipse が分からない方
【 Processing 入門編 No.2 】 〜意外と簡単⁉︎ 基本図形の描画の描画方法〜 - Processingの基礎と応用
ellipse は今までに何回も出てきたので、さら〜とやっていきます！
void draw () {
}
の中に
ellipse ( locationX, height/2, 100, 100) ;
を追加してください。
ここまでは大丈夫ですよね？
ここからが新しくなります。
ellipse の下に行を空け、
locationX = locationX + 10 * direction ;
と入力してください。
これは、最初に設定した位置から10移動した場所を、新たなX座標にするという意味になります。
難しいかもしれませんが、移動するごとにX座標がどんどん変わっていくよという意味です。
これをする事によって、止まらずにずっと動き続ける事が出来ます。
ここまでのコードは大丈夫でしたか？
このようになっていれば完璧です！
『 if 』を使って円をバウンドさせよう
最後に『 if 』を使って、壁に当たった円をバウンドさせるという設定をしていきたいと思います！
- if が分からないという方
【 Processing 入門編 No.5 】〜ランダムに図形を描く方法〜 - Processingの基礎と応用
draw の { } の中にこのコードを追加してみてください。
if ( locationX < 0 || locationX > width ) {
direction = direction * -1 ;
}
これの意味は、もしX座標が0より小さい、または画面の幅より大きければ、移動する向きを逆方向にするとなります。
新しく出てきた『 || 』は『 AまたはB 』という意味になります。
ちなみに『 && 』を使うと『 AかつB 』という意味になります。
ここまでが入力出来たら完成です！
全体のコードがこちら
出来ましたか？
では実際にプログラムを実行してみてください！
このようになったら成功です！
（補足）background を void draw に書いた理由
今まで background は void setup の方に入力してきました。
ではなぜ今回は void draw の方に書いたのでしょうか。
長々と説明するよりも実際にやってみた方が早いと思うので、実際にやってみましょう。
void draw() { } の中の background( 0 ) ; を消し、
void setup() { } の中に background ( 0 ) ; と入力してみてください。
そして、プログラムを実行させてみてください。
このようになります。
なぜこんな事になってしまうのでしょうか。
実は、setup は最初の1回しか設定しないのに対し、 draw は繰り返して何回も設定を上書きしていきます。
なので setup に書いてしまうと、最初にした背景の設定の上にどんどん図形が上書き保存されていくので、あんな風に残ってしまうのです。
それに対して、draw に書くと背景の設定も一緒に上書き保存されていくので、前の図形が残りません。
同じ背景でもどちらに書くのかによって全然作品が変わってくるので、皆さんもぜひ色々試してみてください。
今日の作品のコード紹介
最後に冒頭でも紹介した今日の作品のコードを紹介したいと思います。
コードはこちら
今日のまとめ
今回は図形を動かすアニメーションを作ってみました！
ちょっとした書く場所の違いや、数値の違いで全然違う雰囲気の作品が作れるので、皆さんもぜひ自分流にアレンジしてみてください。
という事で、今回はこの辺で終わりにしたいと思います。
最後まで見てくださりありがとうございました。
また次回も見てもらえたら嬉しいです。
合わせて読みたい
【 Processing 番外編 】〜今読みたい用途別オススメ参考書４選〜 - Processingの基礎と応用
【 Processing 応用編 No.1 】オリジナル作品を作る前に！〜押さえておきたい5つのポイント〜 - Processingの基礎と応用
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
