processing 学习.docx
processing 学习processing 学习第一天笔记 Processing Month第一天 连接点 第一部分 这篇文章中，我们来看一下如何计算一个圆周上的点的坐标，并将他们连接起来。我们将用灵活的方式来实现基于6个点和18个点的图像 计算 要计算这些点的坐标，必须知道圆上的点数量和圆的半径。本例中，我们将画12个点。 int numPoint = 12; float radius = 150; 下一步，我们来算一下每个点之间的角度。众所周知一个整圆的角度是360度或2弧度，所以用360度除以圆上的点数，就得到两点之间的角度。例子中使用了弧度而不是角度，是因为 cos 和 sin 函数的形参是弧度数，不是角度数。Processing中有一些关于圆和半圆的常量， TWO_PI 就代表了常量PI*2。 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坐标。我还用了一个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,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 ) * 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(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(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-"+numPoints+".png"); 41. 成果：processing 学习第二天笔记 第二天 连接点第二部分 今天的例子和昨天的类似，只不过我们将使用随机点代替固定点，连接点的时候也将采用不同的方式。如果两点之间的距离小于某一个我们定义的数，我们就把这两个点连接起来。并且将连线的透明度与两点距离相关联，距离越大，连线就越透明。 我们用 dist函数来计算两个点之间的距离。前两个参数是第一个点的x坐标和y坐标。第三，第四个参数是另外一个点的x坐标和y坐标。返回值为一个float类型的数值，代表两点之间的距离。如果距离小于255，我们就在这两点之间连线。 float 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>.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. 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. strokeWeight(4); 29. point(pointsi.x,pointsi.y); /节点画点 30. 31. saveFrame("images/random-connections-"+numPoints+".png"); 32. 成果 processing第三天学习笔记 第三天是关于绘制三角形的，但我们并不是直接使用 triangle函数，而是画点和线，我们会限制线条，只绘制基于规则三角形的网格。为了使它更有趣，稍后我们会加入一些动画效果。 图画的起始点位于窗口中央，因为我们要使线条动起来，所以我们需要跟踪当前点和前一个点的位置，把它们用线连接起来。我们还需要一个半径来计算新的点。我们最好在程序的开头就定义好这些变量。 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，它俩是我们在第一天用过的功能。因为我们要做的三角形是规则的，所以线条只需要在六个特定的方向移动，算法很简单。 1.三个角的度数之和是180度或者说是PI 2.我们做的是等边三角形，所以每个角是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) * 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 new values prevX = x; prevY = y; 如果你运行程序会发现线条不断往窗口外扩散回不来了。我们需要在确定x和y值之后实现一个算法来确保线条留在屏幕内。我们要检查新的x是不是小于0或者超出了宽度范围。如果是这样，我们要把x和y值还原成之前的值，这样线条就不会超出窗口范围了，y值也做相同处理。 if ( x < 0 | x > width ) x = prevX; y = prevY; if ( y < 0 | y > height) x = prevX; y = prevY; 为了使我们的图画更有趣，我们给背景加一个淡出效果，这样那些线会像蛇一样移动。加入一个开关功能使用键盘按键来控制这个效果。为了达到这样的目的，我们需要在程序前加一个boolean变量。 Boolean fade = true; 下面的代码应当放在 draw函数的最前面，我们要先判断fade值是不是为真。如果为真，if语句中的代码会在最上层画一个透明的长方形。 if (fade) noStroke; fill( 0, 4 ); rect( 0, 0, width, height ); 想要关闭淡出效果，我们要用到keyPressed这个方法，它会在每次键盘有按键动作时被调用。如果用户按了*f* 键，系统就切换一次fade的真假值。 void keyPressed if (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. prevX = x; 13. prevY = y; 14. stroke(255); 15. strokeWeight(2); 16. point(x,y); 17. 18. 19. void draw 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. float angle = (TWO_PI/6) * floor(random(6); 28. x += cos(angle) * radius; 29. y += 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(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; 57. 58. 59. if(key='s') 60. saveOne = true; 61. 62. 效果显示floor(x)函数:计算最接近的小于或等于X的整数值 Namefloor Examples float x = 2.88; int a = floor(x); / Sets 'a' to 2 DescriptionCalculates the closest int value that is less than or equal to the value of the parameter. Syntax floor(n) Parameters n float: number to round down Returns int ceil(x)函数:计算最接近的大于或等于X的整数值 Name ceil Examples float x = 8.22; int a = floor(x); / Sets 'a' to 9 DescriptionCalculates 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. Syntax floor(n) Parameters n float: number to round down Returns int processing 第四天学习笔记 今天我们来看一下如何使用processing绘制更复杂的图形。我们会用到 beginShape, endShape和 vertex这三个函数在屏幕上画一个星星。最开始我们声明一些变量，用来计算星星的点：内半径，外半径，尖角的个数和一个用来保存点坐标的数组。需要注意的是，这个数组的元素个数是 2*numSpikes，因为其中既有内半径上的点又有外半径上的点。 float innerRadius = 70; float outerRadius = 180; int numSpikes = 5; PVector points = new PVector numSpikes * 2 ; 接下来的事情是计算绘制星星所需的所有点。我们需要确保这些点的顺序，偶数点分布在外圈，奇数点在内圈。要做到这个奇偶分布，我们需要使用取模运算符。如果i%2的余数是0，那么这个点就是偶数点，分布在外圈。 float angle = TWO_PI / points.length; for ( int i = 0; i < points.length; i+ ) float x, 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<i> = new PVector( x, y ); 想把星星绘制到屏幕上，我们使用 beginShape和 endShape函数，利用我们计算的点来绘制。 我们在这两个函数中间，利用一个for循环来遍历所有的数组，给每个点生成一个对应的Vertex。确保你调用 endShape函数时，参数为 CLOSE，否则的话，图形就不会封闭。 translate( width/2, height/2 ); beginShape; for (int i = 0; i < points.length; i+) vertex( points<i>.x, points<i>.y ); endShape(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 * 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. smooth; 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(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 = new PVectornumSpikes *2 ; /改变星星的角数*2 51. 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 angle = 6; int steps = 50; float flowerSize = 150; float stepSize = 3; 我们想在屏幕中心画这朵花，所以我们用 translate(width/2，height/2)把坐标原点移至窗口中心。我们需要这样做所以我们才能将所有正方形的中心定在窗口中心然后转动它们。 rotate函数是以0点为中心转动的。如果我们不用translate函数而是使用 rect(width/2，height/2，flowerSize，flowerSize)画正方形的话，我们就会得到完全不同的结果。 所以这个算法要这样来，使用 radians函数需要把角度制的角度转换为弧度制，而 rotate函数需要用弧度制。 translate( width/2, height/2 ); for ( int i = 0; i < steps; i+ ) rotate( radians( angle * i ) ); rect( 0, 0, flowerSize - (stepSize * i), flowerSize - (stepSize * i) ); 明天我们会学习如何创建一个可以绘制多个不同花朵的方法。 源码：折叠Java 代码复制内容到剪贴板 1. float angle = 6; 2. int steps = 80; 3. float flowerSize = 300; 4. float stepSize = 3; 5. void setup 6. 7. size(500,450); 8. rectMode(CENTER); 9. background(0); 10. stroke(255); 11. fill(0); 12. noLoop; 13. 14. void draw 15. translate(width/2,height/2); 16. for(int i = 0;i<steps;i+) 17. rotate(radians(angle * i); 18. rect(0,0,flowerSize - (stepSize * i),flowerSize - (stepSize * i); 19. 20. 21. saveFrame("images/flower" + "ok" + ".png"); 22. 效果
