初めまして、ダダです
↓↓↓前回の記事はこちらから↓↓↓
【超初心者向け】Processingでプログラミング言語Pythonを使った線の描き方ついて
そして今回はProcessingで様々の図形をプログラムで作成していきます
Processingで基本となる図形ですが、以下に説明する図形を描けるようになるといろんな表現ができるようになるので是非覚えていただきたいです
初めに図形とは
一定の決まりによって定められる様々な形状のことであり、様々な幾何学における基本的な対象である。
引用:Wikipedia
皆さんご存じだと思いますのですぐに書き方に移っていきます
Processingを使った 図形の書き方
Processingでは図形をプログラムで描きます
円を描く場合だとコードは下記のようになります
ellipse(450, 300, 500, 400)
丸図形(座標X, 座標Y, 横幅, 高さ)
のように構成されています
座標の説明についてはこちらの記事を参考に
図形種類と描き方
矩形
矩形(くけい)とは、 それぞれの角が直角である四辺形を指します
コード入力・実行
rect(200, 100, 500, 400)

こんな感じになります
矩形の仕組みについて
rect(200, 100, 500, 400)
矩形(座標X, 座標Y, 横幅、高さ)
図にするとこんな感じになります

座標X、座標Yで矩形の始まる場所を指定
幅と高さを指定して矩形の大きさを決めます
円
丸を描くコードになります
矩形とは座標の取り方少し違ってきます
コード入力・実行
ellipse(450, 300, 500, 400)

円の仕組みついて
ellipse(450, 300, 500, 400)
円(座標X, 座標Y, 幅, 高さ)
図にするとこんな感じになります

座標X、座標Yで円の中心座標を決める
幅と高さを指定して矩形の大きさを決めます
矩形とは開始座標の取り方が違うことを知っておきましょう
三角
三角は矩形や円とはすこし作り方が変わってきます
コード入力・実行
triangle(450, 100, 100, 500, 800, 500)

三角の仕組みについて
triangle(450, 100, 100, 500, 800, 500)
三角(X座標①、Y座標①、X座標②、Y座標②、X座標③、Y座標③)
図にするとこんな感じです

矩形や円とは少し作成方法が違ってくるので注意しましょう
三角形はすべての角を座標指定するので少し作成難易度が高くなりますが、図形作成時の自由度が高くなるります


こんな感じで図形の形を変えたり向きを変えたりができることが、メリットだと思います。
矩形も三角と同じように少し形を変えてみたいという方には以下に違う描き方を描いていきます
四角
四角形ですが、矩形とはなにが違うのか?
違い
矩形:大きさを指定する
四角:各角の場所をしていする
コード入力・実行
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座標④)
図にするとこんな感じです

各角の座標の指定をすることで四角を描くことができます
描くコードの内容は長くなり座標の位置がずれると思った形をとれないこともありますが、図形の自由度が格段に高くなります
四角のコードを使って遊んでみよう
quad(100, 100, 800, 100, 800, 500, 100, 500)
このコードの数値を変更して形を変えてみましょう
実際にいろいろ数値を変えて出力した内容が以下の画像です






これらはすべてquad()関数を使って書いたものです
三角が2つある画像については四角をひねったイメージをしていただけるといいかもしれません
参考コードは以下になります
quad(800, 600, 500, 100, 40, 580, 100, 100)
まとめ
図形の書き方をまとめてみました
図形の描き方を覚えていくと表現方法が格段に上がるので是非覚えてください

この度Udemyで講座を作りました
【プログラミングxアート】直感的・視覚的に学ぶ Processing×Python 入門講座
ブログに書いてある内容を一つの講座にしています
次は入門編の最後になりますが色の付け方です
色の付け方や図形や線の描き方がわかってくると以下の作品が作れるので参考に記事を見ていただけると嬉しいです。
以上のような記事の作品を作ることができます
作品のパンチが足りないですがご了承を…
コメント