超簡単!! アニメーション作品を作る方法【 Processing 入門編 No.6 】
こんにちはみおはぴです！
今回はアニメーションという事で、動きのある作品を作っていこうと思います。
今までは止まった作品ばかりだったので、難しく感じるかもしれません。
ですが、今までのコードに少しだけ付け加えるだけで簡単に出来るので、ぜひやってみてください。
まずProcessingって何？という方は、ぜひこちらの記事を読んでみてください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
それでは早速やっていきましょう！
今日の作品
今日紹介するコードで出来る作品がこちら
この動画では長くなるので途中で止めてしまいましたが、最終的にはこのぐらいにまでなります。
【グーペ】デザインを4000パターン以上から選べるHP作成サービス 
今日使う新しい単語
今日使う新しい単語の一覧です。
詳しくはまた出てきた時に説明するので、軽く見流す程度で大丈夫です。
- void : setup や draw の前に付く
- setup : 起動時に実行させる関数
- draw : 起動後に繰り返し実行させる関数
- frameRate : 1秒間にどのくらい動かすか
1.前回のコードを入力して準備をしよう
今回のコードは前回のコードに少し付け足すだけで出来ます。
まずは前回のコード（下記）を入力してみましょう。
前回のコードについてはこちらをご覧ください。
【 Processing 入門編 No.5 】〜ランダムに図形を描く方法〜 - Processingの基礎と応用
前回のコードはこちらです。
今回使わないコードを消して準備を完了しよう
先ほど前回のコードを全て入力してもらいましたが、今回はその中でも、
『 int num = 100; 』というコードと
『for (int i = 0; i < num; i++) { } 』というコードは使わないので、そこだけ削除してください。
最終的にこのようなコードになれば準備は完了です
ここまでは大丈夫ですか？
いよいよやっていきましょう！
2. アニメーション作品を作っていこう
『 setup 』を使って初期設定をしよう
setupとは起動時に実行させる関数の事です。
簡単にいうと初期設定みたいな物で、1番最初に1度だけ実行します。
setupでは主に、
①画面サイズ(size)
②フレームレート(frameRate)
③背景色(background)
④色の設定(fillやstroke)
の設定をしていきます。
フレームレートとは、1秒間の動画で見せる静止画の枚数の事で、1秒間にどれだけ動かすのかという意味になります。
フレームレートを大きくすればするほど動きが速くなり、小さくすればするほど動きは遅くなります。
それではコードに起こしてみましょう。
sizeの上に１行空けてそこに
void setup() {
}
と書いて、backgroundまでを{ }で囲ってください。
出来ましたか？
setupの前についた『 void 』という単語は、関数が実行した結果が何も値を返さないということを意味しますが、
難しいので、setup や draw の前に付くんだぐらいで大丈夫です。
これが書けたら、setup(){ } の中に
frameRate ( 60 ) ;
を追加してください。
ここまで書けたら初期知っていは終わりです。
コードを見比べてみてください。
ここまで書けたら後は簡単です。
もう少し頑張りましょう！！
『 draw 』を付け足して動きをつけよう
次はdrawを付け足します。
これは本当に付け足すだけなんです。
まず
float x = random ( 0, width ) ;
の上に1行空けて、
void draw() {
と書いてください。
そして、1番最後に行を付け足して、 } を書き、囲ってください。
このようになりましたか？
これで完成です。
思ったより簡単だっだのではないでしょうか。
これでプログラムを実行させてみてください。
このようになったら完成です。
コードの全体図がこちら
今日の作品のコード紹介
最後に今日の作品のコードを紹介したいと思います。
コードがこちら
少しアレンジするだけで、全然違った印象になるので、皆さんもぜひ自分流のアレンジを楽しんでみてください。
今日のまとめ
今回はアニメーションを作ってみようという事でやってきましたがどうでしたでしょうか。
意外と簡単に出来たのでは無いかなと思います。
まず図形を描いて、それにsetupとdrawを付け足すだけで、誰でも簡単に作る事が出来るので、
ぜひ自分なりの図形を描き、それを動かしてみてください！
という事で今回はこの辺で終わりにしたいと思います。
Twitterで普段のプログラミングの様子を投稿していたり、DMで質問などの募集もしています。
ぜひ一度覘いてみてください。
みおはぴ🐰 @大学生プログラマー (@mio_Processing) | Twitter
という事で今回はこの辺で終わりにしたいと思います。
また次回も見てもらえると嬉しいです！
ここまで見てくださり本当にありがとうございました。
次回もまた見てもらえると嬉しいです。
合わせて読みたい
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
