详细的processing学习笔记

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

2、 Processing中有一些关于圆和 半圆的常量，TWO_PI就代表了常量PI*2。(这里的PVector其实是类型，代表这一个 点)float angle = TWO_PI / numPoint;for(int i=0 ; i<numberPoints;i+)float x = cos(angle * i) * radius;float y = sin(angle * i) * radius;pointi = new PVector(x,y );我把计算的部分放在了 setup()里面，把结果存在了 PVector数组里，这样我们就不用在 draw函数里一遍又一遍的计算点的 x、y坐

3、标。我还用了一个 for循环，用来计算每个点 的坐标，*angle*i*会在每个循环中计算出一个点的坐标。绘制接下来我们说一下，如何将圆上的点两两连线，我们需要用一个嵌套 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<i>.x, points<i>.y,

4、pointsj.x,pointsj.y );源码：折叠Java代码复制内容到剪贴板1. int numPoints = 10;2. PVector points = new PVectornumPoints;3. float radius =150;4. void setup()5. 6. size(450,400);7.8. float angle = TWO_PI/numPoints;9. for(int i=0;i<numPoints;i+)10. 11. float x = cos(angle * i) * radius;12. float y = sin(angle * i)

5、* radius;13. pointsi = new PVector(x,y);14. 15. noLoop();16. 17.18. void draw()19. 20. smooth();21.22. PImage img;23. img = loadImage("images/laDefense.jpg");24. background(img);25. / background© /background(0,0,255);26.27. /fill(0,0,255);28. / fill(255,102,255);29. stroke(0,0,255,60)

6、;30. translate(width/2,height/2);31. for(int i=0;i<numPoints;i+)32. for(int j=0;j<numPoints;j+)33. 34. if(j!=i) 35. / line( points<i>.x, points<i>.y,pointsj.x,pointsj.y );36. line( pointsi.x, pointsi.y,pointsj.x,pointsj.y );37. 38. 39. 40. saveFrame("images/circle-connection-&

7、quot;+numPoints+".png");41. 成果：Inprocessing 学 习第二天笔记第二天连接点第二部分今天的例子和昨天的类似，只不过我们将使用随机点代替固定点，连接点的时候也将采用不同的方式。如果两点之间的距离小于某一个我们定义的数，我们就把这两个点连接起来。并且将连线的透明度与两点距离相关联，距离越大，连线就越透明。我们用dist()函数来计算两个点之间的距离。前两个参数是第一个点的x坐标和y坐标。第三，第四个参数是另外一个点的x坐标和y坐标。返回值为一个 float类型的数值，代表两点之间的距离。如果距离小于255,我们就在这两点之间连线。floa

