学习p5.js – 第六章 p5.js中的更多变量

Coding Alan 2年前 (2019-02-02) 3782次浏览 0个评论 扫描二维码

在上一章中,我们学习了p5.js中的frameCount变量,用于表示draw函数调用的次数。p5.js中有很多非常有用的变量,本章中将继续学习一些其它的变量。

mouseIsPressed

mouseIsPressed是我们将学习的第一个用于在程序中交互的p5.js 变量。mouseIsPressed是一个p5.js变量,在鼠标点击画布区时值为true,否则为false。下面我们修改第四章中的一个例子(示例4-10)来看看如何使用该变量(示例6-1)。

示例6-1. 按条件在圆内显示矩形

在画布区中点击鼠标就会在圆形中显示矩形。通过使用p5.js的mouseIsPressed变量,我们实现了矩形按鼠标点击的条件来显示。

通过鼠标点击来切换状态可能可能是一个更现实的例子。下面我们就来看看如何处理。假设我们希望每次点击鼠标时改变背景颜色。在示例6-2中,我们将在两种颜色间进行切换。

示例6-2. 点击鼠标切换显示

本例中,我们创建了一个名为toggle的全局变量,存放布尔值。然后我使用感叹号来在点击鼠标时对布尔值取反。在布尔值前加感叹号会对值取反,表示会将true变为false,反之亦然。

你可能注意到变量mouseIsPressed在捕捉点击时运作的并不是很好。这是因为draw函数在一秒内会被调用很多次,这使用用条件语句监测鼠标点击变得很难。后面我们学习使用p5.js事件来更好的监测鼠标点击。

mouseX和mouseY

p5.js的变量mouseX存储鼠标当前的水平位置,mouseY存储当前的垂直位置。这听起来很简单,但有机会在我们的程序中启用大量的用户交互,因此是非常有用的变量。如果我们将它们设置为形状的x和y坐标值,就可以在屏幕中通过移动鼠标来移动形状的位置。

我们来通过以上程序(示例6-1)的简化版本进行尝试。示例6-3和图6-1显示一个屏幕中间画出圆形的版本。

示例6-3. 在屏幕中间画出简单的圆形

学习p5.js – 第六章 p5.js中的更多变量

图6-1. 画圆

我们使用mouseX来mouseY来在示例6-4中设置x和y值。

示例6-4. 使用变量mouseX和mouseY

试着在画布上移动鼠标,是不是很棒?通过两个内置变量,我们将原本静态的图变成可与用户进行交互。

你有没有会奇怪为什么在draw函数内设置background函数?看起来我们只需要设置一次值,所以你可能会觉得应该在setup函数中进行设置。

将background函数放在draw函数内让我们可以将之前帧中的绘画覆盖为纯色。如不在帧的起始处进行该声明,你会看到之前的帧会一直保持在屏幕上。但在某些用例中,我们会需要进行这一设置。

示例6-5和图6-2类似前面的例子(示例6-4)),圆的尺寸更小、图形颜色透明度更低,并且background仅在setup函数中声明一次。

示例6-5. 屏幕上绘图的持久显示

学习p5.js – 第六章 p5.js中的更多变量

图6-2. 使用变量mouseX和mouseY在屏幕上绘制

总结

在本章中,我们学习了p5.js中的更多内置变量,帮助我们创建可交互的程序:可对用户操作进行响应的程序。

我们学习了p5.js变量mouseIsPressed,在鼠标点击时值为true。我们还了解到该变量不是用处理用户输入的一个好的方式。我们之后我了解p5.js中事件的概念,可更好的处理用户输入。

我们还用到了mouseX和mouseY变量,使用它们根据鼠标位置来给对象添加动画,这让我们以更便利的方式来设置更多的交互。

练习

创建一个脚本,在鼠标点击的位置绘制矩形。

译者补充,仅供参考:

学习p5.js – 第六章 p5.js中的更多变量

 

喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址