p5.js入門教程(4) 滑鼠互動
阿新 • • 發佈:2019-01-26
一、滑鼠互動常用關鍵詞
p5.js提供了許多滑鼠操作用的關鍵詞與函式,常用的有:
mouseIsPressed:關鍵詞,若滑鼠按下則為true,反之為false
mouseButton:關鍵詞,用來判斷滑鼠按下的是哪個鍵
案例如下:
function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed) { textAlign(CENTER); textSize(30); if (mouseButton == LEFT) text("LEFT",200,height/2); if (mouseButton == RIGHT) text("RIGHT",200,height/2); if (mouseButton == CENTER) text("CENTER",200,height/2); } }
當滑鼠按下左、中、右鍵時,分別會在螢幕上顯示“LEFT”、“CENTER”、“RIGHT"。
檢視效果:
http://alpha.editor.p5js.org/full/BkEcwrdUb
二、滑鼠互動常用函式
滑鼠操作常用函式如下,還有:
mouseClicked():函式,滑鼠點選時觸發一次
mousePressed():函式,滑鼠按下時觸發一次
mouseReleased():函式,滑鼠鬆開時觸發一次
我們可以用這些函式控制何時在螢幕上顯示圖形,案例如下:
var showEllipse=false; var showRect=false; function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed){ ellipse(50, height/2, 50, 50); } if(showEllipse){ ellipse(200, height/2, 50, 50); } if(showRect){ rectMode(CENTER); rect(350,height/2,50,50); } } function mouseClicked(){ showEllipse=!showEllipse; } function mousePressed(){ showRect=true; } function mouseReleased(){ showRect=false; }
檢視效果:
http://alpha.editor.p5js.org/full/BkHEY8OUZ
三、滑鼠拖拽物體
靈活運用以上關鍵字和函式,可以做出許多功能,這裡舉一例,用滑鼠拖拽物體。
程式碼如下:
var x=200; var y=200 var r=50; function setup() { createCanvas(400, 400); } function draw() { background(220); if(mouseIsPressed&&dist(mouseX,mouseY,x,y)<r){ x=mouseX; y=mouseY; } ellipse(x,y,r,r); }
檢視效果:
http://alpha.editor.p5js.org/full/SJ6gbPdLb