【p5.js】マウスの座標を取得してインタラクティブなものを作る:mouseX,mouseY

マウスの座標を取得して、インタラクティブなものを作ります。マウスの状態によって処理を変更したり、クリックされたときの処理の書き方を見ていきます。マウスの座標を取得できると動きのあるものが作れるようになるので、楽しくなると思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

mouseX,mouseY:マウスの座標を取得する

• mouseX:マウスのx座標
• mouseY:マウスのy座標

マウスの座標をコンソールに出力して値を確認する。

function setup(){
  createCanvas(200, 200);
  background(127);
}

function draw(){
  //mouseX,mouseYの値をコンソールに出力
  console.log(`x:${mouseX}, y:${mouseY}`);
}

x:93, y:92
x:96, y:103
x:97, y:113
x:97, y:121
x:120, y:68

コンソール画面に上記のように表示されることを確認する。

マウスの位置に図形を描画する

マウスの座標を取得できることが分かったので、その位置に図形を描画する。

function setup(){
  createCanvas(200, 200);
  noStroke();
}

function draw(){
  background(127);
  ellipse(mouseX, mouseY, 50, 50);
}

mouseIsPressed:マウスの状態を取得する

マウスがクリックされているかどうかを取得する。ここでは、マウスがクリックされているときに、塗りの色を変える。

function setup(){
  createCanvas(200, 200);
  noStroke();
}

function draw(){
  background(127);

  if(mouseIsPressed){
    fill('green');
  }else{
    fill('white');
  }

  ellipse(mouseX, mouseY, 50, 50);
}

mousePressed():クリックされたときの処理を記述する

クリックされたら円の半径を大きくする。

let r = 50;

function setup(){
  createCanvas(200, 200);
  noStroke();
}

function draw(){
  background(127);

  if(mouseIsPressed){
    fill('green');
  }else{
    fill('white');
  }

  //ellipse(mouseX, mouseY, 50, 50);
  ellipse(mouseX, mouseY, r, r);
}

//クリックされたときの処理
function mousePressed(){
  r+= 10;
  return false; //ブラウザのデフォルトの動作を無効化する
}

まとめ

• mouseX, mouseY:マウスのxy座標
• mouseIsPressed:マウスの状態を取得する
• mousePressed():クリックされたときの処理を記述する

参考サイト

• p5.js入門 (全14回) - プログラミングならドットインストール