処理の流れ

新規にスケッチを開くと、デフォルトで以下のコードが書かれた状態になっています。
最も簡単なこのコードから説明していきます。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

関数定義

関数を定義するときの書き方です。

function 関数名(引数, 引数, ...) {
  // なにか処理
  return 戻り値;// 計算結果や処理後のデータなどを実行元に戻す
}

function setup() {} と function draw() {} は関数定義です。

処理のまとまりに名前と引数（入力）をつけたものなので、関数定義だけでは何も起きません。

自分で定義する関数の()の中に入る引数は用途に応じて増減や省略が可能です。

関数内で return 戻り値; とすることで、関数内で行った計算の結果や処理後のデータなど実行元に戻すことができます。
return 以降の処理は実行されません。
処理のみ行いたい場合は return は省略できます。

関数実行

定義された関数を実行する際の書き方です。

関数名(引数);

行末のセミコロン

行の終わりには、「次の処理へいくよ」の合図として改行の前にセミコロン ; をつけます。

setup関数

スケッチの初期化をするところです。
ページ表示時に p5.js 側で一度だけ実行されます。

function setup() {
  createCanvas(400, 400);
}

createCanvas(400, 400); でHTMLに 400px x 400px の canvas 要素を追加しています。

参照：createCanvas() reference | p5.js

canvas要素とは

実行結果の背景色が付いている上で 右クリック > 検証 して開発者ツール（DevTools）で要素を確認すると、以下のようなcanvas要素が生成されていることがわかります。

<canvas id="defaultCanvas0" class="p5Canvas" width="400" height="400" style="width: 400px; height: 400px;"></canvas>

canvas 要素はWebページ上でグラフィックを描画するための要素です。

draw関数

描画処理を書くところです。
p5.js 側で setup() が実行されたあと、プログラムを停止するまで毎秒約60回実行されます。
グラフィックを描画する関数に渡す数値を実行中に動的に変化させることでアニメーションさせることができます。

function draw() {
  background(220);
}

background(220); で canvas の背景を指定した色（この場合明るいグレー）で塗りつぶします。

background関数

background 関数はその名の通り背景の色を指定する関数です。
色の指定は 0 ~ 255 までの数値で行います。

引数の渡し方のパターンはたくさんありますが、ここでは 0 ~ 255 の数値を渡して色を指定する２つのパターンを紹介します。

background(220);

引数に１つの数値を渡した場合、グレースケールの指定になります。
0のときは黒、255のときは白になります。

background(0, 205, 129);

引数に３つの数値を渡した場合、RGB での色指定になります。

参照：background() reference | p5.js

フロー図

コメント

プログラムの実行に影響しないメモを残すことができます。
// 以降の改行までの文字はコメント扱いになります。
複数行のコメントを書く場合は、/* */ でコメントを挟みます。

またコメントの仕様を使って、一時的に不要なコードをコメントアウトすることで実行させないようにすることもできます。

// 一行のコメント

/*
複数行の
コメント
*/

// background(0); コメントアウト

// 初期化
function setup() {
  createCanvas(400, 400);// タテヨコ 400px の canvas を作成
}

// 描画ループ
function draw() {
  background(220);// 背景をグレーに塗る
  // background(200); コメントアウト
}