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度或者说是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 = 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.x, points.y ）;
}
endShape（CLOSE）;
源码：
折叠展开Java代码复制内容到剪贴板
1.float innerRadius = 70;
2.float outerRadius = 180;
3.int numSpikes = 5;
4.PVector [] points = new PVector[numSpikes *2 ];
5.void setup（）{
6. size（450,400）;
7. float angle = TWO_PI /points.length;
8. for（int i= 0;i9. 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. points[i] = 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（points[i].x,points[i].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（LI
升级会员 