p5.js入門教程之鼠標交互的示例
本文介紹了p5.js入門教程之鼠標交互的示例,分享給大家,具體如下:
一、鼠標交互常用關(guān)鍵詞
p5.js提供了許多鼠標操作用的關(guān)鍵詞與函數(shù),常用的有:
mouseIsPressed:關(guān)鍵詞,若鼠標按下則為true,反之為false
mouseButton:關(guān)鍵詞,用來判斷鼠標按下的是哪個鍵
案例如下:
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
二、鼠標交互常用函數(shù)
鼠標操作常用函數(shù)如下,還有:
mouseClicked():函數(shù),鼠標點擊時觸發(fā)一次
mousePressed():函數(shù),鼠標按下時觸發(fā)一次
mouseReleased():函數(shù),鼠標松開時觸發(fā)一次
我們可以用這些函數(shù)控制何時在屏幕上顯示圖形,案例如下:
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
三、鼠標拖拽物體
靈活運用以上關(guān)鍵字和函數(shù),可以做出許多功能,這里舉一例,用鼠標拖拽物體。
代碼如下:
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
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析
這篇文章主要介紹了JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法,結(jié)合實例形式分析了JavaScript圖片上傳、編碼轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2020-02-02抽出www.templatemonster.com的鼠標懸停加載大圖模板的代碼
抽出www.templatemonster.com的鼠標懸停加載大圖模板的代碼...2007-07-07JS動態(tài)添加元素及綁定事件造成程序重復執(zhí)行解決
這篇文章主要給大家介紹了關(guān)于JS動態(tài)添加元素及綁定事件造成程序重復執(zhí)行的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-12-12JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之基本排序算法定義與效率比較【冒泡、選擇、插入排序】
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之基本排序算法定義與效率比較,結(jié)合實例形式詳細總結(jié)分析了javascript排序算法中的冒泡、選擇、插入等排序算法原理與操作技巧,需要的朋友可以參考下2019-02-02