【p5.js】変数mouseX、mouseYを使ってペイントアプリを作る：Coding Train(p5.js2.1)

p5.jsの続きです。CodingTrainのp5.jsチュートリアル、前回（1.6）までは静止画の描画でした。2.1からはいよいよアニメーションに入っていきます。今回はp5.js組み込みの変数を使って簡易なペイントアプリを作って見ます。それでは行きましょう！

【目次】

2.1: Variables in p5.js (mouseX, mouseY) - p5.js Tutorial
setup()とdraw()（静止画描画の基本）
mouseXでマウスの横位置を取得する
background()をsetup()に移動して残像効果
mouseYでマウスの縦位置を取得する
円の透明度、線、サイズを調整
mousePressed()でマウスを押すとリセット
おまけ：mouseDragged()で描画、doubleClicked()でリセット
最後に

※参考：前回の記事
【p5.js】色の基本、コメントとエラー、コメント：Coding Train(p5.js1.4〜1.6) - クモのようにコツコツと

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

2.1: Variables in p5.js (mouseX, mouseY) - p5.js Tutorial

この動画から静止画の描画ではなくアニメーションに入っていく。

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

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

さらに

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

setup()とdraw()（静止画描画の基本）

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

円と四角が描かれている。

JSコード

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

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

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

setup()は一度切り、draw()はループ、という役割がポイント

mouseXでマウスの横位置を取得する

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);
}

draw()のellipse()の第一引数をmouseXに

mouseXはp5.jsに最初から組み込まれている変数でマウスの横位置を取得する。

background()をsetup()に移動して残像効果

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

円が残像のように残り続けながら動く！

function setup() {
    createCanvas(600,400);
    //背景
    background(250,250,100); //移動
}

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

draw()にあったbackground()をsetup()に移動する

背景が最初の一度描かれのみのため、円の描画がリセットされずに残り続ける。

mouseYでマウスの縦位置を取得する

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

円が縦にも動くようになった！

function setup() {
    createCanvas(600,400);
    //背景
    background(250,250,100);
}

function draw() {
    //円
    fill(250,200,200);
    ellipse(mouseX,mouseY,100,100); //変更
    //四角
    //fill(250,250,200);
    //rect(400,100,50,50);
}

draw()のellipse()の第2引数をmouseYに
四角を設定するfill()、rect()は不要なので削除する

mouseYもp5.jsの組み込み変数で、マウスの縦位置を取得する。これによって円が縦にも動くようになった！

円の透明度、線、サイズを調整

円を調整してペイントアプリのように絵を描けるようにする。

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

円に線がなくなって、透明設定がついて、サイズも小さくなった。

function setup() {
    createCanvas(600,400);
    //背景
    background(250,250,100);
}

function draw() {
    //円
    noStroke(); //追加
    fill(250,200,200,50); //変更
    ellipse(mouseX,mouseY,25,25); //変更
}

draw()の冒頭にnoStroke()を追加して線を消す
draw()のfill()に第4引数でアルファ（不透明度）設定を追加
draw()のellipse()の第3〜4引数で円のサイズを変更

mousePressed()でマウスを押すとリセット

このままだと線が増えるばかりなのでリセット設定を追加する。

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

画面をクリックするとリセットされて絵が消える。

JSコード

function setup() {
    createCanvas(600,400);
    //背景
    background(250,250,100);
}

function draw() {
    //円
    noStroke();
    fill(250,200,200,50);
    ellipse(mouseX,mouseY,25,25);
}

function mousePressed() {
    //背景リセット
    background(250,250,100);
}

mousePressed()の中に背景のリセット設定を入れる。

p5.jsにはsetup()とdraw()以外にも組み込みの関数がある。mousePressed()についてはこちらを参照

※参考：p5.js | reference

おまけ：mouseDragged()で描画、doubleClicked()でリセット

このままだと一筆描きのように線を区切れないので、動画にはないが別の関数でアレンジした。

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

マウスをドラッグしている間だけ線が描かれるようにした。

function setup() {
    createCanvas(600,400);
    //背景
    background(250,250,100);
}


function draw() {
    //円
    noStroke();
}

//ドラッグ
function mouseDragged() {
    fill(250,100,200,50);
    ellipse(mouseX,mouseY,10,10);
    
}

//Wクリック
function doubleClicked() {
    //背景リセット
    background(250,250,100);
}