変数を使って複数の円を描く方法【 Processing 入門編 No.4 】
こんにちはみおはぴです！
今回は変数を使ったコードを紹介していきたいと思います。
Processingをする上で、変数は効率良く作業をするためにとても重要な物となってきます。
暗記しなければいけないという訳では無いので、こんなのがあるんだぐらいで見ていってください。
今日の作品
今日の作品はこちらです！
それでは早速やっていきましょう！
1.今日使う変数、データ型の紹介＆説明
まず、使っていく変数やデータ型の軽い説明をしていきたいと思います。
詳しい事はまた出てきた時に説明するので、眺める程度で見ていってください。
- float : 32ビット倍精度浮動少数点数
- diameter : 円の直径
- width : 表示したウィンドウの幅
- height : 表示したウィンドウの高さ
文字にすると難しく感じるかもしれませんが、実際にコードで使用してみると、さほど難しくは無いので、実際にコードに起こしてみましょう！
2.実際にコードにしてみよう
まずは基本のコードを書こう
まずは下のように基本のコードを書いてみてください。
ここまでが分からないよという方は、こちらの記事をみて見てみてください。
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
作品をもっとカラフルに！ 色の設定方法【 Processing 入門編 No.3 】 - Processingの基礎と応用
ここまで出来たよという方は早速やっていきましょう！
『 float 』や『 diameter 』を使って準備をしよう
floatやdiameterといったコードは、実際にこれで何が描けるとかでは無いので、図形を描く為の準備段階と思ってください。
まずfloatを使い、円の直径を格納していきます。
格納というと分かりずらいかもしれませんが、変数を1つ1つ収納していくというイメージを持ってみてください。
今回だとfloatという収納箱にdiameterという変数を収納していきます。
float diameter ;
と入力してみてください。
これで収納する事が出来ました。
それでは次にこのdiameterを使って、円の大きさを決めていきましょう。
先ほど軽く説明しましたが、diameterとは円の直径を表す変数です。
円が複数になると、いちいち円の大きさを数字で書いていくのは大変になるので、diameterで置き換えて使っていきます。
diameter = 数字の置き換え
と思ってみてください。
それではやっていきましょう！
diameter = width / 2 ;
と入力してみてください。
ここで出てきたwidthという単語は表示した画面の幅になります。
どういう事かというとプログラムを実行した時に出てくる画面、（実行画面）の横の長さという事です。
今回のこのコードでは、円の直径が画面の半分の大きさという事になります。
これで準備は終わりました。
現段階でのコードはこんな感じです。
ここまでは大丈夫そうですか？
もし分からなかったらもう1回見直してみてください。
それでは次は実際に円を書いていきましょう！
変数を使って円を描こう
いよいよ円を書いていこうと思います！
円を描く時には今までと同様にellipseを使用します。
ellipse ( width / 8, height / 2, diameter, diameter ) ;
コードはこうなります。
少し難しく感じるかもしれませんが、結構単純です。
ellipseのコードの意味は
ellipse(中心X座標, 中心Y座標, 幅, 高さ ) ; でしたよね。
これを上のコードに当てはめてみてください。
widthでX座標を設定して、heightでY座標を設定する。
そして、diameterで円の大きさを設定する。
これだけの事なんです。
/ というのは割り算を意味します。
逆に ＊ になるとかけ算を意味するので、頭の片隅にでも入れておいてください。
ここまでが出来たら、一度プログラムを実行してみてください
このように1つの円が描けたと思います。
それではこれを使って円を続けていきましょう。
円の位置はwidthとheightにそれぞれ値をかけたり割ったりして変更していきます。
2個目の円 ellipse ( width / 8 * 3, height / 2, diameter, diameter ) ;
3個目の円 ellipse ( width / 8 * 5, height / 2, diameter, diameter ) ;
4つ目の円 ellipse ( width / 8 * 7, height / 2, diameter, diameter ) ;
ここまでは大丈夫ですか？
ここまで書けたら、実行してみてください。
このようになったと思います。
ここまでのコードはこうなっていると思います。
あとは色を変えたり大きさを変えたりして、自分なりにアレンジしてみてください。
今日の作品のコード紹介
最後に今日の作品のコードを紹介したいと思います。
今日の作品はこちらでした。
これのコードがこちらです。
今日のまとめ
今日は変数を使った円の描き方を紹介していきました。
数字で書いた方が分かりやすいと思うかもしれませんが、こういうやり方もあるよというのを頭の片隅にでも入れておいてください。
また、これを元に自分流に色々アレンジして、色々な作品を作ってみてください！
という事で今回はこの辺で終わりにしたいと思います。
ここまで見てくださり本当にありがとうございます。
また次回の記事も見てみてください！
合わせて読みたい
作品をもっとカラフルに！ 色の設定方法【 Processing 入門編 No.3 】 - Processingの基礎と応用
Processingを始めたいor始めたばかりの方へ 〜性格や用途別オススメ参考書４選【 Processing 番外編 】 - Processingの基礎と応用
初心者でも簡単!! オリジナル作品のコード３選【 Processing 番外編 】 - Processingの基礎と応用
