正在加载
请稍等

菜单

Home 码农菜园 前端视界 爱上Processing-2 进阶
Home 码农菜园 前端视界 爱上Processing-2 进阶

爱上Processing-2 进阶

前端视界 by   阅读量 3,951

1 变量

Processing中的数据类型有:整型、浮点型、字符型、字、图形、字体等。

当然会有一些程序级别的变量,如width和height代表窗口的宽度和高度,由size()函数指定。

2 运算、判断、逻辑

常见的运算和判断在不同的语言里都是差不多的。

3 循环

循环的for和C++什么的一毛一样。

4 动一下手

画一个针与线的图吧,虽然也没什么技巧。

针与线

另外,上一篇中的P5机器人,如果用变量来表示位置、身高、脖子长度,机器人就能变得更灵活了。

5 响应

响应就是所谓的事件了,根据鼠标、键盘和其他设备输入执行相应的操作。draw()函数会一直运行,每帧调用一次,默认60帧/秒,直到窗口的关闭,所以在draw()中写事件响应代码即可。使用draw()函数更新的话,一般会对应写一个setup()函数用于初始化。

在setup()和draw()之外定义的变量为全局变量,这样setup()和draw()中都可以访问该变量了。

5.1 鼠标跟随

mouseX、mouseY分别保存鼠标在x轴和y轴的位置,来一个鼠标跟随的例子。屏幕上会不断出现新的圆,如果将注释的一行取消注释,每次画圆之前首先会填充背景,因此最终只会显示一个圆。

pmouseX、pmouseY存储前一帧时鼠标的位置,以下是一个连续作画的例子。

根据鼠标当前位置和上一帧的位置,可以计算鼠标移动的速度,其中使用dist()计算两点之间的距离,并根据速度设置线宽。

以上的例子中,新的点和线都是跟随鼠标立即出现的,现在来做一个easing版,加一些延时,显得更加平滑。

5.2 映射

map()将值进行映射,其实也就是个简单的数学变换,有五个参数,第一个是需要转换的值,第二、三个分别是原始的最小值和最大值,第四、五个分别是映射后的最小值和最大值,太简单就不上例子了。

5.3 点击

根据mousePressed变量判断鼠标是否按下,根据mouseButton变量判断按下的是哪个键(LEFT、CENTER、RIGHT)。

5.4 位置

判断鼠标位置所在范围并响应,下面是一个寻找鼠标的例子。

5.5 键盘敲击

keyPressed变量记录当前是否有键被按下,key变量纪录最近一次按下的键,为char类型,除了’a’、’b’之类的字符,还包括SHIFT、ALT、CONTROL、LEFT、RIGHT、UP、DOWN等常量。char用单引号引起来,而String用双引号。

5.6 会动的P5

好了,结合之前的内容,加上easing,让P5机器人动起来吧,水平方向上跟随鼠标,鼠标按下后身长和脖子会缩短。

 

22 2016-06

发表评论