-
5/
响应
那些响应鼠标、
键盘和其他设备输入
的代码应该连续地运行。
要做
到这样，在
draw()
函数中写下这些更新的代码。
示例
5-1
：
draw()<
/p>
函数
要看看
draw()
函数是怎么运行的，试着运行这个程序：
void draw()
{
//
在控制台显示帧数
println(
println(frameCount);
}
将会看到：
它是动态的
示例
5-2
：
setup()
函数
为了完
成循环的
draw()
函数，
Proc
essing
有一个
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()
函数
一开始就调用
backgroun
d()
函数，这要在形状被绘制之前做好。
代码：
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
一样，
这些特殊的变量是在每次<
/p>
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
{
float
targetX=mouseX;
x+=(targetX-x)*easing;
ellipse(x,40,12,12);
println(targetX+
}
图示：
X
变量的
值总是越来越向
targetX
接近的。
追上
targetX
的速度是由
ea
sing
这个
变量表示的，范围是
0~
的值越小，延迟就会越大。如果值大到
1
，那么
就不存在延迟了。运行
5-8
，确切的值是通过控制台在函数
println()
中输出的。
当你移动了鼠标，注意数字是如何让分离的，但是当鼠标停止移动，那么
X
值
会越来越接近
targe
tX.
示例
5-9
：用
easing
作出平滑的曲线
在这个示例中，
“轻随”技术
被运用到了示例
5-7
上，比较之下，可
以看出线条更加平滑了：
代码：
float x,y,px,py;
6
float easing=0.05;
void setup()
{
size(480,120);
smooth();
stroke(0,102);
}
void draw()
{
float targetX=mouseX;
x+=(targetX-x)*easing;
float
targetY=mouseY;
y+=(targetY-y)*easing;
float
weight=dist(x,y,px,py);
strokeWeight(weight);
line(x,y,px,py);
px=x;
py=y;
}
图示：
7
映射
当数字
被画到屏幕上时，把值从一个范围转换到另一个范围总是
很有用的。
示例
5-10:
将值映射到范围
变量
mouseX
< br>经常在
0
和窗口的宽度之间，当然你想将这些值映射到其
他
坐标范围也是可行的。
你可以使用一个数来分割
mouseX
以减少范围，
然后增加
或者减少一个数来左移火右移，以做到这种效果。
代码：
void setup()
{
size(480,480);
strokeWeight(12);
smooth();
}
void draw()
{
background(204);
stroke(255);
line(240,240,mouseX,mouseY);
//
白线
stroke(0);
float
mx=mouseX/2+60;
line(240,240,mx,mouseY);
//
黑线
}
图示：
8
map()
函数是一个更通用的方法来实现这样的效果。它将一个变量从它的范围
转换到另一个范
围。第一个参数是一个需要转换的变量，第二个和第三个分别
是它的最小值和最大值。第
四个和第五个参数是需要转换到的目的范围的最小
值和最大值。
map
（）函数将背后的数学转换隐藏了。
示例
5-11:
通过
map()
函数来映射
这个示例将
5-10
示例使用
map()
函数重写了。
代码：
void setup()
{
size(240,120);
strokeWeight(12);
smooth();
}
void draw()
{
background(204);
stroke(255);
line(120,60,mouseX,mouseY);
//
白线
stroke(0);
float
mx=map(mouseX,0,width,60,180);
line(120,60,mx,mouseY);//
黑线
}
图示：
9
-
-
-
-
-
-
-
-
-
上一篇：详细的processing学习笔记
下一篇：如何写好一篇文章