【p5.js】変数を上書き、変数にオブジェクトを設定：Coding Train(p5.js2.2-3)

p5.jsの続きです。ダン先生のCoding Train、前回からいよいよアニメーション編に入り、p5.jsの組み込みメソッドを使って簡単なお絵描きアプリを作りました。今回はp5.jsの基本的な書き方として変数とオブジェクトについて解説しています。これはJSの基本でもある部分です。それではいきましょう！

【目次】

2.2: Variables in p5.js (Make your own) - p5.js Tutorial
2.3: JavaScript Objects - p5.js Tutorial
- 変数設定を増やす
- オブジェクを作る
変数呼び出しをオブジェクト呼び出しに
- 色々打ち替えてみる
最後に

前回の記事
※参考：【p5.js】変数mouseX、mouseYを使ってペイントアプリを作る：Coding Train(p5.js2.1) - クモのようにコツコツと

※参考：p5.jsを習得するためにやった事まとめ
qiita.com

2.2: Variables in p5.js (Make your own) - p5.js Tutorial

動画

「Coding Train」の2.2の回を見ていく。

まずは字幕の設定を日本語に変更する。

歯車＞字幕＞「英語-CC(English)」に変更

さらに

歯車＞字幕＞自動翻訳＞日本語

前回のおさらい

前回、の事例。こちらをベースにする。

See the Pen p5.js 2.1-2 by イイダリョウ (@i_ryo) on CodePen.

マウスの位置に合わせて円が横に動いている。

JSコード

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

function draw() {
    //背景
    background(250,250,100);
    //円
    fill(250,200,200);
    ellipse(mouseX,100,100,100);
    //四角
    fill(250,250,200);
    rect(400,100,50,50);
}

関数setup()は最初の1回に行われる
関数draw()は繰り返しループされる
setup()でキャンパスを設定
draw()のbackground()で背景色
draw()の最初のfill()は円の色、ellipse()関数は円の位置、サイズ
draw()の次のfill()で四角の色。rect()関数は四角の位置、サイズ

円のfill()の第一引数mouseXはp5.jsの組み込み変数でマウスの横位置を取得している。その変更したマウスの位置を円の横位置に代入している。そして、draw()のループのたびに再描画しているため、円が横に動いて見える。

変数を全て固定値に

mouseXをなくして、一旦すべてを固定値にする。

See the Pen p5.js 2.2-1 by イイダリョウ (@i_ryo) on CodePen.

円は動かなくなってしまう。

JSコード

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

function draw() {
    //背景
    background(250,250,100);
    //円
    fill(250,200,200);
    ellipse(50,100,100,100);
}

四角（rect()）は今回は不要なので削除した
ellipse()の第一引数をmouseXではなく固定値の50に

これで一旦、円の位置は固定されている。

変数を設定する

冒頭に変数を設定し、四角の位置に代入

See the Pen p5.js 2.2-2 by イイダリョウ (@i_ryo) on CodePen.

見た目の動きは変わらない。

let circleX = 50;

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

function draw() {
    //背景
    background(250,250,100);
    //円
    fill(250,200,200);
    ellipse(circleX,100,100,100);
}

変数circleXに50を代入
ellipse()の第一引数でcircleXを読み込む

ellipse()の第一引数にもともと入っていた値50を変数circleXに代入しており、その変数circleXをまた読み込んでいるので、結果は同じにしかならない。

変数の上書きで右に移動する

ここにとある変更を加えることで円が動き出す！

See the Pen p5.js 2.2-3 by イイダリョウ (@i_ryo) on CodePen.

JSコード

let circleX = 50;

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

function draw() {
    //背景
    background(250,250,100);
    //円
    fill(250,200,200);
    ellipse(circleX,100,100,100);
    //右に移動
    circleX = circleX +1;
}

draw()の一番最後の行で変数circleXにcircleX自身にプラス1を加えた数値を代入

この変数に自分自身と1を加えた数値を代入するところをダン先生は「これは奇妙！」と表現している。「5は6ではない、20は21ではないはず！」と。

そう、プログラミング初学者がこの=を数学の「等しい」のように捉えると確かにそう感じる！これは等しい、ではなく代入する、という意味で、値が上書きされる。

draw()はそれ自体が処理を何度もループし続けるメソッドのため、いつもfor文の中に書いているような処理をここに1行書くだけで繰り返し処理される。

constで設定するとうまく動かない！

先程の変数をconstで定義するとうまく動かない！

See the Pen p5.js 2.2-3-ng by イイダリョウ (@i_ryo) on CodePen.

