動くスケッチ・ソースコード

1. よく使うリンク

2. 流れを制御する重の関数

p5.jsは、setupとdrawと名付けられた関数を期待しています。自分のスケッチでは、このように定義します。

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

function draw() {
  background(220);
}

setupは、スケッチ初期化の時に1度だけp5.jsによって実行される（呼び起こされる）。

drawは、画面の1コマ1コマが描かれるたびに実行されます。

createCanvas

Processingやp5.jsは、長方形（もしくは正方形）にものを描きます。

その正方形の横と縦の大きさを、 createCanvas 関数を使うことで設定します。

関数とは何かのやり方をプログラムの中でまとめたものです。 createCanvas とは、p5.jsで用意されている関数の名前です。この関数の中身（やること、効果など）を確認しなくてもよくて、使うことだけに慣れましょう。

関数を使う（呼び出す）時は、関数の名前の次に、関数に渡したい情報をかっこに囲います：

createCanvas(横幅, 縦長);

createCanvas(640, 480); を実行すると、640ドットx480ドットの横長の長方形が出現します。

3. background (背景)

background関数を呼ぶと、キャンバスごとを単色に塗りつぶすことができます。

background(色);

drawの始まりに呼ぶことで、前のコマ（フレーム）の中身を消す効果も得られます。

色の指定はさまざまな方法で可能です。

数値1つ：モノクロ

0〜255の数値を色として扱うと、黒〜白という色になります。

数値が大きくなると色が明るく（薄く）なるので、この数値を明るさと読んでもいいでしょう。

数値3つ：RGB

光の三原色（赤緑青ことRGB）のそれぞれの明るさを3つの数値として色を表します。

16進

ウェブデザインなどでお馴染みの方に便利な使い方です。上記の数値3つを16進として表したものを文字列にして、頭に # を付けます。

慣れている方、使えます。どこかで見てわからなかった方、こういうことです。無理に使う必要ありません。

4. ellipse (丸)

引数として数値を4つ取ります：

例：xが200、yが200のところに、100x100ドットという大きさの丸を描きます。

ellipse(300, 200, 100, 100);

ついでに：wとhが一緒になっているので円形になっています。wとhが異なる場合は、楕円になります。

5. rect (四角)

引数として数値を4つ取ります：

例：xが150、yが250のところ（左上の角）から、100x150ドットという大きさの四角を描きます。

rect(300, 200, 50, 100);

ついでに：wとhが異なるので高方形になっています。wとhが一緒の場合は、正方形になります。

6. line（線）

引数として数値を4つ取ります：

例：xが150、yが250のところから、xが50、yが300のところまでの直線を描きます。

line(100, 50, 300, 80);