キャンバスの作成

p5.js では、createCanvas関数を使って描画を行うためのキャンバスを作成します。試しに、幅 400 ピクセル、高さ 400 ピクセルのキャンバスを作成するためのコードを、sketch.jsに記述してみましょう。

function setup() {
    createCanvas(400, 400);
    background('#D6E3ED');
}

このコードを実行すると、ブラウザ上に 400x400 ピクセルのキャンバスが表示されます。

描画関数を使ってみよう

それでは、先ほど作成したキャンバスに、図形を描画してみましょう。p5.js には、さまざまな図形を描画するための便利な関数が用意されています。ここでは、いくつかの基本的な描画関数を紹介します。

line(x1, y1, x2, y2)：線を描画。x1、y1は始点、x2、y2は終点の座標を表します。
circle(x, y, r)：円を描画。xとyは円の中心の座標、rは直径を表します。
rect(x, y, w, h)：四角形を描画。xとyは左上隅の座標、wは幅、hは高さを表します。

以下は、これらの関数を使って基本的な図形を描く例です。

function setup() {
    createCanvas(400, 400);
    background('#D6E3ED');
    // 円を描く
    circle(200, 200, 300);
    // 四角形を描く
    rect(150, 150, 100, 100);
    // 線を引く
    line(0, 0, 400, 400);
}

座標系の理解

先ほどの描画関数の座標指定に違和感を覚えませんでしたか？実は p5.js では、座標系が一般の数学の授業で習うような座標系（デカルト座標系）とは異なります。通常の座標系では、原点（0,0）は左下にありますが、p5.js の座標系（グラフィクス座標系）では原点は左上にあります。つまり、x 座標は右に行くほど大きくなり、y 座標は下に行くほど大きくなります。次の図は２つの座標系の違いを示しています。

p5.js の描画関数一覧

rect()、circle()、line() 以外にも、p5.js にはさまざまな描画関数が用意されています。以下に一部を紹介します。

関数	説明
`ellipse(x, y, w, h)`	楕円を描きます。`x`と`y`は中心の座標、`w`は幅、`h`は高さを指定します。
`rect(x, y, w, h)`	四角形を描きます。`x`と`y`は左上隅の座標、`w`は幅、`h`は高さを指定します。
`rect(x, y, w, h, r)`	角が丸い四角形を描きます。`r`は角の丸みの半径を指定します。
`rect(x, y, w, h, tl, tr, br, bl)`	各角が異なる丸みを持つ四角形を描きます。`tl`, `tr`, `br`, `bl`はそれぞれ左上、右上、右下、左下の角の丸みの半径を指定します。
`line(x1, y1, x2, y2)`	線を引きます。`x1`と`y1`は始点の座標、`x2`と`y2`は終点の座標を指定します。
`triangle(x1, y1, x2, y2, x3, y3)`	三角形を描きます。3 つの頂点の座標を指定します。
`quad(x1, y1, x2, y2, x3, y3, x4, y4)`	四辺形を描きます。4 つの頂点の座標を指定します。
`arc(x, y, w, h, start, stop)`	円弧を描きます。`x`と`y`は中心の座標、`w`は幅、`h`は高さ、`start`と`stop`は角度を指定します。
`point(x, y)`	点を描きます。`x`と`y`は点の座標を指定します。

さらに詳しく知りたい場合は、p5.js の公式リファレンスを参照してみましょう。他にもさまざまな描画関数が用意されています。

https://p5js.org/reference/#group-Shape