JSコード

const circleX = 50;

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

function draw() {
    //背景
    background(250,250,100);
    //円
    fill(250,200,200);
    ellipse(circleX,100,100,100);
    //右に移動
    circleX = circleX +1;
}

変数circleXをletではなくconstで宣言している

constは再定義できない厳密な変数（定数ともいう）のため、draw()のループの中で上書きができずエラーになる。

letとconstの違いについてはこちらも参照。

※参考：【JS】変数 varとletとconst（再代入、再宣言の挙動の違い） - クモのようにコツコツと

2.3: JavaScript Objects - p5.js Tutorial

Coding Train「2.2」はシンプルだったんで次の動画も見てみる。こちら。

こちらも字幕の設定を日本語に変更する。

歯車＞字幕＞「英語-CC(English)」に変更

さらに

歯車＞字幕＞自動翻訳＞日本語

変数設定を増やす

See the Pen p5.js 2.3-1 by イイダリョウ (@i_ryo) on CodePen.

JSコード

//円
let x = 0;
let y = 200;
let diameter = 218;
//背景
let r = 218;
let g = 160;
let b = 221;


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

function draw() {
    //背景
    background(r, g, b);
    //円
    fill(250, 200, 200);
    ellipse(x, y, diameter, diameter);
    //右に移動
    x = x +1;
}

変数x、変数y、変数diameter、変数r、変数g、変数bを設定
background()の引数でr、g、bを読み込む
ellipse()の引数でx、y、diameter、diameterを読み込む

diameterは直径という意味らしい。それぞれ、名前で推測できる場所の値を設定して、意図通りの色と動きをしてくれている。

しかし、こうやって変数がだんだん増えていくと直感的ではなくなってくる。

オブジェクを作る

上記のような事態にならないため、オブジェクトを作ろう！とダン先生は言っている。

しかし、作っただけではエラーになる。。

See the Pen p5.js 2.3-2(ng) by イイダリョウ (@i_ryo) on CodePen.

背景しかない。円が現れない。。

JSコード

//円のオブジェクト
let circle = {
    x: 0,
    y: 200,
    diameter: 218
}

//背景
let r = 218;
let g = 160;
let b = 221;


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

function draw() {
    //背景
    background(r, g, b);
    //円
    fill(250, 200, 200);
    ellipse(x, y, diameter, diameter);
    //右に移動
    x = x +1;
}

変数circleにオブジェクトを設定。中にx、y、diameterの3つのキーを設定。

circleのオブジェクトは連想配列でブロックの中はキーと値のペアになっている。

draw()メソッドの中はまださっきの変数を呼び出す書き方のため、「変数が見つからない」とエラーになる。

これをオブジェクトのキーを呼び出す書き方に変える必要がある。

変数呼び出しをオブジェクト呼び出しに

変数呼び出しをオブジェクト呼び出しの書き方に変えた。

See the Pen p5.js 2.3-2(ok) by イイダリョウ (@i_ryo) on CodePen.

おお、円が現れて右に動いている！

JSコード

//円のオブジェクト
let circle = {
    x: 0,
    y: 200,
    diameter: 218
}

//背景
let r = 218;
let g = 160;
let b = 221;


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

function draw() {
    //背景
    background(r, g, b);
    //円
    fill(250, 200, 200);
    ellipse(
        circle.x, 
        circle.y, 
        circle.diameter, 
        circle.diameter
    );
    //右に移動
    circle.x = circle.x +1;
}

draw()の中のellipse()の引数、変数名（xなど）の前にcircle.を追記する

これだけでcircleオブジェクトのxキーの値を読み出す、という意味に変化する。

色々打ち替えてみる

挙動を確認するため、色々打ち替えてアレンジを加えてみた。

See the Pen p5.js 2.3-3 by イイダリョウ (@i_ryo) on CodePen.

さっきより大きな円が現れて

JSコード

//円のオブジェクト
let circle = {
    x: 30,
    y: 170,
    diameter: 300
}

let circleClor = {
    r: 300,
    g: 100,
    b: 70
}

//背景
let bgColor = {
    r: 218,
    g: 160,
    b: 221
}

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

function draw() {
    //背景
    background(
        bgColor.r, 
        bgColor.g, 
        bgColor.b
    );
    //円
    fill(
        circleClor.r, 
        circleClor.g, 
        circleClor.b
    );
    ellipse(
        circle.x, 
        circle.y, 
        circle.diameter, 
        circle.diameter
    );
    //右に移動
    circle.x = circle.x +5;
}