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

本文介绍了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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • p5.js入门教程之键盘交互

    一.键盘交互相关关键词与函数 keyIsPressed: 关键词,按下按键时为true,反之为false keyCode: 关键词,用于判断按下哪个按键 keyPressed():函数,按键按下时触发一次 keyReleased():函数,按键松开时触发一次 keyIsDown():函数,按下指定按键时返回true,反之为false 以下是一个较综合的案例,用wsad与zxcv控制小球移动: var x=200; var y=200; var speed=2; function setup()

  • p5.js入门教程和基本形状绘制

    一.什么是p5.js 最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js. 主讲老师就是开发者之一--还是挺激动的. p5.js是一个为艺术家.设计师而开发的Javascript库,可以看作是Processing的Web版本.如果有Processing学习经验的话,p5.js上手会非常快. 至于p5.js有什么用,这个问题很难回答,因为我本身也是个初学者. 我目前觉得p5.js是一个很好的激发创意的工具,并且你可以将p5.js的内容嵌入网页,让你的网站更炫. 二

  • p5.js入门教程之平滑过渡(Easing)

    一.跟随鼠标移动的小球 使用mouseX,mouseY可以创建一个跟随鼠标移动的小球. function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX,mouseY,20,20); } 二.让小球更加平滑的移动--使用Easing 一般制作精良的UI界面都会用到平滑移动这一效果,也就是利用了名为"Easing"的方法. 实现思路是另外设置变量以进行位置的过渡,代

  • p5.js入门教程之小球动画示例代码

    一.运动的小球 本节将用p5.js做一个在屏幕上运动的小球. 思路是用变量记录小球的位置,然后在draw()函数里对其做出改变,由于draw()函数会不断地运行(频率为FPS,默认60帧/秒),所以小球便产生了运动. 代码如下: var x=0; function setup() { createCanvas(400, 400); } function draw() { background(220); //width和height是关键词,分别是Canvas的宽和高 x+=2; ellipse

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

    本文介绍了p5.js入门教程之鼠标交互的示例,分享给大家,具体如下: 一.鼠标交互常用关键词 p5.js提供了许多鼠标操作用的关键词与函数,常用的有: mouseIsPressed:关键词,若鼠标按下则为true,反之为false mouseButton:关键词,用来判断鼠标按下的是哪个键 案例如下: function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed

  • p5.js入门教程之图片加载

    一.preload()函数与图片上传 preload()函数是一个特殊的函数,它同setup()类似,只在程序开始时运行一次,但顺序在setup()之前. 一般我们会将媒体文件(图片.声音)加载的语句放在preload()中,因为preload()有一个特性就是不加载完毕,程序就不会开始,保证了程序运行时不会出错. 在加载图片之前,我们需要先将图片文件上传. 方法是: ①点击编辑器左上角的小三角展开文件目录. ②点击文件目录右上角小三角,展开菜单后Add File. ③可以直接将图片文件拖到框里

  • THREE.JS入门教程(1)THREE.JS使用前了解

    Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. 国外网站 aerotwist.com 有六篇较为简单的入门教程,我尝试着将其翻译过来,与大家分享. 我在一些实验项目中使用了Three.js,我发现它对快速上手浏览器3D编程确实很有帮助.通过Three.js,你不仅可以创建相机.物体.光线.材质等等,还可以选择

  • node.js入门教程

    node.js入门教程

    Node是个啥? 写个东西还是尽量面面俱到吧,所以有关基本概念的东西我也从网上选择性的拿了些下来,有些地方针对自己的理解有所改动,对这些概念性的东西有过了解的可选择跳过这段. 1.Node 是一个服务器端 JavaScript 解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不深我还不知道,不过确实不浅. 2.Node 的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码.处理高并发和异步I/O是Node

  • node.js入门教程迷你书、node.js入门web应用开发完全示例

    本书状态 你正在阅读的已经是本书的最终版.因此,只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时,才会进行更新. 本书中的代码案例都在Node.js 0.6.11版本中测试过,可以正确工作. 读者对象 本书最适合与我有相似技术背景的读者: 至少对一门诸如Ruby.Python.PHP或者Java这样面向对象的语言有一定的经验:对JavaScript处于初学阶段,并且完全是一个Node.js的新手. 这里指的适合对其他编程语言有一定经验的开发者,意思是说,本书不会对诸如数据类型

  • 适用于javascript开发者的Processing.js入门教程

    这个入门指导是为javascript开发者写的.读这个文档之前,你最好掌握javascript和web开发编程,并还会非常基本的 Processing 知识. 目录: 为没有耐心看长篇大论的人准备:          如果你很着急入门,那么你就需要知道以下几点:              1.Processing.js 把 Processing 代码转变成能够在浏览器端运行的javascript代码,实质是通过<canvas>标签来实现绘图的:              2.为了使用它,你的首

随机推荐