8、t dst = dist( points<i>.x, points<i>.y, pointsj.x,pointsj.y );if ( dst < 255 ) stroke( 255, 255 - dst );line( points<i>.x, points<i>.y, pointsj.x, pointsj.y );画完这些细线之后，我们稍微放大点的体量，这样会让图像更好看。以下这些代码将加入到第一个for-loop循环的结尾、内部循环之后。stroke( 255 );strokeWeight(4);point( points<i&g

9、t;.x, points<i>.y );源码：折叠Java代码复制内容到剪贴板1. int numPoints = 10;2. PVector points = new PVectornumPoints;void setup()3. (4. size(450,400);5. for(int i=0;i<numPoints;i+)6. (7. pointsi=new PVector(random(width),random(height);8. )9. noLoop();10. void draw()11. 12. smooth();13. background(0);14.

10、noFill();15. for(int i=0;i<numPoints;i+)16. for(int j=0;j<numPoints;j+)17. 18. strokeWeight(1);19. if(j!=i) 20. float dst = dist(pointsi.x,pointsj.y,pointsj.x,pointsj.y);21. if(dst<255) 22. stroke(255,255-dst);23. line(pointsi.x,pointsi.y,pointsj.x,pointsj.y);24. 25. 26. 27. stroke(255);28.

11、 strokeWeight(4);29. point(pointsi.x,pointsi.y); / 节点回点30. 31. saveFrame("images/random-connections-"+numPoints+".png");32. 成果processing第三天学习笔记第三天是关于绘制三角形的，但我们并不是直接使用triangle()函数，而是画点和线，我们会限制线条，只绘制基于规则三角形的网格。为了使它更有趣，稍后我们会加入一些动画效果。图画的起始点位于窗口中央，因为我们要使线条动起来，所以我们需要跟踪当前点和前一 个点的位置，把它们用

12、线连接起来。我们还需要一个半径来计算新的点。我们最好在程序 的开头就定义好这些变量。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(),它俩是我们在第一天用过的功能。因

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

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

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

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

17、f (key = 'f') fade = !fade;)运行程序后你就能看到之前的线条都慢慢淡出背景，试一下f键关闭或启用淡出效果。源码:折叠Java代码复制内容到剪贴板1. float radius = 40;2. float x,y;3. float prevX,prevY;4. Boolean fade = true;5. Boolean saveOne = false;6. void setup()7. size(450,400);8. background(0);9. stroke(255);10. x = width/2;11. y = height/2;12. p

18、revX = x;13. prevY = y;14. stroke(255);15. strokeWeight(2);16. point(x,y);17.18. 19. void draw()21. if(fade)22. noStroke();23. fill(0,4);24. / fill(random(204),random(100),random(20),4);25. rect(0,0,width,height);26. 27. float angle = (TWO_PI/6) * floor(random(6);28. x+= cos(angle) * radius;29. y +=

19、 sin(angle) * radius;30.31. if(x<0|x>width)32. x= prevX;33. y= prevY;34. 35.36. if(y<0|y>height)37. x = prevX;38. y = prevY;39. 40. / stroke(255,64);41. stroke(255,0,0,100);42. strokeWeight(1);43. line(x,y,prevX,prevY);44. strokeWeight(3);45. point(x,y);46. prevX = x;47. prevY = y;48. if

20、(saveOne)49. saveFrame("image/triangle-grid-" + second() + ".png");50. saveOne = false;51. 52. delay(50);53. 54. void keyPressed()55. if(key='f)56. fade =!fade;58.59. if(key='s')60. saveOne = true;61. 62. 效果显示floor(x)函数:计算最接近的小于或等于X的整数值Namefloor()Examplesfloat x = 2.8

21、8;int a = floor(x); / Sets 'a' to 2DescriptionCalculates the closest int value that is less than or equal to the value of the par ameter.Syntax floor(n)Parameters n float: number to round downReturns intceil(x)函数:计算最接近的大于或等于X的整数值Name ceil()Examplesfloat x = 8.22;int a = floor(x); / Sets '

22、;a' to 9DescriptionCalculates the closest int value that is greater than or equal to the value of the parameter. For example, ceil(9.03) returns the value 10.Parameters nSyntax floor(n)float: number to round downReturns intprocessing 第 四 天学 习 笔记今天我们来看一下如何使用processing绘制更复杂的图形。我们会用到beginShape()end

23、Shape()和vertex()这三个函数在屏幕上画一个星星。最开始我们声明一些变量，用来计算星星的点：内半径，外半径，尖角的个数和一个用来保存点坐标的数组。需要注意的是，这个数组的元素个数是2*numSpikes(尖角数量的两倍)，因为其中既有内半径上的点又有外半径上的点。float innerRadius = 70; float outerRadius = 180; int numSpikes = 5;PVector口points = new PVector numSpikes * 2 ;接下来的事情是计算绘制星星所需的所有点。我们需要确保这些点的顺序，偶数点分布在 外圈，奇数点在内圈。要

24、做到这个奇偶分布，我们需要使用取模运算符。如果 i%2的余数 是0,那么这个点就是偶数点，分布在外圈。float angle = TWO_PI / points.length;for ( int i = 0; i < points.length; i+ ) float x, yif ( i % 2 = 0 ) x=cos(angle*i)*y=sin(angle*i)*x=cos(angle*i)*y=sin(angle*i)*points<i> = new PVector(outerRadius;outerRadius; else innerRadius;innerRadi

25、us;x, y ); 想把星星绘制到屏幕上，我们使用 beginShape()和endShape()函数，利用我们计算的 点来绘制。 我们在这两个函数中间，利用一个 for循环来遍历所有的数组，给每个点生成 一个对应的Vertex。确保你调用 endShape()函数时，参数为 CLOSE,否则的话，图形 就不会封闭。translate(width/2, height/2 );for (int vertex(i = 0; i < points.length; points<i>.x, points<i>.ybeginShape(); i+) );endShape(

26、CLOSE);源码:折叠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,400);7. float angle = TWO_PI /points.length;8. for(int i= 0;i<points.length;i+)9. float x,y;10. if(i%2=0)11. x = cos(angle

27、* 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. 20. 21. void draw()22. background(0,0,32);23. translate(width/2,height/2); 转换 width/2,height/2中心点作为绘图坐标(0,0)24. smoo

28、th。；25. fill(255,128,0);26. noStroke();27. beginShape();28. for(int i =0 ;i< points.length;i+)29. vertex(pointsi.x,pointsi.y);30. 31. endShape(CLOSE);32. saveFrame("images/star-" + numSpikes +".png");33. stroke(255);34. /strokeWeight(1);35. /color c = color(20,80,0);36. /fill(

29、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(mouseButton = LEFT)48. numSpikes += 1; / 增加一个角49. outerRadius -= 10;50. PVector 口 points1 =

30、 new PVectornumSpikes *2 ; 改变星星的角数 *251. points = points1;52. 53. if(mouseButton = RIGHT)54. innerRadius += 10;55. 56. setup();57. redraw();58. 成果：processing 第五天学习笔记今天我们要学习一下如何通过叠加多个矩形来绘制一朵花。您将会用到translate。 和rotate ()这两个新的方法。第一步，使用rectMode(CENTER)来使你的矩形以中心点方法绘制。rect()函数的默认方法是从矩形左上角的角点开始绘制的。在开始绘制图形之前，我们需要定义一些变量。角度变量用来转动方形。要注意角度是以度数为单位的。steps变量是组成花朵的正方形个数。flowerSize变量是指最大的那个正方形的大小，stepSize是用来控制正方形每次减小的程度。float a