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 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python re模块介绍
2014/11/30 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python中import学习备忘笔记
2017/01/24 Python
python发送邮件脚本
2018/05/22 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
教师实习自我鉴定
2013/12/14 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
党员个人承诺书
2015/04/27 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
Python中for后接else的语法使用
2021/05/18 Python
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS