【超初心者向け】Processingでプログラミング言語Pythonを使った図形の描き方について

Processing python

初めまして、ダダです

前回の記事ではProcessingの基本的な線のことについての記事を書きました

↓↓↓内容が気になる方はこちらから↓↓↓

【超初心者向け】Processingでプログラミング言語Pythonを使った線の描き方ついて

そして今回はProcessingで様々の図形をプログラムで作成していきます

Processingで基本となる図形ですが、以下に説明する図形を描けるようになるといろんな表現ができるようになるので是非覚えていただきたいです

この記事はProcessingというソフトを使用しています

設定はJavaではなくPythonに変更してください

Java設定だとエラーが出る場合があるので注意してください

↓↓↓Processingって何?という方はこちらの記事を↓↓↓

↓↓↓Processingのインストールや設定の変更についてはこちらの記事を↓↓↓

初めに図形とは

一定の決まりによって定められる様々な形状のことであり、様々な幾何学における基本的な対象である。

引用:Wikipedia

皆さんご存じだと思いますのですぐに書き方に移っていきます

Processingを使った 図形の書き方

Processingでは図形をプログラムで描きます

円を描く場合だとコードは下記のようになります

ellipse(450, 300, 500, 400)

丸図形(座標X, 座標Y, 横幅, 高さ)

のように構成されています

座標の説明についてはこちらの記事を参考に

図形種類と描き方

図形のコードを入力する前に必ず画面の設定が必要

必ず以下のコードを一行目に入力してください

size(900, 600)

矩形

矩形(くけい)とは、 それぞれの角が直角である四辺形を指します

コード入力・実行

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)

まとめ

図形の書き方をまとめてみました

図形の描き方を覚えていくと表現方法が格段に上がるので是非覚えてください

次は入門編の最後になりますが色の付け方です

色の付け方や図形や線の描き方がわかってくると以下の作品が作れるので参考に記事を見ていただけると嬉しいです。

以上のような記事の作品を作ることができます

作品のパンチが足りないですがご了承を…

コメント

タイトルとURLをコピーしました