详细的processing学习笔记

1、Processing Month第一天连接点第一部分这篇文章中，我们来看一下如何计算一个圆周上的点的坐标，并将他们连接起来。我们将用灵活的方式来实现基于6个点和18个点的图像计算要计算这些点的坐标，必须知道圆上的点数量和圆的半径。本例中，我们将画12个点。int numPoint = 12;float radius = 150;下一步，我们来算一下每个点之间的角度。众所周知一个整圆的角度是360度或2n弧度,所以用360度除以圆上的点数，就得到两点之间的角度。例子中使用了弧度而不是角度，是因为cos()和sin()函数的形参是弧度数，不是角度数。Processing中有一些关于圆和半圆的常量，

2、TWO_PI就代表了常量Pl*2。(这里的PVector其实是类型，代表这一个 点)float angle = TWO_PI / numPoint;for(int i=0 ; inumberPoints;i+)float x = cos(angle * i) * radius;float y = sin(angle * i) * radius;pointi = new PVector(x,y );我把计算的部分放在了setup()里面，把结果存在了PVector数组里，这样我们就不用在draw函数里一遍又一遍的计算点的x、y坐标。我还用了一个for循环，用来计算每个点 的坐标，*angle*i

3、*会在每个循环中计算出一个点的坐标。绘制接下来我们说一下，如何将圆上的点两两连线，我们需要用一个嵌套for循环，来遍历数组中的每一个点。if语句用来比较i和j的数字，如果他们不相等，电脑就在这两个点之间 画一条线。如果i和j相等，说明是同一个点，那么就不用画线了。for (int i = 0; i numPoints; i+) for (int j = 0; j numPoints; j+) if (j != i )line( points.x, points.y,pointsj.x,pointsj.y );processing学习第一天笔记源码：折叠Java代码复制内容到剪贴板1.int n

4、umPoints = 10;2.PVector points = new PVectornumPoints;3.float radius =150;4.void setup()5.6.size(450,400);7.7.float angle = TWO_PI/numPoints;8.for(int i=0;inumPoints;i+)9.10.float x = cos(angle * i) * radius;11.float y = sin(angle * i) * radius;12.pointsi = new PVector(x,y);13.14.n oLoop();15.17.16.

5、void draw()17.18.smooth();21.19.PImage img;20.img = loadlmage(images/laDefense.jpg);21.background(img);22./ background(0); /background(0,0,255);26.23./fill(0,0,255);24./ fill(255,102,255);25.stroke(0,0,255,60);26.tran slate(width/2,height/2);27.for(int i=0;inumPoints;i+)28.for(int j=0;jnumPoints;j+)

6、29.30.if(j!=i) 31./ line( points.x, points.y,pointsj.x,pointsj.y);32.Iine( pointsi.x, pointsi.y,pointsj.x,pointsj.y);6. saveFrame(images/circle-connection-+numPoints+.png);37. 果：第二天连接点第二部分今天的例子和昨天的类似，只不过我们将使用随机点代替固定点，连接点的时候也将采用 不同的方式。如果两点之间的距离小于某一个我们定义的数，我们就把这两个点连接起来。并且将连线的透明度与两点距离相关联，距离越大

7、，连线就越透明。我们用dist()函数来计算两个点之间的距离。前两个参数是第一个点的x坐标和y坐标。第三，第四个参数是另外一个点的x坐标和y坐标。返回值为一个float类型的数值，代表两点之间的距离。如果距离小于255，我们就在这两点之间连线。float dst = dist( points.x, points.y, pointsj.x,points|j.y );if ( dst 255 ) stroke( 255, 255 - dst );line( points.x, points.y, pointsj.x, pointsj.y );画完这些细线之后，我们稍微放大点的体量，这样会让图像更好

