Processing学习笔记（三）

5/响应

那些响应鼠标、键盘和其他设备输入的代码应该连续地运行。要做到这样，在draw()函数中写下这些更新的代码。 示例5-1：draw()函数

要看看draw()函数是怎么运行的，试着运行这个程序： void draw() {

//在控制台显示帧数 println(\ println(frameCount); }

将会看到：

它是动态的

示例5-2：setup()函数

为了完成循环的draw()函数，Processing有一个setup()函数，在程序运行开始时运行一遍。 void setup() {

println(\}

void draw() {

println(\}

代码运行时，在控制台上会有如下输出：

文本“I’m running”会一直持续地被写到控制台上，直到程序结束。

示例5-3：当setup()遇到draw()函数

下面的例子把以上讲的两个函数都放在一起： int x=280; int y=-100;

int diameter=380;

1

void setup() {

size(480,120); smooth(); fill(102); }

void draw() {

background(204);

ellipse(x,y,diameter,diameter); }

图示：

跟随

既然我们可以让我们的程序持续地运行了，那么我们就可以跟踪鼠标的位置然后使用得到的这些数值来移动屏幕上的元素。

示例5-4：跟踪鼠标

mouseX变量保存着X轴的值，mouseY变量保存着Y轴的值。 代码：

void setup() {

size(480,120); fill(0,152); smooth(); noStroke(); }

void draw() {

ellipse(mouseX,mouseY,9,9); }

图示：

2

当鼠标移动的很快时，圆圈会被放置的十分分散。

示例5-5：跟随你的点

在这个示例中，当每次draw()函数运行时，一个新的圆就被画在窗口上。为了刷新屏幕，并且每次只有最新画上的圆显示在上面，我们需要在draw()函数一开始就调用background()函数，这要在形状被绘制之前做好。 代码：

void setup() {

size(480,120); fill(0,152); smooth(); noStroke(); }

void draw() {

background(205);

ellipse(mouseX,mouseY,9,9); }

图示：

background()函数会清空屏幕，所以一定要保证它被放在draw()函数中，并且在

3

其他函数之前。否则，画上的形状会被清空的。

示例5-6：连续作画

pmouseX和pmouseY两个变量存储着前一帧鼠标的位置。像mouseX和mouseY一样，这些特殊的变量是在每次draw()函数运行的时候都更新的。当它们被联合在一起使用时，我们可以通过连接当前位置和最近一次的位置来绘制连续的线。 代码：

void setup() {

size(480,120); strokeWeight(4); smooth(); stroke(0,102); }

void draw() {

line(mouseX,mouseY,pmouseX,pmouseY); }

图示：

示例5-7：连续设置厚度

PmouseX和pmouseY两个变量也可以用来计算鼠标移动的速度。这是通过测量当前点和鼠标经过的上一个位置的距离来做到的。如果鼠标移动较慢，那么这个距离也很小，但是如果鼠标开始加速移动，那么距离就会增加。就像例子中使用的一样，dist()函数简化了计算。在这里，在这里，用鼠标移动的速度来表示线的厚度。 代码： void setup() {

size(480,120); smooth(); stroke(0,102); }

4

void draw() {

float weight=dist(mouseX,mouseY,pmouseX,pmouseY); strokeWeight(weight);

line(mouseX,mouseY,pmouseX,pmouseY); } 图示：

示例5-8：轻随(easing)

用easing技术，我们可以活的两个值：当前和向前变化的值。在程序的每一步，当前值仅仅是向目标值移动了一小步。 代码： float x;

float easing=0.01; float diameter=12; void setup() {

size(480,120); smooth(); }

void draw()

5