意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】
こんにちはみおはぴです！
今回は『基本図形の描画をしてみよう』という事で、図形を描く上で基本となる線や四角、丸などの図形の描き方を紹介したいと思います。
まずProcessingって何？と思った方はこちらの記事をご覧ください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
また、動画で見たいという方は下から見てみてください。
今日の完成作品
今日紹介するコードを使って出来る作品がこちら
今日紹介するコードではこのような物が作れます。
もちろんこれだけではなく、円などをたくさん描けばもっと凝った作品も作る事が可能です。
１.プログラム実行時の画面の大きさを設定してみよう
『 size(); 』を使って大きさ変更をする方法
画面の大きさを変更する為には、『 size(); 』という単語を使います。
書き方は、「 size(横幅, 高さ) ; 」になります。
実際にコードに表してみると、
size ( 800, 600 ) ;
となります。
これを入力出来たら、再生ボタンを押してみてください。
このようにして画面の大きさ設定が出来ます。
画面設定が終わったので、早速図形を描いていきましょう！
2.実際に図形を描いてみよう
『 point(); 』を使って点を描く方法
まずは点を描いてみましょう。
点を描くためには『 point(); 』という単語を使用します。
先ほど書いた「size();」はそのまま残して、その下に書いていきます。
「 point (X座標, Y座標) ; 」 というコードになります。
X座標は横の長さ、Y座標は縦の長さと覚えてください。
今回はXを400、Yを300で描いていきます。
point ( 400, 300 ) ;
このコードを入力しプログラムを実行してみてください。
非常に見えずらいですが、中心に小さな点が描けました。
この 『 point(); 』自体はあまり使う事は無いかもしれませんが、図形を格上ではこのコードの形が基本となるので、ぜひ1回やってみてください。
『 line(); 』を使って線を描く方法
次に線を描いてみましょう。
線を描く時には『 line(); 』を使用します。
コードは 「 line(X座標１, Y座標１, X座標２, Y座標２ ) ; 」です。
イメージとしては、点を2つ描いてそれを繋ぎ合わせるような感じです。
今回は、X座標１を60、Y座標１を40、X座標２を700、Y座標２を500にします。
line ( 60, 40, 700, 500 ) ;
これを入力したらプログラムを実行してください。
このように線を描く事が出来ました。
『 line(); 』というコードは頻繁に使う事は無いものの、ちょっと丸や四角では無い図形（三角や五角形など）を作るときに物凄く使われるコードです。
覚えておくと、自分の好きな形が自由自在に作れるので便利だと思います。
『 rect(); 』を使って四角形を描く方法
続いて、四角形の描画方法を紹介します。
やっと図形らしくなってきましたね笑
四角形を作る時には、『 rect(); 』を使用します。
コードは「 rect (左上X座標, 左上Y座標, 幅, 高さ) ; 」です。
コードもさっきよりも少し複雑になってきました。
まず左上って何？と思うかもしれません。
左上とは、四角形の頂点が4つある中の左上が基準点になるという事です。
ちょっと難しいという方も画像を見たら納得出来ると思うので、とりあえずコードを打ってみましょう。
今回は、X座標を200、Y座標を100、幅と高さを300にします。
rect ( 200, 100, 300, 300 ) ;
これでプログラムを実行してみてください
このように四角形を描く事が出来ました。
ここからは少しだけ応用していきます。
応用① 四角形の大きさを変えてみよう
四角形の大きさは、幅と高さの数値を調節するだけで変える事ができます。
実際にやってみましょう。
rect ( 200, 100, 100, 100) ;
先ほどは幅と高さが300でしたが、どちらも100にしてみました。
これで実行してみてください。
このように四角を小さくする事が出来ました。
当たり前ですが、数字を小さくしたら四角も小さくなりますし、逆に数字を大きくしたら四角も大きくなります。
応用② 四角形の形を変えてみよう
次に四角形の形を変えてみましょう。
先ほどと少し似ていますが、形も幅と高さの数値を調節して変える事が出来ます。
- 「 幅＝高さ 」だと正方形
- 「 幅 > 高さ 」だと横長の長方形
- 「 幅 < 高さ 」だと縦長の長方形になります。
今回は幅300、高さ200の横長の長方形を作ってみましょう。
rect ( 200, 100, 300, 200 ) ;
これで実行してみてください。
横長の長方形が出来ました。
このようにして細かい形などは修正してみてください。
『 ellipse(); 』を使って円を描いてみよう
基本図形の中で最もよく使われる、円を描くコード『 ellipse(); 』を紹介していきます。
コードは「 ellipse ( 中心X座標, 中心Y座標, 幅, 高さ ) ; 」です。
コードの作りは四角形の時と同じですが、1つだけ大きく異なるところがあります。
それは基準点が左上から中心に変わりました。
円の場合は円の中心を基準に描かれるので、そこだけ注意してください。
それでは実際に入力してみましょう。
今回はX座標とY座標を400、幅と高さを200にしていきます。
ellipse ( 400, 400, 200, 200) ;
入力できたらプログラムを実行してください。
このようになると思います。
それでは四角形の時と同様に少し応用してみましょう。
応用③ 円の大きさを大きさを変えてみよう
円の大きさも四角形の時と同様に、幅と高さの数値を調節して変えていきます。
先ほどは小さくしたので、今回は大きくしてみましょう。
幅、高さをそれぞれ300に変更してみてください。
ellipse ( 400, 400, 300, 300 ) ;
するとこのように円が大きくなりました。
応用④ 円の形を変えてみよう
次は円の形を変えてみましょう。
これも四角形の時と同様に、高さと幅の数値を変更する事で出来ます。
今回は幅200、高さ100にしてみましょう。
ellipse ( 400, 400, 200, 100 ) ;
このように正円から楕円に変更する事が出来ました。
これを使って色々な円を描いてみてください。
今日の作品の実際のコード画像
冒頭にお見せした今日の作品
の実際のコードがこちら
長々と説明してきましたが、こう見ると案外単純ですよね。
数値を変えるだけで形や大きさ、位置を調節出来るので色々と試してみてください。
今日のまとめ
今回は『基本図形の描画方法』について紹介をしていきました。
Processingは、初めは英語が多く専門用語などもあり、難しいと思いがちですが、意外と分かりやすく取り掛かりやすい言語です。
また、最初からコードを全部覚えようとしなくても、やっている内に自然とコードが体がコードを覚えてくるので、そんなに難しく考えなくても大丈夫だと思います。
初めは色々な人のコードを模写して、それを少しアレンジしてみようみたいな感じで楽しんでやってみてください。
また、Twitterでも色々な作品を投稿したり、DMなどでの質問も募集しています。
ぜひ一度のぞいてみてください。
みおはぴ🐰 @大学生プログラマー (@mio_Processing) | Twitter
という事で今回はこれぐらいで終わりにしたいと思います。
また次回も見てもらえると嬉しいです。
合わせて読みたい
オリジナル作品を作る前に！〜押さえておきたい5つのポイント〜【 Processing 応用編 No.1 】 - Processingの基礎と応用
Processingを始めたいor始めたばかりの方へ 〜性格や用途別オススメ参考書４選【 Processing 番外編 】 - Processingの基礎と応用
初心者でも簡単!! オリジナル作品のコード３選【 Processing 番外編 】 - Processingの基礎と応用
