イベント

マウス位置

mouseX, mouseY

マウスの位置が格納されている変数です。

sample


function setup(){
  createCanvas(300,130);
}
function draw(){
  background(200);
  var r = dist(mouseX, mouseY, 50,50);
  ellipse(mouseX, mouseY, r);
  text("mouseX:" + str(mouseX), mouseX - 20, mouseY);
  text("mouseY:" + str(mouseY), mouseX - 20, mouseY + 15);
}

pmouseX, pmouseY

1フレーム前のマウスの位置が格納されている変数です。

sample


function setup(){
  createCanvas(300,130);
}
function draw(){
  background(200);
  line(pmouseX, pmouseY, mouseX, mouseY);
}

マウス状態

mouseIsPressed

マウスの左クリックが押されているときにtrueを返し、そうでないときfalseを返します。

sample


function setup(){
  createCanvas(300,130);
}
function draw(){
  if(mouseIsPressed){
    background("red");
  }else{
    background(200);
    text("Click me", 100, 70)
  }
}

マウスイベント

mouseClicked

マウスの左クリックが、押されて離したタイミングで処理が実行される関数です。


function mouseClicked(){処理}

処理: マウスがクリックされた後実行する処理

sample


var c = 255;
function setup(){
  createCanvas(300,130);
  background(c);
}
function mouseClicked(){
  c = 255 - c;
  background(c);
}

mousePressed

マウスの左クリックが押されたタイミングで処理を実行


function mousePressed(){処理}

処理: マウスがクリックされたタイミングで実行する処理

sample


var c = 255;
function setup(){
  createCanvas(300,130);
  background(c);
}
function mousePressed(){
  c = 255 - c;
  background(c);
}

doubleClicked

マウスがダブルクリックされたときに処理を実行する関数です。


function doubleClicked(){処理}

処理: ダブルクリック後に実行される処理

sample


var c = 255;
function setup(){
  createCanvas(300,130);
  background(c);
}
function mousePressed(){
  c = 255 - c;
  background(c);
}