3_1：p5.js 変数

変数は、後からプログラムで利用できるようにするために、メモリに値を保持します。変数は１つのプログラム内で何度でも使用でき、その値はプログラムの実行中に簡単に変更できます。変数を使用する大きな理由は、コード内での同じことの繰り返しを避けるためです。

p5.jsには独自のシステム変数があります。これはp5.jsが自動的に値を設定するもので、プログラム内では同じ名前の変数を使ってはいけません。よく使用されるものに、widthとheight、mouseXとmouseYがあります。

width

説明

描画するキャンバスの幅を保持するシステム変数。この値はcreateCanvas()関数の１つめのパラメータによって設定される。たとえば、createCanvas(320, 240)という関数呼び出しはwidth変数を値320に設定する。プログラムでcreateCanvas()が使用されない場合には、widthの値はデフォルトで100に設定される(p5.jsのデフォルトキャンバスは幅が100で作成される、ということ)。

シンタックス

width

height

説明

widthと同様。

---

キャンバスを作成しない場合には、p5.jsのデフォルトキャンバスが100 x 100のサイズで作成され、システム変数widthとheightにはそれぞれ100が代入されます。

function setup() {
    console.log(width); // 100
    console.log(width); // 100
}

---

mouseX

説明

システム変数のmouseXは、キャンバスの(0, 0)を基準とする、マウスの現在の水平方向の位置を保持する。マウス入力でなくタッチが使用されている場合には、mouseXは最も直近のタッチポイントのx値を保持する。

シンタックス

mouseX

mouseY

説明

mouseXと同様

---

自動的に繰り返し呼び出されるdraw()関数内で、点(0, mouseY)から点(100, mouseY)までの線を描画すると、マウスポインタに追随する水平方向の線が作成できます。

function draw() {
    background(244, 248, 252);
    line(0, mouseY, 100, mouseY);
}