详细的processing学习笔记课件资料

processing 学习第一天笔记Processing Month第一天连接点第一部分这篇文章中，我们来看一下如何计算一个圆周上的点的坐标，并将他们连接起来。

我们将用灵活的方式来实现基于6个点和18个点的图像计算要计算这些点的坐标，必须知道圆上的点数量和圆的半径。

本例中，我们将画12个点。

int numPoint = 12;float radius = 150;下一步，我们来算一下每个点之间的角度。

众所周知一个整圆的角度是360度或2π弧度，所以用360度除以圆上的点数，就得到两点之间的角度。

例子中使用了弧度而不是角度，是因为cos()和sin()函数的形参是弧度数，不是角度数。

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;point[i] = 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,points[j].x,points[j].y );}}}源码：折叠Java 代码复制内容到剪贴板1.int numPoints = 10;2. PVector[] points = new PVector[numPoints];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. points[i] = 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,points[j].x,points[j].y );36. line( points[i].x, points[i].y,points[j].x,points[j].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, points[j].x,points[j].y );if ( dst < 255 ) {stroke( 255, 255 - dst );line( points<i>.x, points<i>.y, points[j].x, points[j].y );}画完这些细线之后，我们稍微放大点的体量，这样会让图像更好看。

以下这些代码将加入到第一个for-loop循环的结尾、内部循环之后。

stroke( 255 );strokeWeight(4);point( points<i>.x, points<i>.y );源码：折叠Java 代码复制内容到剪贴板1.int numPoints = 10;2.PVector [] points = new PVector[numPoints];void setup()3. {4. size(450,400);5. for(int i=0;i<numPoints;i++)6. {7. points[i]=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(points[i].x,points[j].y,points[j].x,points[j].y);21. if(dst<255) {22. stroke(255,255-dst);23. line(points[i].x,points[i].y,points[j].x,points[j].y);24. }25. }26. }27. stroke(255);28. strokeWeight(4);29. point(points[i].x,points[i].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度或者说是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) * 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 valuesprevX = x;prevY = y;如果你运行程序会发现线条不断往窗口外扩散回不来了。

我们需要在确定x和y值之后实现一个算法来确保线条留在屏幕内。

我们要检查新的x是不是小于0或者超出了宽度范围。

如果是这样，我们要把x和y值还原成之前的值，这样线条就不会超出窗口范围了，y值也做相同处理。