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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
js中this的用法实例分析
Jan 10 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
如何在selenium中使用js实现定位
Aug 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
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP培训要多少钱
2017/06/06 PHP
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python计算日期之间的放假日期
2018/06/05 Python
python实现飞机大战
2018/09/11 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
python 表格打印代码实例解析
2019/10/12 Python
python如何基于redis实现ip代理池
2020/01/17 Python
python中实现栈的三种方法
2020/12/19 Python
跳蚤市场口号
2014/06/13 职场文书
工作目标责任书
2014/07/23 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
党支部评议意见
2015/06/02 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript