p5.js入门教程之鼠标交互的示例


Posted in Javascript onMarch 16, 2018

本文介绍了p5.js入门教程之鼠标交互的示例,分享给大家,具体如下:

一、鼠标交互常用关键词

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
Jquery倒计时源码分享
May 16 Javascript
JS控制输入框内字符串长度
May 21 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
JS中的phototype详解
Feb 04 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 #Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 #Javascript
vue-router相关基础知识及工作原理
Mar 16 #Javascript
axios post提交formdata的实例
Mar 16 #Javascript
在vue组件中使用axios的方法
Mar 16 #Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 #Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 #Javascript
You might like
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
Git命令之分支详解
2021/03/02 PHP
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
django定期执行任务(实例讲解)
2017/11/03 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
python实现定时发送qq消息
2019/01/18 Python
Python docx库用法示例分析
2019/02/16 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python实现中值滤波去噪方式
2019/12/18 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
python的launcher用法知识点总结
2020/08/07 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
物业工作计划书
2014/01/10 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
大学英语专业求职信
2014/06/21 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
2015年公务员工作总结
2015/04/24 职场文书
怒海潜将观后感
2015/06/11 职场文书
服务器间如何实现文件共享
2022/05/20 Servers