この記事では、「p5.jsの基本的な書き方」と「描画できる図形の種類」について書いています。まず、p5.jsの書き方を知り、基本形に慣れていきます。その上で図形を描きます。それから徐々にコードを変更して、色々と試していくことをおススメします。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。
setup()とdraw()
まず、setup()とdraw()を書く。始めは、この関数の中にコードを記述していく。
function setup(){ //最初に1回だけ実行する処理を記述する } function draw(){ //繰り返し実行する処理を記述する }
- setup()
- 最初に1回だけ実行する関数。
- 初期設定を定義したり、画像などを読み込む。
- draw()
- setup()の直後に実行される関数で、繰り返し実行する。
createCanvas()とbackground()
- createCanvas()
- 描画領域の作成。
- background()
- 背景色の指定。
createCanvas()で、HTMLドキュメントにcanvasタグ(描画領域)を作成する。指定したサイズで描画領域を作成する。左上が(0, 0)の座標。横軸がx軸で右方向にプラス。縦軸がy軸で下方向にプラス。
function setup(){ //createCanvas(w, h); //w:キャンバスの幅, h:キャンバスの高さ createCanvas(200, 200); //背景色を指定する background(127); }
背景色がグレーの描画領域が作成される。
図形の種類
図形を描画するのに9つの関数がある。
- point():点
- line():線
- triangle():三角形
- square():正方形
- rect():長方形
- quad():角の角度が90度に固定されない四角形
- arc():円弧
- circle():円
- ellipse():楕円
rect()を使う
長方形を描画する。
function setup(){ createCanvas(200, 200); background(127); //長方形を描画する //rect(x, y, w, h) //x:x座標, y:y座標, w:幅, h:高さ rect(50, 50, 100, 100); }
まとめ
- setup():初期設定
- draw():繰り返し処理(再描画の処理)
- createCanvas():描画領域の作成
- background():背景色の指定
- rect():長方形の描画
この記事で説明しきれなかったことがたくさんありますが、それらはリファレンスに載っています。例えば、rect()は角丸も指定できます。詳しく知りたい方は、リファレンスを確認してください。