ランダムなデザインのアニメーションをアレンジしてみよう 【 Processing 応用編 No.3 】
こんにちはみおはぴです！
今回は応用編No.3という事で、実践編No.1、No.2、No.3、No.4のコードをアレンジして作品を作っていこうと思います。
- No.1を見ていない方はこちらから
どんどん広がっていく！？ 大量の図形を同時に操作する方法 【 Processing 実践編 No.1 】 - Processingの基礎と応用
- No.2を見ていない方はこちらから
ランダムに動いていく図形を描く方法 【 Processing 実践編 No.2 】 - Processingの基礎と応用
- No.3を見ていない方はこちらから
図形が浮かび上がって消える！？ 大量の図形を動かそう 【 Processing 実践編 No.3 】 - Processingの基礎と応用
- No.4を見ていない方はこちらから
ブレンドモードってなに?! コード付きの徹底解説!! 【 Processing 実践編 No.4 】 - Processingの基礎と応用
そして、Processingって何？と思った方はこちらをご覧ください
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
それでは早速やっていきましょう！
【グーペ】デザインを4000パターン以上から選べるHP作成サービス 
今日の作品
今日紹介するコードをアレンジして作れる作品がこちらです。
静止画にするとこのような感じになります。
この作品のコードは最後に紹介するので、ぜひ最後まで見ていってください。
応用例１ ランダムな点によるテクスチャ表現
1つ目は、ランダムな動きが複雑なテクスチャ（質感）を生み出す作品を作っていきたいと思います。
基本的なコードは今までと同じです。
『 int 』『 float 』で宣言をしよう
まず、宣言文を作っていきます。
1行目にこのように入力してください。
これは実践編のNo.1とNo.3、No.4でも出てきたコードですね。
詳しい説明は実践編No.1でしています。
どんどん広がっていく！？ 大量の図形を同時に操作する方法 【 Processing 実践編 No.1 】 - Processingの基礎と応用
『 void setup 』で初期設定をしよう
続いて、 void setup を使って初期設定をしていきたいと思います。
さっき書いたコードの下に、このように入力してください。
基本的な作りはNo.1とNo.4と同じです。
しかし、for分の中が少しだけ変わりました。
これはNo.1とNo.3は、画面の中心をX座標やY座標にしていました。
それに対し、ここではランダムな位置をX座標やY座標にしています。
ここの違いだけであとは今までと同じです。
『 void draw 』を使って描画をしていこう
次に void draw を使って描画していこうと思います。
このように入力してみてください。
これはNo.1と同じほぼ同じです。
数値が少しだけ変わっているので注意してください。
ここまで書けたら完成です！
もう一度コードを見直してみてください。
確認が出来たらプログラムを実行してみてください。
こうなっていたら完璧です。
応用例２ ランダムに流れるデザイン表現
続いて応用例２を紹介していきます。
これは応用例１のコードをさらに応用するコードなので、応用例１をやってから行ってください。
それではやっていきましょう！
『 stroke 』と 『 random 』の数値を変更しよう
まずは応用例１のコードの数値を少しだけ調節していきたいと思います。
このように変更してみてください。
3行目の stroke の数値と、7,8行目の random の数値を変更しています。
ここまでは大丈夫ですか？
それでは追加コードを入力していきます。
『 if文 』を使って条件をつけよう
続いて void draw()の、for文の中に if文を追加して条件を付けていこうと思います。
if文が分からないという方はこちらをご覧ください。
実行する度に作品が変わる!! ランダムに図形を描く方法【 Processing 入門編 No.5 】 - Processingの基礎と応用
このように入力してみてください。
ここまで書けたら完成です。
このif文では、画面の端からはみ出さないように、上下左右の端についた時の対応を設定しています。
1行目が左端、2行目が右端、3行目が上端、4行目が下端です。
もう一度コードを確認してみてください。
確認出来たらプログラムを実行してみてください。
こうなっていれば完璧です！
今日の作品のコード紹介
最後に今日の作品のコードを紹介していきたいと思います。
コードはこちらです。
今日のまとめ
今回は応用編という事でアレンジ作品を紹介してみました。
アレンジはこのようにやってみてください。
この記事が少しでも参考になればいいなと思います。
また、TwitterのDMとかにもどんどん質問募集しているので、分からない事があれば、ぜひ質問してください！
みおはぴ🐰 @大学生プログラマー (@mio_Processing) | Twitter
という事で今回はこの辺で終わりにしたいと思います。
また次回も見てもらえると嬉しいです！
合わせて読みたい
ブレンドモードってなに?! コード付きの徹底解説!! 【 Processing 実践編 No.4 】 - Processingの基礎と応用
入門編に出てきた単語一覧 No.2 〜 No.12 【 Processing 入門編 No.13 】 - Processingの基礎と応用
〇〇を付け足すだけの簡単作業!! 画面の中心を軸に図形を回す方法 【 Processing 入門編 No.11 】 - Processingの基礎と応用
