図形が浮かび上がって消える！？ 大量の図形を動かそう 【 Processing 実践編 No.3 】
こんにちはみおです！
今回は実践編という事で、大量の図形を一気に動かす方法をご紹介したいと思います。
まずProcessingってなに？と思った方はこの記事をご覧ください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
そして、今回は主に実践編のNo.1とNo.2のコードを利用していきます。
まだ見てないよという方はこちらからご覧ください。
どんどん広がっていく！？ 大量の図形を同時に操作する方法 【 Processing 実践編 No.1 】 - Processingの基礎と応用
ランダムに動いていく図形を描く方法 【 Processing 実践編 No.2 】 - Processingの基礎と応用
それでは早速やっていきましょう！
今日の作品
今回紹介するコードをアレンジして作れる作品がこちらです。
静止画にするとこのような感じになります。
それではやっていきましょう！
【グーペ】デザインを4000パターン以上から選べるHP作成サービス 
1. 入門編のコードを使って準備をしよう
まずは入門編のコードを使って準備をしていきます。
下のようにコードを入力してみてください。
ここまでが分からない方は、下の記事をチェックしてみてください。
- void setup / void draw が分からない方
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
- stroke / noFill が分からない方
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
ここまで書けたらいよいよ今日のコードに映ります。
2.大量の図形を動かすアニメーション方法
それではコードを書いていきましょう！
実践編No.1のコードの一部を写そう
今回は冒頭にも説明した通り、実践編のNo.1とNo.2のコードを組み合わせて作っていきます。
まずはNo.1のコードを写していきましょう！
黄色で囲っている部分をこのように写してみてください。
写せましたか？
分からない単語がある方は、実践編No.1をもう1回見てみてください！！
どんどん広がっていく！？ 大量の図形を同時に操作する方法 【 Processing 実践編 No.1 】 - Processingの基礎と応用
実践編No.2のコードの一部を写そう
No.1のコードが写せたら、No.2のコードを写していきましょう！
緑で囲っている所を写していきます。
これをこのように写してみてください。
ここまでは大丈夫ですか？
分からない事があれば、実践編No.2をもう1回見てみててください。
ランダムに動いていく図形を描く方法 【 Processing 実践編 No.2 】 - Processingの基礎と応用
『 background 』を追加しよう
ここまででコードはほぼ完成しましたが、重要な単語が1つ抜けています。
それは背景色を設定する『 background 』です。
No.1とNo.2では、どちらも setup の方に書いていましたが、今回は消える表現をしたいので draw の方に書いていきます。
noFill(); と for文の間に、
background ( 0 ) ;
と入力してください。
これで完成です。
なぜbackground をdraw の方に書くのかは、こちらの記事で詳しく説明をしています。
アニメーション基礎 〜図形を動かしてみよう〜【 Processing 入門編 No.8 】 - Processingの基礎と応用
コードの全体はこうなっていますか？
確認をして間違いが無ければプログラムを実行してみてください。
こうなっていれば完璧です！
今日の作品のコード紹介
最後に、冒頭でもお見せした今日の作品のコードを紹介していきたいと思います。
コードはこちらです。
今日のまとめ
今回は大量の図形を動かして、消していくという方法をご紹介しました。
少しでも参考になれば良かったなと思います。
また、TwitterのDMとかにもどんどん質問募集しているので、分からない事があれば、ぜひ質問してください！
みお🐰 @大学生プログラマー (@mio_Processing) | Twitter
という事で今回はこの辺で終わりにしたいと思います。
また次回も見てもらえると嬉しいです！
合わせて読みたい
アニメーションで"大きさの違う"図形を描く方法【 Processing 入門編 No.7 】 - Processingの基礎と応用
初心者でも簡単!! オリジナル作品のコード３選【 Processing 番外編 】 - Processingの基礎と応用
Processingを始めたいor始めたばかりの方へ 〜性格や用途別オススメ参考書４選【 Processing 番外編 】 - Processingの基礎と応用
