Processing学习笔记(三)

《Processing学习笔记(三)》由会员分享，可在线阅读，更多相关《Processing学习笔记(三)（19页珍藏版）》请在装配图网上搜索。

1、5/响应那些响应鼠标、键盘和其他设备输入的代码应该连续地运行。要做到这样，在draw()函数中写下这些更新的代码。示例5-1: draw()函数要看看draw()函数是怎么运行的，试着运行这个程序: void draw()/在控制台显示帧数println(lm drawing); println(frameCount);将会看到：106$Im drauinc1090它是动态的示例5-2： setup()函数为了完成循环的draw()函数，Processing有一个setup()函数，在程序运行开 始时运行一遍。void setup()println(Im drawing);void draw(

2、)println(Im running);代码运行时，在控制台上会有如下输出：文本“ 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 diamete

7、r=12; void setup()size(480,120); smooth(); void draw()float targetX=mouseX; x+=(targetX-x)*easing; ellipse(x,40,12,12); println(targetX+:+x);图示:ifl徹（緬C陨CBG他呦伽血代e讪咖）耐巾训妙诩血）观X变量的值总是越来越向targetX接近的。追上targetX的速度是由easing这个 变量表示的，范围是01.easing的值越小，延迟就会越大。如果值大到 1,那么 就不存在延迟了。运行5-8,确切的值是通过控制台在函数 println（）中输出的。

8、当你移动了鼠标，注意数字是如何让分离的，但是当鼠标停止移动，那么X值会越来越接近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;flo

9、at weight=dist(x,y,px,py);strokeWeight(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(

10、204);stroke(255);line(240,240,mouseX,mouseY); II 白线 stroke(0);float mx=mouseXI2+60; line(240,240,mx,mouseY); 黑线图示:map()函数是一个更通用的方法来实现这样的效果。它将一个变量从它的范围 转换到另一个范围。第一个参数是一个需要转换的变量，第二个和第三个分别 是它的最小值和最大值。第四个和第五个参数是需要转换到的目的范围的最小 值和最大值。map ()函数将背后的数学转换隐藏了。示例5-11:通过map()函数来映射这个示例将5-10示例使用map()函数重写了 代码：void se

11、tup()size(240,120);strokeWeight(12); smooth();void draw()background(204);stroke(255);line(120,60,mouseX,mouseY); II 白线 stroke(0);float mx=map(mouseX,0,width,60,180); line(120,60,mx,mouseY);/黑线图示:map()函数使代码更容易阅读了。因为最小值和最大值被清除地写成了参 数。在这个示例中，mouseX值从原来的0width转换成了 6080。点击除了鼠标的位置，Processings样跟踪者鼠标按键是否被按下

12、的信 息。mousePressec变量在当鼠标按键按下和放松时有着不同的值。 mousePresse变量是一个布尔型变量，就是它只有两个值：真和假。 当鼠标按下时，mousePresse(值变为真。示例5-12：点击鼠标mousePresse变量的使用是通过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,7

13、0,width,50);图示：敲击前敲击后在这个程序中，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);elsestroke(255);line(0,70,width,50);图示:点击前点击后示例5-14:鼠标不

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,height); if(mousePressed) if(mouseButton=LEFT) stroke(255,0,0);else if(mo

15、useButton=RIGHT) stroke(0);else stroke(255); line(0,70,width,50);图示:未点击左击中击右击一个程序可以有许多个if.else结构，可以比这些简单地程序多得多。它们 可以被连接在一起，成为一个长长的序列（并列的，分别为不同的选择判断） 也可以被嵌套的存在，如果在if中需要更多的if来判断更复杂的情况的话。一个if结构可以和mouseX和mouseY 起使用来决定鼠标在窗口的位置。示例5-15:寻找鼠标这个示例检测了鼠标是在这根线的左侧还是右侧，然后像鼠标的位置移动 代码：float x;int offset=10;void setu

16、p()size(240,120);smooth();x=width/2;void draw()background(204);if(mouseXx)x+=0.5;offset=-10;if(mouseXvx)x-=0.5;offset=10;line(x,0,x,height); line(mouseX,mouseY,mouseX+offset,mouseY-10); line(mouseX,mouseY,mouseX+offset,mouseY+10); line(mouseX,mouseY,mouseX+offset*3,mouseY);图示：T示例5-16:圆的边界对于圆形测试，我们使用

17、dist()函数来获得从圆心到鼠标的距离，然后我们检 验它是否比半径更小。如果是这样，我们知道鼠标在圆之内。在这个示例中， 当鼠标在圆姓区域内，圆就变大。代码：int x=120;int y=60;int radius=12;void setup()size(240,120);smooth();ellipseMode(RADIUS);void draw()background(204);float d=dist(mouseX,mouseY,x,y);if(dvradius)radius+;fill(0);elsefill(255);ellipse(x,y,radius,radius);图示:原

18、始状态鼠标移动后示例5-17 :矩形的边界我们使用另一种方法来测试鼠标是否在一个矩形之内。我们做 4 个独立的测试来检验鼠标是否在符合条件的边上，然后我们比较每一次测试的值，如果它们都是真，那么我们确定鼠标是在矩形之内的。 代码：int x=80;int y=30;int w=80;int h=60;void setup()size(240,120);void draw()background(204);if(mouseXx)&(mouseXvx+w)&(mouseYy)&(mouseYvy+h)fill(O)；elsefill(255);rect(x,y,w,h);图示:类型Processi

19、ng艮踪键盘上的任何一个键被按下与否，同样也包括最后 一个按下的键。像mousePressed变量一样，当有任何键按下时keyPressec变量，为真，为真。当没有键按下时，它为假。示例5-18:按下一个键在这个示例中，第二条线只有当某一键被按下时才会被画出。代码：void setup()size(240,120);smooth();void draw()background(204);line(20,20,220,100);if(keyPressed)line(220,20,20,100);Key变量保存了最近依次按下的键的信息。它的数据类型是char字符型，这是character的简写。一

20、个字符型的变量可以存储任何单个字符，包括字母表的字 母，数字和符号。不像string字符串型的值，string是用双引号引起来的，而char 字符型使用单引号。下面是一个声明和赋值字符变量的例子。Char c= All声明并指定变量不像keyPressed是布尔型，当一个按键每次放开时就转化成假，而key这个变量会一直保留它的结果，知道另一个键被按下。接下来的示例是使用key的值在屏幕上画出这些字符的。每次当一个新的键被按下的时候，它的值就被更换 成一个新的字符，然后画出来。一些案件，数Shift和Alt没有一个可见的字符表示，所以当你按下它们时，没有东西会被画出来。示例5-19 :画一些字符

21、这个示例介绍用textSize(函数来设置字母的大小。textSize()函数把文本放置 在X坐标轴的中间位置，然后text()函数来绘制这个字母。代码：void setup()size(120,120);textSize(64);textAlign(CENTER);void draw()background(O);text(key,60,80);图示:示例5-20：检验特殊的键在这个示例中，我们输入的H或者N。我们使用比较操作，=符号，来看按下 的键所代表的字符是否为我们想要的。代码：void setup()size(120,120);smooth();void draw()background(204); if(keyPressed) if(key=h )| (key=H) line(30,60,90,60); if(key=n)|(key=N) line(30,20,90,100);line(30,20,30,100);line(90,20,90,100);图示：参考资料爱上Processing 人民邮电出版社2013-7-10学习必备欢迎下载