《PROCESSING学习笔记(三)》由会员分享，可在线阅读，更多相关《PROCESSING学习笔记(三)（22页珍藏版）》请在金锄头文库上搜索。
1、5/响应 那些响应鼠标、键盘和其他设备输入的代码应该连续地运行。要做到这样，在draw()函数中写下这些更新的代码。示例5-1：draw()函数 要看看draw()函数是怎么运行的，试着运行这个程序： void draw() /在控制台显示帧数 println(Im drawing); println(frameCount);将会看到：它是动态的示例5-2：setup()函数 为了完成循环的draw()函数，Processing有一个setup()函数，在程序运行开始时运行一遍。void setup() println(Im drawing);void draw() println(Im ru
2、nning);代码运行时，在控制台上会有如下输出：文本“Im running”会一直持续地被写到控制台上，直到程序结束。示例5-3：当setup()遇到draw()函数下面的例子把以上讲的两个函数都放在一起：int x=280;int y=-100;int diameter=380;void setup() size(480,120); smooth(); fill(102);void draw() background(204); ellipse(x,y,diameter,diameter); 图示：跟随既然我们可以让我们的程序持续地运行了，那么我们就可以跟踪鼠标的位置然后使用得到的这些数值
3、来移动屏幕上的元素。示例5-4：跟踪鼠标 mouseX变量保存着X轴的值，mouseY变量保存着Y轴的值。代码：void setup() size(480,120); fill(0,152); smooth(); noStroke();void draw() ellipse(mouseX,mouseY,9,9);图示：当鼠标移动的很快时，圆圈会被放置的十分分散。示例5-5：跟随你的点 在这个示例中，当每次draw()函数运行时，一个新的圆就被画在窗口上。为了刷新屏幕，并且每次只有最新画上的圆显示在上面，我们需要在draw()函数一开始就调用background()函数，这要在形状被绘制之前做好
4、。代码：void setup() size(480,120); fill(0,152); smooth(); noStroke();void draw() background(205); ellipse(mouseX,mouseY,9,9);图示：background()函数会清空屏幕，所以一定要保证它被放在draw()函数中，并且在其他函数之前。否则，画上的形状会被清空的。示例5-6：连续作画 pmouseX和pmouseY两个变量存储着前一帧鼠标的位置。像mouseX和mouseY一样，这些特殊的变量是在每次draw()函数运行的时候都更新的。当它们被联合在一起使用时，我们可以通过连接当
5、前位置和最近一次的位置来绘制连续的线。代码：void setup() size(480,120); strokeWeight(4); smooth(); stroke(0,102);void draw() line(mouseX,mouseY,pmouseX,pmouseY);图示：示例5-7：连续设置厚度 PmouseX和pmouseY两个变量也可以用来计算鼠标移动的速度。这是通过测量当前点和鼠标经过的上一个位置的距离来做到的。如果鼠标移动较慢，那么这个距离也很小，但是如果鼠标开始加速移动，那么距离就会增加。就像例子中使用的一样，dist()函数简化了计算。在这里，在这里，用鼠标移动的速度来
6、表示线的厚度。 代码：void setup()size(480,120);smooth();stroke(0,102);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=
7、12;void setup() size(480,120); smooth();void draw() float targetX=mouseX; x+=(targetX-x)*easing; ellipse(x,40,12,12); println(targetX+:+x); 图示：X变量的值总是越来越向targetX接近的。追上targetX的速度是由easing这个变量表示的，范围是01.easing的值越小，延迟就会越大。如果值大到1，那么就不存在延迟了。运行5-8，确切的值是通过控制台在函数println()中输出的。当你移动了鼠标，注意数字是如何让分离的，但是当鼠标停止移动，那么X
8、值会越来越接近targetX.示例5-9：用easing作出平滑的曲线 在这个示例中，“轻随”技术被运用到了示例5-7上，比较之下，可以看出线条更加平滑了：代码：float x,y,px,py;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); s
9、trokeWeight(weight); line(x,y,px,py); px=x; py=y;图示：映射 当数字被画到屏幕上时，把值从一个范围转换到另一个范围总是很有用的。示例5-10:将值映射到范围变量mouseX经常在0和窗口的宽度之间，当然你想将这些值映射到其他坐标范围也是可行的。你可以使用一个数来分割mouseX以减少范围，然后增加或者减少一个数来左移火右移，以做到这种效果。代码：void setup() size(480,480); strokeWeight(12); smooth();void draw() background(204); stroke(255); line(
10、240,240,mouseX,mouseY); /白线 stroke(0); float mx=mouseX/2+60; line(240,240,mx,mouseY); /黑线图示： map()函数是一个更通用的方法来实现这样的效果。它将一个变量从它的范围转换到另一个范围。第一个参数是一个需要转换的变量，第二个和第三个分别是它的最小值和最大值。第四个和第五个参数是需要转换到的目的范围的最小值和最大值。 map（）函数将背后的数学转换隐藏了。示例5-11:通过map()函数来映射这个示例将5-10示例使用map()函数重写了。代码：void setup() size(240,120); str
11、okeWeight(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);/黑线图示：map()函数使代码更容易阅读了。因为最小值和最大值被清除地写成了参数。在这个示例中，mouseX值从原来的0width转换成了6080。点击 除了鼠标的位置，Processing同样跟踪者鼠标按键是否被按下的信息。mousePressed变量在当鼠
12、标按键按下和放松时有着不同的值。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);
13、图示： 敲击前敲击后在这个程序中，if模块中的代码只有当鼠标按键按下时才执行。当按键没有被按下时，这行代码是被忽略的。示例5-13：当没有点击检测if拓展一下，加个else代码：void setup() size(340,120); smooth(); strokeWeight(30);void draw() background(204); stroke(102); line(40,0,70,height); if(mousePressed) stroke(0); else stroke(255); line(0,70,width,50);图示： 点击前 点击后示例5-14：鼠标不同键位点击如果你的鼠标有多个键位，Procrssing同样会追踪是点击了哪个键。mouseButton变量可以是下面任意3种值之一：LEFT、CENTER、RIGHT。为了确认是哪个键被按下了，=号是必须的，就像下面的例子：代码：void setup() size(120,120); smooth(); strokeWeight(30);void draw() background(204); stroke(102); line(40,0,70,hei