8、看。以下这些代码将加入到第一个for-loop循环的结尾、内部循环之后。stroke( 255 );strokeWeight(4);point( points.x, points.y );源码：折叠Java代码复制内容到剪贴板1.int numPoints = 10;2.PVector points = new PVectornumPoints;voidsetup()3.4.size(450,400);5.for(int i=0;inumPoints;i+)6.7.poin tsi=newPVector(ra ndom(width),ra ndom(height);8.9.n oLoop();

9、10. void draw()11. processing学习第二天笔记smooth。；backgro un d(0);n oFill();for(int i=0;inumPoints;i+)for(int j=O;jnumPoints;j+)strokeWeight(1);if(j!=i) float dst = dist(pointsi.x,pointsj.y,pointsj.x,pointsj.y);if(dst255) stroke(255,255-dst);lin e(poi ntsi.x,poi ntsi.y,poi ntsj.x,poi ntsj.y);stroke(255);s

10、trokeWeight(4);poi nt(poi ntsi.x,poi ntsi.y);/节点画点saveFrame(images/ra ndom-c onn ectio ns-+nu mPoi nts+.p ng);成果0.31.32.第三天是关于绘制三角形的，但我们并不是直接使用trian gle()函数，而是画点和线，我们会限制线条，只绘制基于规则三角形的网格。为了使它更有趣，稍后我们会加入一些动 画效果。图画的起始点位于窗口中央，因为我们要使线条动起来，所以我们需要跟踪当前点

11、和前一 个点的位置，把它们用线连接起来。我们还需要一个半径来计算新的点。我们最好在程序 的开头就定义好这些变量。float radius = 20;float x, y;float prevX, prevY;下一步我们需要给这些变量赋值。起始点设在窗口的中心，所以我们将width和height除以2,然后分别赋值给x和y。width和height是内置系统变量，可以通过size()来赋值,并可以随时调用。x = width / 2;y = height / 2;prevX = x;prevY = y;接着，我们该编写draw()函数了。计算下一个点我们要用到cos()和sin()，它俩是我们在

12、第一天用过的功能。因为我们要做的三角形是规则的，所以线条只需要在六个特定的方 向移动，算法很简单。1.三个角的度数之和是180度或者说是PI2我们做的是等边三角形，所以每个角是180/3=60度3个圆是360度或者TW0_PI，如果我们用60去除，得到6个方向的线4.这些线的角度分别是0,60,120,180,240和300我想让电脑去决定画哪个方向，所以我用随机数来计算方向。但是，random()功能所产生的结果是float值，而我想要的结果是0,1,2,3,4,5之间的整数，所以我加了一个floor()功 能，它会达到取整的效果。float angle = (TW0_PI / 6) * f

13、loor( random( 6);x += cos( angle ) * radius;y += sin( angle ) * radius;processing 第三天学习笔记这样每次draw()函数每调用一次点就会移动到网格上的新位置。下一步我们需要在当前 点和前一个点之间画线。我们还需要在draw()的末尾将前一点替换为当前点，否则在第 一帧之后就不会有动态了。stroke( 255, 64 );strokeWeight( 1 );line( x, y, prevX, prevY );strokeWeight( 3);point( x, y );/ update prevX and pr

14、evY with the new valuesprevX = x;prevY = y;如果你运行程序会发现线条不断往窗口外扩散回不来了。我们需要在确定x和y值之后实现一个算法来确保线条留在屏幕内。我们要检查新的x是不是小于0或者超出了宽度范围。如果是这样，我们要把x和y值还原成之前的值，这样线条就不会超出窗口范围了，y值也做相同处理。if ( x width ) x = prevX;y = prevY;if ( y height) x = prevX;y = prevY;为了使我们的图画更有趣，我们给背景加一个淡出效果，这样那些线会像蛇一样移动。加 入一个开关功能使用键盘按键来控制这个效果。为

15、了达到这样的目的，我们需要在程序前 力口一个boolean变量。Boolean fade = true;F面的代码应当放在draw()函数的最前面，我们要先判断fade值是不是为真。如果为真,if语句中的代码会在最上层画一个透明的长方形。if (fade) noStroke();fill( 0, 4 );rect( 0, 0, width, height );20.想要关闭淡出效果，我们要用到keyPressed()这个方法，它会在每次键盘有按键动作时被调用。如果用户按了*f*键，系统就切换一次fade的真假值。void keyPressed() if (key = f) fade = !fa

16、de;运行程序后你就能看到之前的线条都慢慢淡出背景，试一下源码:折叠Java代码复制内容到剪贴板1.float radius = 40;2.float x,y;3.float prevX,prevY;4.Boolean fade = true;5.Boolea n save One = false;6.void setup()7.size(450,400);8.backgrou nd(0);9.stroke(255);10. x = width/2;11. y = height/2;12. prevX = x;13. prevY = y;14. stroke(255);15. strokeWe

17、ight(2);16. point(x,y);17.17. 18. void draw()f键关闭或启用淡出效果。21.if(fade)22.n oStroke();23.fill(0,4);24./ fill(random(204),random(100),random(20),4);25.rect(O,O,width,height);26.27.float angle = (TW0_PI/6) * floor(random(6);28.x += cos(angle) * radius;29.y += sin(angle) * radius;30.30.if(xwidth)31.x= pre

18、vX;32.y= prevY;33.35.34.if(yheight)35.x = prevX;36.y = prevY;37.38./ stroke(255,64);39.stroke(255,0,0,100);40.strokeWeight(1);41.line(x,y,prevX,prevY);42.strokeWeight(3);43.point(x,y);44.prevX = x;45.prevY = y;46.if(saveOne)47.saveFrame(image/tria ngle-grid- + sec on d() + .p ng);48.save One = false

19、;49.50.delay(50);51.52.void keyPressed()53.if(key=f)54.fade =!fade;55.59.if(key=s)60.save One = true;61.62. 58.效果显示Parameters nfloat: number to round downfloor(x)函数:计算最接近的小于或等于 X 的整数值Namefloor()Examplesfloat x = 2.88;int a = floor(x); / Sets a to 2Descripti on Calculates the closest int value that i

20、s less tha n or equal to the value of the parameter.Syn taxfloor( n)Parameters n float: number to round downReturns intceil(x)函数:计算最接近的大于或等于 X 的整数值Name ceil()Examplesfloat x = 8.22;int a = floor(x); / Sets a to 9Descripti on Calculates the closest int value that is greater tha n or equal to the valu

21、e of theparameter. For example, ceil(9.03) returns the value 10.Syntax floor(n)Returns int今天我们来看一下如何使用processing绘制更复杂的图形。我们会用到beginShape()endShape()和vertex。这三个函数在屏幕上画一个星星。最开始我们声明一些变量，用来计算星星的点：内半径，外半径，尖角的个数和一个用来保存点坐标的数组。需要注 意的是，这个数组的元素个数是2*n umSpikes(尖角数量的两倍)，因为其中既有内半径上的点又有外半径上的点。floatinn erRadius= 7

22、0; float outerRadius = 180;int nu mSpikes = 5;PVector points = new PVectornumSpikes * 2 ;接下来的事情是计算绘制星星所需的所有点。我们需要确保这些点的顺序，偶数点分布在 外圈，奇数点在内圈。要做到这个奇偶分布，我们需要使用取模运算符。如果i%2的余数是0,那么这个点就是偶数点，分布在外圈。floatan gle =TW0_PI / points.length;for (int i=0;i points.length;i+ ) float x,if(i%2 =0 ) x = =cos(angle * i )

23、* outerRadius;y = =si n(angle * i ) * outerRadius; else x = =cos(angle * i ) * innerRadius;y = =si n(angle * i ) * innerRadius;poi nts=new PVector( x, y );想把星星绘制到屏幕上，我们使用beginShape()和endShape()函数，禾U用我们计算的 点来绘制。 我们在这两个函数中间，利用一个for循环来遍历所有的数组，给每个点生成 一个对应的Vertex。确保你调用endShape()函数时，参数为CLOSE，否则的话，图形 就不会封闭

24、。en dShape(CLOSE);源码：processing第四天学习笔记tran slate(width/2, height/2 );for (inti = 0; i points.length;vertex(poin ts.x,poi nts.ybeg inShape();i+) 折叠Java代码复制内容到剪贴板1.float innerRadius = 70;2.float outerRadius = 180;3.int numSpikes = 5;4.PVector points = new PVectornumSpikes *2 ;5.void setup()6.size(450,

25、400);7.float angle = TWO_PI /points.length;8.for(int i= 0;ipoints.length;i+)9.float x,y;10. if(i%2=0)11.x = cos(angle * i) * outerRadius;12.y = sin(angle * i) * outerRadius;13. 14. else 15.x = cos(angle * i ) * innerRadius;16.y = sin(angle * i ) * innerRadius;17. 18. pointsi = new PVector(x,y);19. 2

26、0. 21. void draw()22. background(0,0,32);23. translate(width/2,height/2); /转换width/2,height/2中心点作为绘图坐标(0,0)24. smooth();25. fill(255,128,0);26. noStroke();27. beginShape();28. for(int i =0 ;i points.length;i+)29. vertex(po in tsi.x,po in tsi.y);30. 31. endShape(CLOSE);32. saveFrame(images/star- + nu

27、mSpikes +.png);33. /stroke(255);34.strokeWeight(1);35. /color c = color(20,80,0);36. /fill(c);37. /beginShape(LINES);38.rect(30, 20,85, 80);39. /ellipse(30, 20,85, 20);40. /vertex(30, 20);41. /vertex(85, 20);42. /vertex(85, 75);43. /vertex(30, 75);44. /endShape();45. 46. void mousePressed()47.if(mou

28、seButt on = LEFT)48.numSpikes += 1; /增加一个角49.outerRadius -= 10;50. PVector points1 = new PVectornumSpikes *2 ; /改变星星的角数*251. points = points1;52.53.if(mouseButt on = RIGHT)54.inn erRadius += 10;55.56. setup();57. redraw();58. 成果:processing第五天学习笔记rotate()这两个新的方法。今天我们要学习一下如何通过叠加多个矩形来绘制一朵花。您将会用到tran slate()和第一步，使用rectMode(CENTER)来使你的矩形以中心点方法绘制。rect()函数的默认方法是从矩形左上角的角点开始绘制的。在开始绘制图形之前，我们需要定义一些变量。角度变量用来转动方形。要注意角度是以 度数为单位的。steps变量是组成花朵的正方形个数。flowerSize变量是指最大的那个正方形的大小，stepSize是用来控制正方形每次减小的程度。float