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);

源码：

float innerRadius = 70;
float outerRadius = 180;
int numSpikes = 5;
PVector [] points = new PVector[numSpikes *2 ];
void setup(){
size(450,400);
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);
}
}
void draw(){
background(0,0,32);
translate(width/2,height/2); //转换width/2,height/2 中心点作为绘图坐标(0,0)
smooth();
fill(255,128,0);
noStroke();
beginShape();
for(int i =0 ;i< points.length;i++){
vertex(points[i].x,points[i].y);
}
endShape(CLOSE);
saveFrame("images/star-" + numSpikes +".png");
//stroke(255);
//strokeWeight(1);
//color c = color(20,80,0);
//fill(c);
//beginShape(LINES);
//rect(30, 20,85, 80);
//ellipse(30, 20,85, 20);
//vertex(30, 20);
//vertex(85, 20);
//vertex(85, 75);
//vertex(30, 75);
//endShape();
}
void mousePressed(){
if(mouseButton == LEFT){
numSpikes += 1; //增加一个角
outerRadius -= 10;
PVector [] points1 = new PVector[numSpikes *2 ]; //改变星星的角数*2
points = points1;
}
if(mouseButton == RIGHT){
innerRadius += 10;
}
setup();
redraw();
}

成果：