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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
python3简单实现微信爬虫
2015/04/09 Python
python函数局部变量用法实例分析
2015/08/04 Python
pyqt5自定义信号实例解析
2018/01/31 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
基于keras中的回调函数用法说明
2020/06/17 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
python二维图制作的实例代码
2020/12/03 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
售后主管岗位职责
2013/12/08 职场文书
教师自我鉴定
2013/12/13 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers