Processing编程学习指南3.3 跟随鼠标移动
3.3 跟随鼠标移动
思考下:如果在绘制图形的函数中,我们并不输入具体数值,而是输入“鼠标的横坐标”(the mouse抯 x location)或者“鼠标的纵坐标”(the mouse抯 y location),会发生什么?
实际上,在代码中,你不能直接使用上述过于具体的描述性语言,你必须使用关键词mouseX和mouseY来描述鼠标的横坐标和纵坐标。
示例3-2:mouseX和mouseY
练习3-3:当你把background()函数移动到setup()中去以后,解释下为什么你会看到一长串的矩形。
一行隐形代码
如果你紧紧遵循setup()和draw()的运行逻辑去思考,可能会发现一个非常有趣的问题:Processing到底是什么时候在窗口上显示由代码绘制的图形?新的像素是什么时候出现的?
乍看之下,你可能会认为只要是绘图功能的函数,Processing会在每一行代码运行完毕后即刻更新图形。可如果是这样的话,每次运行完一个绘图的函数,你就会在屏幕上看到一次图形更新。Processing更新如此之快,以至于每个图形每次更新的时候你根本不可能看得到。每次调用background()函数,窗口就会被擦除清空一次,这样就会产生一个有些让人苦恼的结果:闪烁。
Processing解决这个问题的办法是:在整个draw()中所有函数计算完毕后才刷新,而不是运算一个函数就刷新一次。这样的话,就好像在draw()函数的末尾有一行隐形的代码来控制窗口的图形渲染。
这就是所谓的双缓冲机制(double-buffering)。而在一个低端的环境中,你会发现必须亲自去执行它。我想花点时间再次感谢Processing,它让编程界面更加友好和简单,因为它已经为我们做好了这一切。
还有一点需要注意的是,使用stroke()函数和fill()函数设置的任何颜色,都会在draw()中的下一个循环中继续存在。
我可以进一步应用这个想法创建一个示例,这是一个更加复杂的由mouseX和mouseY位置所控制的示例(由多个形状和色彩构成)。例如,接下来我会改写Zoog,让其跟随鼠标的运动轨迹。在这个示例中,Zoog身体的中心点就是鼠标的位置坐标(mouseX,mouseY),而Zoog身体的其余部分位置则是和鼠标位置保持一个相对不变的距离。譬如Zoog的头部,其位置坐标为(mouseX,mouseY-30)。下面的这个案例只是移动了Zoog的身体和头部,如图3-5所示。
示例3-3:将Zoog变为一个跟随鼠标运动的动态草图
练习3-4:完成Zoog的代码,使得其身体的其余部分可以跟随鼠标移动。
练习3-5:将你设计的程序重新编写,使得图形可以根据鼠标位置做出反应(通过改变颜色和位置)。
除了使用mouseX和mouseY,你还可以使用pmouseX和pmouseY。这两个关键词代表当前鼠标坐标的上一个坐标位置。这就能实现一些更加有趣的交互方式。例如,如果你绘制一条直线,它开始于之前的鼠标位置,结束于当前的鼠标位置,猜想下会发生什么,如图3-6所示。
图 3-6
练习3-6:完成图3-6中横线的空白。
在draw()内的每一次循环中,通过把之前的鼠标坐标和当前的鼠标坐标使用直线进行连接,我就可以绘制出一个跟随鼠标的连续线条,如图3-7所示。
示例3-4:绘制连续的线条
练习3-7:改写示例3-4,使得移动鼠标的速度越快,绘制的线条越宽。提示:在Processing参考文档(https:// processing.org/reference/strokeWeight_.html)中查看strokeWeight()函数的具体说明。
计算鼠标水平运动速度的公式为:mouseX和pmouseX差值的绝对值。绝对值指的是忽略掉正负符号的数值,举例:
-2的绝对值是2。
2的绝对值是2。
在Processing中,通过abs()函数可以获得一个数的绝对值,也就是abs(-5)等于5。因此鼠标运动的速度为:
填写下面的空白,然后在Processing中进行验证!
相关文章
- 使用 Dashbot 分析和优化 Amazon Lex 对话
- 使用 AWS DeepLens 构建垃圾分类器
- 在 AWS 上使用 OpenVPN 搭建自定义端口的 Site-to-Site VPN
- day01 python基础
- 查找最昂贵的代码行 – Amazon CodeGuru 现已正式发布
- 推出 Amazon Honeycode – 无需编写代码即可构建 Web 和移动应用程序
- 隆重推出 AWS Snowcone – 一款小巧、轻便、坚固、安全的边缘计算、边缘存储和数据传输设备
- 在 Amazon Personalize 中引入推荐分数
- 从 Amazon RDS for PostgreSQL 版本 9.4 升级
- 如何在 AWS 上构建并行文件系统 BeeGFS – 高可用篇
- 使用 Amazon Translate、AWS Lambda 和新推出的 Batch Translate API 翻译文档
- Python+Opencv分水岭算法
- OpenCV-python安装教程
- Amazon SageMaker Debugger 助力 Autodesk 优化 Fusion 360 中的视觉相似性搜索模型
- Java applet对象
- python websocket 聊天服务器
- AWS 容器服务的安全实践
- VNC 还是 RDP? 云上的远程桌面究竟该如何选
- 亚马逊 AWS 官方博客目录 – 历年目录
- 利用 Lambda 和 Falco 为 Amazon EKS 提供安全保护