実行する度に作品が変わる!! ランダムに図形を描く方法【 Processing 入門編 No.5 】
こんにちはみおです！
今回はランダムに図形を描く方法を紹介していきたいと思います。
まずProcessingって何？という方はこちらの記事をご覧ください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
今日の作品
今日のコードを使って出来る作品がこちら
最後にこの作品のコードを紹介するので、ぜひ最後まで見ていってください。
今日使う新しい単語
まずは今回使っていく新しい単語を紹介していきます。
覚える必要はないので、軽く見流す程度で大丈夫です。
- random : 乱数の生成
- dist : 2点間の距離を求める命令
- if / else : 分岐
詳しい説明はまた出てきた時に説明しようと思います。
それでは早速コードを書いていきましょう！
1.前回までのコードを生かして準備段階を作ろう
まずは下のようにコードを入力し、新しいコードを書くための準備をしてください。
ここまでが分からないよという方は過去の記事を見てみてください。
＜画面サイズと図形の描画＞ size();
【 Processing 入門編 No.2 】 〜意外と簡単⁉︎ 基本図形の描画の描画方法〜 - Processingの基礎と応用
＜色選択＞ background(); noStroke();
【 Processing 入門編 No.3 】 〜色の設定 カラフルな作品を作ろう〜 - Processingの基礎と応用
＜複数の円を描く方法＞ int num = 100;
【 Processing 応用編 No.2 】〜複数の円を効率よく描く方法〜 - Processingの基礎と応用
ここまでが入力出来た方は次に進みます。
2.ランダムに図形を描いてみよう
『 for 』文を使って反復のコードを書こう
まずは前回の応用編２でもやった『 for 』文を使ってコードを描いていきます。
for ( int i = 0 ; i < num ; i ++ ) {
これを入力してみてください。
『 } 』はまだいりません。
ここまでは大丈夫ですよね。
ではいよいよ新しいコードを使っていきたいと思います。
『 random 』を使って乱数を生成しよう
まずは『 random 』を使っていきます。
これはなんとなく意味は分かりますよね。
意味は乱数（ランダム）という事で、その名前の通りランダムに点(図形を描く時の基準となる点)を配置していきます。
コードはこのようになります。
random ( 最小値, 最大値 ) ;
では実際に入力していきましょう。
float x = random ( 0, width ) ;
float y = random ( 0, height) ;
2個あって分かりにくいと思うかもしれないので、1個ずつ解説していきます。
まず1個目のコードの意味は、「 画面の幅いっぱいに生成した値をX座標にする 」となります。
どういう事というと、まず画面の幅いっぱいに点を打ちます。
そしてその点を、図形を描くための基準となるX座標(左端からの距離）に設定するという事です。
なんとなく分かりましたか？
数学に出てくるX座標と同じ考えです。
では2個目のコードはどういう意味なのでしょうか。
2個目のコードは、「 画面の高さいっぱいに生成した値をY座標にする 」という意味です。
考え方は1個目と同じで、横の幅から高さに変更されただけです。
ここまでは大丈夫ですか？
では次のコードにいきましょう。
『 dist 』を使って距離を計算しよう
続いてのコードは『 dist 』です。
distは2点間の距離を求める命令です。
どういう事かというと、点と点や点と円、画面の中央と点などの2点間の距離を計算していくという事です。
distのコードはこうなります。
dist ( x1, y1, x2, y2 ) ;
それでは実際にコードに起こしてみましょう。
float dist = dist ( x, y, width/2, height/2 ) ;
これを入力してみてください。
x と y は先ほど作ったランダムな点ですよね。
このコードでは、そのランダムな点たちと、画面の中心との距離を計算するという事になります。
ここまでは大丈夫ですか？
ちなみにここまでのコードはこちら
見比べて何か違うというのがあれば、もう一度戻ってやってみてください。
ここまでは大丈夫という方は次に進みましょう。
『 if 』を使って条件をつけよう
『 if 』ではランダムに描く時の条件をつける事が出来ます。
基本的に『 if 』は『 else 』とセットで出てくる事が多いのですが、まずは『 if 』の方を説明していきます。
if では、「もし〇〇だったら〇〇となる」という条件をつけていきます。
コードはこちらです。
if (条件文) {
真文
}
真文というのは、条件に当てはまる時の対応(描画方法)の事です。
では実際にコードに起こしてみましょう
if ( dist < height/2 ) {
noStroke() ;
fill( 255, 100, 255 ) ;
}
と描いてみてください。
色は自分の好きな色にして構いません。
これの意味は、「もし、距離が高さの半分よりも小さかったら、枠線はなしで、色は(255, 100, 255)にする」となります。
これで、条件をつける事が出来ました。
『 else 』を使って条件に合わなかった時を設定しよう
先ほど『 if 』を使って条件をつける事が出来ました。
では、今度は条件に合わなかった場合の対応(描画方法)を設定していきましょう。
その時に使うのが、先ほど軽く紹介した『 else 』という単語です。
コードにするとこうなります。
else {
偽文
}
偽文とは「条件に合わなかった時の対応方法」の事です。
それではコードに起こしてみましょう。
else {
noFill () ;
stroke ( 100, 255, 255 ) ;
}
となります。
色は先ほどと同様に何色でも構いません。
これの意味は、「もし、距離が高さの半分よりも大きかったら、塗りつぶしは無し、枠線の色は( 100, 255, 255 ) 」となります。
ここまでは大丈夫そうですか？
そしてここまでの全体コードがこちら
いよいよ次で最後です。
もう少し頑張りましょう！
最後に円を描いてプログラムを実行してみよう
ここまで色々設定してきましたが、肝心の図形を書かないと何も実行されませんよね。
という事で最後に円を描いていこうと思います。
円を描く時には今まで通り『 ellipse 』を使います。
それではコードに起こしてみましょう。
ellipse ( x, y, 10, 10 ) ;
}
これは大丈夫ですか？
中心X座標が x
中心Y座標が y
幅が10
高さが10
という意味になります。
そして最後の『 } 』は、1番最初の『 for 』文の時に出てきた『 { 』とペアになっています。
これを忘れたり、違う所に書いてしまうと、エラーになったり、思うように実行してくれなかったりするので、気をつけてください。
全体コードがこちら
きちんと書けていたら、プログラムを実行してみてください。
こうなりましたか？
これで完成です。
ちなみに、『 int num 』に代入する数字を変えていくと、反復の数が変わるので、また違った雰囲気になります。
＜int num = 1000 ; ＞
＜int num = 10000 ; ＞
＜int num = 100000 ; ＞
数値を減らしたり増やしたりして、自分なりにアレンジしてみてください。
今日の作品のコード紹介
最後に、今日の作品のコードを紹介していきたいと思います。
ちなみに今日の作品はこちらでした
そしてコードはこちらです
丸だけでなく四角でも出来るので、ぜひやってみてください。
今日のまとめ
今回はランダムに図形を描くという事でやってきました。
これを使えば、これだけではなく色々な作品が出来ると思うので、色々試してみてください。
それでは今回はこの辺で終わりにしたいと思います。
ここまで見てくださり本当にありがとうございました。
また次回も見てみてください。
合わせて読みたい
変数を使って複数の円を描く方法【 Processing 入門編 No.4 】 - Processingの基礎と応用
オリジナル作品を作る前に！〜押さえておきたい5つのポイント〜【 Processing 応用編 No.1 】 - Processingの基礎と応用
Processingを始めたいor始めたばかりの方へ 〜性格や用途別オススメ参考書４選【 Processing 番外編 】 - Processingの基礎と応用
