ランダムに動いていく図形を描く方法 【 Processing 実践編 No.2 】
こんにちはみおです！
今回は、ランダムに動いていく図形を書いていきたいと思います。
まずProcessingって何？と思った方はこちらの記事をご覧ください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
それでは早速やっていきましょう！
今日の作品
今回のコードをアレンジして作れる作品がこちらです
そして、静止画にするとこのような感じになります。
このコードは最後に紹介するので、ぜひ最後まで見てください！
1. 入門編のコードを使って準備をしよう
まず入門編のコードを使って準備をしていきます。
下のようにコードを入力してみてください。
分からない単語がある方は、下からチェックしてみてください！
- size / point が分からない方
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
- background / noFill / stroke が分からない方
作品をもっとカラフルに！ 色の設定方法【 Processing 入門編 No.3 】 - Processingの基礎と応用
- void setup / void draw / frameRate が分からない方
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
ここまで入力できたらいよいよやっていきましょう！
2. 図形をランダムに動かす方法
『 float 』を使って宣言をしよう
まずは、float を使って x と y を宣言していこうと思います。
- float が分からない方はここからチェック
変数を使って複数の円を描く方法【 Processing 入門編 No.4 】 - Processingの基礎と応用
void setup の上に行を空けて、
float x ;
float y ;
と入力してください。
これでX座標とY座標の宣言が終わりました。
コードはこのようになっていますか？
合っていたら次に進みましょう！
X座標とY座標の値を決めよう
次は、X座標とY座標の値を決めていこうと思います。
void setup () { } の中に、
x = width / 2.0 ;
y = height / 2.0 ;
を追加してください。
これでX座標とY座標の値を決めるこ事が出来ました。
- width / height が分からない方はここからチェック
変数を使って複数の円を描く方法【 Processing 入門編 No.4 】 - Processingの基礎と応用
ここまでのコードはこんな感じです。
ここまでは大丈夫ですか？
難しいなと思った方は、もう1回見直してみるか、過去の記事をみてみてください。
「腰のお肉がヤバい!?」エルセーヌのエステ体験行ってみた！【画像あり】 
X座標とY座標をランダムに動かそう
続いて、X座標とY座標をランダムに動かす設定をしたいと思います。
この設定をする事で、図形を動かす事が出来ます。
void draw() { } の中に、
x = x + random( -4, 4 ) ;
y = y + random ( -4, 4 ) ;
と入力してみてください。
これでランダムに動かす設定をする事が出来ました。
今回のコードはこれで完成です。
意外と簡単だったのではないでしょうか。
プログラムを実行する前に一度コードをチェックしてみてください。
間違いが無ければ、プログラムを実行してみてください。
このようになっていたら完璧です！
今日の作品のコード紹介
最後に冒頭でもお見せした今日の作品のコードを紹介していきたいと思います。
コードはこちらです。
今日のまとめ
今回はランダムに動く図形を描いていきました。
入門編が何となく分かっていれば、簡単だったのではないかなと思います。
何事もまずは基礎からなので、分からない事があったら入門編を見ていただけたらいいなと思います。
また、TwitterのDMとかにもどんどん質問募集しているので、分からない事があれば、ぜひ質問してください！
みお🐰 @大学生プログラマー (@mio_Processing) | Twitter
という事で、今回はこの辺で終わりにしたいと思います。
最後まで見てくださりありがとうございました！
また次回も見ていただけると嬉しいです。
合わせて読みたい
どんどん広がっていく！？ 大量の図形を同時に操作する方法 【 Processing 実践編 No.1 】 - Processingの基礎と応用
入門編に出てきた単語一覧 No.2 〜 No.12 【 Processing 入門編 No.13 】 - Processingの基礎と応用
メディアアートとデジタルアートの違いは意外な〇〇だった!? 【 Processing 番外編 】 - Processingの基礎と応用
