そして今回はProcessingで様々の図形をプログラムで作成していきます
Processingで基本となる図形ですが、以下に説明する図形を描けるようになるといろんな表現ができるようになるので是非覚えていただきたいです。
図形の書き方を覚えると自分の作品が来ますよ。
注意点
この記事はProcessingのPython設定で作成しております
Java設定だとエラーが出るので注意してください
設定方法がわからない方は、以下の記事を参考にしてみてください
タイトルテキスト
初めに図形とは
一定の決まりによって定められる様々な形状のことであり、様々な幾何学における基本的な対象である。
引用:Wikipedia
皆さんご存じだと思いますのですぐに書き方に移っていきます
Processingを使った 図形の書き方
Processingでは図形をプログラムで描きます
円を描く場合だとコードは下記のようになります
1 |
ellipse(450, 300, 500, 400) |
丸図形(座標X, 座標Y, 横幅, 高さ)
のように構成されています
座標の説明についてはこちらの記事を参考にしてください。
関連記事
図形種類と描き方
図形のコードを入力する前に必ず画面の設定が必要
必ず以下のコードを一行目に入力してください
1 |
size(900, 600) |
矩形
矩形(くけい)とは、 それぞれの角が直角である四辺形を指します
コード入力・実行
1 |
rect(200, 100, 500, 400) |
こんな感じになります
矩形の仕組みについて
rect(200, 100, 500, 400)
矩形(座標X, 座標Y, 横幅、高さ)
図にするとこんな感じになります
座標X、座標Yで矩形の始まる場所を指定
幅と高さを指定して矩形の大きさを決めます
円
丸を描くコードになります
矩形とは座標の取り方少し違ってきます
コード入力・実行
1 |
ellipse(450, 300, 500, 400) |
円の仕組みついて
ellipse(450, 300, 500, 400)
円(座標X, 座標Y, 幅, 高さ)
図にするとこんな感じになります
座標X、座標Yで円の中心座標を決める
幅と高さを指定して矩形の大きさを決めます
矩形とは開始座標の取り方が違うことを知っておきましょう
三角
三角は矩形や円とはすこし作り方が変わってきます
コード入力・実行
1 |
triangle(450, 100, 100, 500, 800, 500) |
三角の仕組みについて
triangle(450, 100, 100, 500, 800, 500)
三角(X座標①、Y座標①、X座標②、Y座標②、X座標③、Y座標③)
図にするとこんな感じです
矩形や円とは少し作成方法が違ってくるので注意しましょう
三角形はすべての角を座標指定するので少し作成難易度が高くなりますが、図形作成時の自由度が高くなるります
こんな感じで図形の形を変えたり向きを変えたりができることが、メリットだと思います。
矩形も三角と同じように少し形を変えてみたいという方には以下に違う描き方を描いていきます
四角
四角形ですが、矩形とはなにが違うのか?
違い
矩形:大きさを指定する
四角:各角の場所をしていする
コード入力・実行
1 |
quad(100, 100, 800, 100, 800, 500, 100, 500) |
四角の仕組みについて
quad(100, 100, 800, 100, 800, 500, 100, 500)
四角(X座標①、Y座標①、X座標②、Y座標②、X座標③、Y座標③、X座標④、Y座標④)
図にするとこんな感じです
各角の座標の指定をすることで四角を描くことができます
描くコードの内容は長くなり座標の位置がずれると思った形をとれないこともありますが、図形の自由度が格段に高くなります
四角のコードを使って遊んでみよう
1 |
quad(100, 100, 800, 100, 800, 500, 100, 500) |
このコードの数値を変更して形を変えてみましょう
実際にいろいろ数値を変えて出力した内容が以下の画像です
これらはすべてquad()関数を使って書いたものです
三角が2つある画像については四角をひねったイメージをしていただけるといいかもしれません
参考コードは以下になります
1 |
quad(800, 600, 500, 100, 40, 580, 100, 100) |
まとめ
図形の書き方をまとめてみました
図形の描き方を覚えていくと表現方法が格段に上がるので是非覚えてご自身の作品づくりに活かしてみてください
次は選や色の付け方について学んでいきましょう
関連記事
インストール方法や設定方法がわからない方は以下の記事を参考にしてみてください。
関連記事
もしわからないことがあれば、このブログやXに質問等を投げていただければと思います。また、コミュニティもやっっているのでそちらから質問を投げていただいても大丈夫ですよ!!
Xのアカウントはこちら
Discordコミュニティ
プログラミングを視覚的に理解したい方やプログラミングで絵を書いてみたい方はUdemyで講座も作っているのでこちらも参考にしてみてください
Udemy講座
ChatGPTでPythonの学習を始めてみたい方は以下の記事を参考にしてみてください
関連記事
ChatGPTはプログラミングの学習はできても、人のつながりまでは作ってくれません。
プログラミングの学習だけではなく、人との繋がりを作ってくれるスクールもオススメです。
気になる方は無料相談からでも体験してみてください!!