Intro

想要程序对输入设备做出响应,那么这个程序必须持续运行,在processing中,这个函数叫 draw()。

 

Once and Forever

draw()函数循环自上至下运行,直到程序被停止,每次的运行被称为一帧 frame。默认每秒60帧。

Example 5-1 draw()

屏幕快照 2017-03-26 19.56.41

例子: println(frameCount);

名称:frameCount

解释:frameCount是系统自带变量,显示运行到现在一共输出了多少帧。在setup()中初始为0。

屏幕快照 2017-03-26 19.57.40

例子: println(frameRate);

名称:frameRate

解释:frameRate也是系统自带变量,与frameCount不同,frameRate显示当前帧数,虽然默认是60帧,但其实并不稳定,有一点点误差,也跟计算机配置有关。初始值为10fps。

Example 5-2 setup()

setup()函数只运行一次,通常,该函数被用作初始化变量。第一行通常是size()函数,然后是fill(),和stroke(),或者加载图片和设定字体。size默认值为100*100。

Example 5-3 Global Variable 全局变量

全局变量通常声明在代码头部,在import后。

 

Follow

我们可以追踪鼠标的位置,并用这些数据来移动屏幕上的图形元素。

Example 5-4 跟随鼠标

屏幕快照 2017-03-26 20.16.15.png

例子: ellipse(mouseX, mouseY, 9, 9);

名称:mouseX, mouseY

解释:两个系统变量,分别为鼠标当前位置的x,y轴坐标值,单位为像素。注意图中是一堆小点而不是线。

Example 5-5 跟随鼠标的小点

屏幕快照 2017-03-26 20.17.54屏幕快照 2017-03-26 20.19.37.png

与上一个例子不同,这次只有一个小点跟随鼠标,而不是一堆堆的小点,因为这里使用了background()函数。

background()函数在调用时会清空当前画布。

Example 5-6 连续绘制

屏幕快照 2017-03-26 20.28.14

屏幕快照 2017-03-26 20.28.28

mouseX mouseY 存储了当前帧鼠标位置

pmouseX pmouseY 则存储了上一帧鼠标的位置

这些系统变量可以用line()函数画出连续平滑的曲线。

Example 5-7 用 dist() 函数计算鼠标速度 设定线的粗细

屏幕快照 2017-03-26 20.34.58.png

屏幕快照 2017-03-26 20.38.27

dist() 函数计算两点间距离

strokeWeight() 函数设定线粗

Example 5-8  Easing 缓和技术

在上一个例子中,鼠标的位置被直接用来绘制图形,这样动态的绘制非常灵敏,但线条又有些生硬,有时我们想要更松散一点,让绘制跟鼠标产生一些延迟,有一种更流体的感觉。这种技术叫做easing。

屏幕快照 2017-03-26 20.54.41.png

屏幕快照 2017-03-26 20.56.55.png

屏幕快照 2017-03-26 20.55.44.png

控制台中实时的输出了目标位置和实际绘制位置。

Example 5-9 用easing技术绘制更流畅的线条

屏幕快照 2017-03-26 21.02.22.png

屏幕快照 2017-03-26 21.06.13.png

从图中可以看出,我们确实得到了更平滑的曲线,因为绘制产生了计算延迟,而不是用鼠标位置实时绘制。

根据以上的例子 我自己又改进了两个版本

版本1 静态随机颜色绘制曲线

屏幕快照 2017-03-26 21.19.14

版本2 动态随机颜色绘制曲线 自动的哦

屏幕快照 2017-03-26 21.24.57.png

这还有个gif预览效果 画质被压缩的好差啊。。。

randomColorLineD.gif

 

Click 点击鼠标

变量名:mousePressed

变量类型:boolean

值:true/false

 

变量名:mouseButton

值:LEFT CENTER RIGHT

 

Location 使用鼠标位置的几个案例

Example 5-14 The Bounds of a Circle 判断鼠标是否在圆内

 

Example 5-15 The Bounds of a Rectangle 判断鼠标是否在圆内

 

Type 按下键盘

keyPressed

key

 

Map() 映射

把一个值从一个范围映射到另一个范围

Advertisements