クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

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

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

【目次】

※参考:前回の記事
【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);
}
  • mouseDragged()関数を作ってdraw()にあった円の描画設定を入れる
  • 背景リセット設定はmousePressed ()からdoubleClicked()関数に変更する

mouseDragged()doubleClicked()についてはこちらを参照

※参考:p5.js | reference
※参考:p5.js | reference

でもスマホだとうまく動かないかも。「Touch」系の関数も検討すべきかも。

最後に

f:id:idr_zz:20191230204449p:plain

ということでp5.jsを使ってペイントアプリを作って見ました。Coding Train p5.jsシリーズ、先はまだまだ長いですが、やっていきたいシリーズなので引き続きよろしくお願いします。それではまた!


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