详细的processing学习笔记.doc

processing 学习第一天笔记ProcessingMonth第一天连接点第一部分这篇文章中，我们来看一下如何计算一个圆周上的点的坐标，并将他们连接起来。我们将用灵活的方式来实现基于6个点和18个点的图像计算要计算这些点的坐标，必须知道圆上的点数量和圆的半径。本例中，我们将画12个点。intnumPoint=12;floatradius=150;下一步，我们来算一下每个点之间的角度。众所周知一个整圆的角度是360度或2弧度，所以用360度除以圆上的点数，就得到两点之间的角度。例子中使用了弧度而不是角度，是因为cos()和sin()函数的形参是弧度数，不是角度数。Processing中有一些关于圆和半圆的常量，TWO_PI就代表了常量PI*2。（这里的PVector其实是类型，代表这一个点）floatangle=TWO_PI/numPoint;for(inti=0;inumberPoints;i+)floatx=cos(angle*i)*radius;floaty=sin(angle*i)*radius;pointi=newPVector(x,y);我把计算的部分放在了setup()里面，把结果存在了PVector数组里，这样我们就不用在draw函数里一遍又一遍的计算点的x、y坐标。我还用了一个for循环，用来计算每个点的坐标，*angle*i*会在每个循环中计算出一个点的坐标。绘制接下来我们说一下，如何将圆上的点两两连线，我们需要用一个嵌套for循环，来遍历数组中的每一个点。if语句用来比较i和j的数字，如果他们不相等，电脑就在这两个点之间画一条线。如果i和j相等，说明是同一个点，那么就不用画线了。for(inti=0;inumPoints;i+)for(intj=0;jnumPoints;j+)if(j!=i)line(points.x,points.y,pointsj.x,pointsj.y);源码：折叠展开Java 代码复制内容到剪贴板1. intnumPoints=10;2. PVectorpoints=newPVectornumPoints;3. floatradius=150;4. voidsetup()5. 6. size(450,400);7. 8. floatangle=TWO_PI/numPoints;9. for(inti=0;inumPoints;i+)10. 11. floatx=cos(angle*i)*radius;12. floaty=sin(angle*i)*radius;13. pointsi=newPVector(x,y);14. 15. noLoop();16. 17. 18. voiddraw()19. 20. smooth();21. 22. PImageimg;23. img=loadImage(images/laDefense.jpg);24. background(img);25. /background(0);/background(0,0,255);26. 27. /fill(0,0,255);28. /fill(255,102,255);29. stroke(0,0,255,60);30. translate(width/2,height/2);31. for(inti=0;inumPoints;i+)32. for(intj=0;jnumPoints;j+)33. 34. if(j!=i)35. /line(points.x,points.y,pointsj.x,pointsj.y);36. line(pointsi.x,pointsi.y,pointsj.x,pointsj.y);37. 38. 39. 40. saveFrame(images/circle-connection-+numPoints+.png);41. 成果：processing 学习第二天笔记第二天连接点第二部分今天的例子和昨天的类似，只不过我们将使用随机点代替固定点，连接点的时候也将采用不同的方式。如果两点之间的距离小于某一个我们定义的数，我们就把这两个点连接起来。并且将连线的透明度与两点距离相关联，距离越大，连线就越透明。我们用dist()函数来计算两个点之间的距离。前两个参数是第一个点的x坐标和y坐标。第三，第四个参数是另外一个点的x坐标和y坐标。返回值为一个float类型的数值，代表两点之间的距离。如果距离小于255，我们就在这两点之间连线。floatdst=dist(points.x,points.y,pointsj.x,pointsj.y);if(dst255)stroke(255,255-dst);line(points.x,points.y,pointsj.x,pointsj.y);画完这些细线之后，我们稍微放大点的体量，这样会让图像更好看。以下这些代码将加入到第一个for-loop循环的结尾、内部循环之后。stroke(255);strokeWeight(4);point(points.x,points.y);源码：折叠展开Java 代码复制内容到剪贴板1. intnumPoints=10;2. PVectorpoints=newPVectornumPoints;voidsetup()3. 4. size(450,400);5. for(inti=0;inumPoints;i+)6. 7. pointsi=newPVector(random(width),random(height);8. 9. noLoop();10. voiddraw()11. 12. smooth();13. background(0);14. noFill();15. for(inti=0;inumPoints;i+)16. for(intj=0;jnumPoints;j+)17. 18. strokeWeight(1);19. if(j!=i)20. floatdst=dist(pointsi.x,pointsj.y,pointsj.x,pointsj.y);21. if(dst255)22. stroke(255,255-dst);23. line(pointsi.x,pointsi.y,pointsj.x,pointsj.y);24. 25. 26. 27. stroke(255);28. strokeWeight(4);29. point(pointsi.x,pointsi.y);/节点画点30. 31. saveFrame(images/random-connections-+numPoints+.png);32. 成果processing第三天学习笔记第三天是关于绘制三角形的，但我们并不是直接使用triangle()函数，而是画点和线，我们会限制线条，只绘制基于规则三角形的网格。为了使它更有趣，稍后我们会加入一些动画效果。图画的起始点位于窗口中央，因为我们要使线条动起来，所以我们需要跟踪当前点和前一个点的位置，把它们用线连接起来。我们还需要一个半径来计算新的点。我们最好在程序的开头就定义好这些变量。floatradius=20;floatx,y;floatprevX,prevY;下一步我们需要给这些变量赋值。起始点设在窗口的中心，所以我们将width和height除以2，然后分别赋值给x和y。width和height是内置系统变量，可以通过size()来赋值，并可以随时调用。x=width/2;y=height/2;prevX=x;prevY=y;接着，我们该编写draw()函数了。计算下一个点我们要用到cos()和sin()，它俩是我们在第一天用过的功能。因为我们要做的三角形是规则的，所以线条只需要在六个特定的方向移动，算法很简单。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()功能，它会达到取整的效果。floatangle=(TWO_PI/6)*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);/updateprevXandprevYwiththenewvaluesprevX=x;prevY=y;如果你运行程序会发现线条不断往窗口外扩散回不来了。我们需要在确定x和y值之后实现一个算法来确保线条留在屏幕内。我们要检查新的x是不是小于0或者超出了宽度范围。如果是这样，我们要把x和y值还原成之前的值，这样线条就不会超出窗口范围了，y值也做相同处理。if(xwidth)x=prevX;y=prevY;if(yheight)x=prevX;y=prevY;为了使我们的图画更有趣，我们给背景加一个淡出效果，这样那些线会像蛇一样移动。加入一个开关功能使用键盘按键来控制这个效果。为了达到这样的目的，我们需要在程序前加一个boolean变量。Booleanfade=true;下面的代码应当放在draw()函数的最前面，我们要先判断fade值是不是为真。如果为真，if语句中的代码会在最上层画一个透明的长方形。if(fade)noStroke();fill(0,4);rect(0,0,width,height);想要关闭淡出效果，我们要用到keyPressed()这个方法，它会在每次键盘有按键动作时被调用。如果用户按了*f*键，系统就切换一次fade的真假值。voidkeyPressed()if(key=f)fade=!fade;运行程序后你就能看到之前的线条都慢慢淡出背景，试一下f键关闭或启用淡出效果。源码:折叠展开Java 代码复制内容到剪贴板1. floatradius=40;2. floatx,y;3. floatprevX,prevY;4. Booleanfade=true;5. BooleansaveOne=false;6. voidsetup()7. size(450,400);8. background(0);9. stroke(255);10. x=width/2;11. y=height/2;12. prevX=x;13. prevY=y;14. stroke(255);15. strokeWeight(2);16. point(x,y);17. 18. 19. voiddraw()20. 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. floatangle=(TWO_PI/6)*floor(random(6);28. x+=cos(angle)*radius;29. y+=sin(angle)*radius;30. 31. if(xwidth)32. x=prevX;33. y=prevY;34. 35. 36. if(yheight)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(saveOne)49. saveFrame(image/triangle-grid-+second()+.png);50. saveOne=false;51. 52. delay(50);53. 54. voidkeyPressed()55. if(key=f)56. fade=!fade;57. 58. 59. if(key=s)60. saveOne=true;61. 62. 效果显示floor(x)函数:计算最接近的小于或等于X的整数值Namefloor()Examplesfloatx=2.88;inta=floor(x);/Setsato2DescriptionCalculatestheclosestintvaluethatislessthanorequaltothevalueoftheparameter.Syntaxfloor(n)Parametersnfloat:numbertorounddownReturnsintceil(x)函数:计算最接近的大于或等于X的整数值Nameceil()Examplesfloatx=8.22;inta=floor(x);/Setsato9DescriptionCalculatestheclosestintvaluethatisgreaterthanorequaltothevalueoftheparameter.Forexample,ceil(9.03)returnsthevalue10.Syntaxfloor(n)Parametersnfloat:numbertorounddownReturnsintprocessing 第四天学习笔记今天我们来看一下如何使用processing绘制更复杂的图形。我们会用到beginShape(),endShape()和vertex()这三个函数在屏幕上画一个星星。最开始我们声明一些变量，用来计算星星的点：内半径，外半径，尖角的个数和一个用来保存点坐标的数组。需要注意的是，这个数组的元素个数是2*numSpikes（尖角数量的两倍），因为其中既有内半径上的点又有外半径上的点。floatinnerRadius=70; floatouterRadius=180; intnumSpikes=5; PVectorpoints=newPVectornumSpikes*2; 接下来的事情是计算绘制星星所需的所有点。我们需要确保这些点的顺序，偶数点分布在外圈，奇数点在内圈。要做到这个奇偶分布，我们需要使用取模运算符。如果i%2的余数是0，那么这个点就是偶数点，分布在外圈。floatangle=TWO_PI/points.length; for(inti=0;ipoints.length;i+) floatx,y; if(i%2=0) x=cos(angle*i)*outerRadius; y=sin(angle*i)*outerRadius; else x=cos(angle*i)*innerRadius; y=sin(angle*i)*innerRadius; points=newPVector(x,y); 想把星星绘制到屏幕上，我们使用beginShape()和endShape()函数，利用我们计算的点来绘制。我们在这两个函数中间，利用一个for循环来遍历所有的数组，给每个点生成一个对应的Vertex。确保你调用endShape()函数时，参数为CLOSE，否则的话，图形就不会封闭。translate(width/2,height/2); beginShape(); for(inti=0;ipoints.length;i+) vertex(points.x,points.y); endShape(CLOSE); 源码：折叠展开Java 代码复制内容到剪贴板1. floatinnerRadius=70;2. floatouterRadius=180;3. intnumSpikes=5;4. PVectorpoints=newPVectornumSpikes*2;5. voidsetup()6. size(450,400);7. floatangle=TWO_PI/points.length;8. for(inti=0;ipoints.length;i+)9. floatx,y;10. if(i%2=0)11. x=cos(angle*i)*outerRadius;12. y=sin(angle*i)*outerRadius;13. 14. else15. x=cos(angle*i)*innerRadius;16. y=sin(angle*i)*innerRadius;17. 18. pointsi=newPVector(x,y);19. 20. 21. voiddraw()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(inti=0;ipoints.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. /colorc=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. voidmousePressed()47. if(mouseButton=LEFT)48. numSpikes+=1;/增加一个角49. outerRadius-=10;50. PVectorpoints1=newPVectornumSpikes*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是用来控制正方形每次减小的程度。flo