{
float targetX=mouseX; x+=(targetX-x)*easing; ellipse(x,40,12,12); println(targetX+\ } 图示:
X变量的值总是越来越向targetX接近的。追上targetX的速度是由easing这个变量表示的,范围是0~1.easing的值越小,延迟就会越大。如果值大到1,那么就不存在延迟了。运行5-8,确切的值是通过控制台在函数println()中输出的。当你移动了鼠标,注意数字是如何让分离的,但是当鼠标停止移动,那么X值会越来越接近targetX.
示例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经常在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
map()函数使代码更容易阅读了。因为最小值和最大值被清除地写成了参数。在这个示例中,mouseX值从原来的0~width转换成了60~80。
点击
除了鼠标的位置,Processing同样跟踪者鼠标按键是否被按下的信息。mousePressed变量在当鼠标按键按下和放松时有着不同的值。mousePressed变量是一个布尔型变量,就是它只有两个值:真和假。当鼠标按下时,mousePressed值变为真。 示例5-12:点击鼠标
mousePressed变量的使用是通过if语句来决定一行代码运行与否的。 代码:
void setup() {
size(240,120); smooth();
strokeWeight(30); }
void draw() {
background(204); stroke(102);
line(40,0,70,height); if(mousePressed==true) {
stroke(0); }
line(0,70,width,50); }
图示:
10