-
processing
学习第一天笔记
Processing
Month
第一天
连接点
第一部分
这篇文章中，
我们来看一下如何计算一个圆周上的点的坐标，
并将他们连接起来。
我们将用
灵活的方式来实现基于
6
个点和
18
个点的图像
计算
要计算这些点的坐标，必须知道
圆上的点数量和圆的半径。本例中，我们将画
12
个点。
int numPoint = 12;
float radius = 150;
下一步，我们来算
一下每个点之间的角度。众所周知一个整圆的角度是
360
度或
2π
弧度，
所以用
360
度除以圆上的点数，就得到两点之间的角度。例子中使用了弧度而不是角度，
是因为
cos()
和
sin()
函数的形参是弧度数，<
/p>
不是角度数。
Processing
中有
一些关于圆和半
圆的常量，
TWO_PI
就代表了常量
PI*2
。（这里的
PVector
其实是类型，代表这一个点）
float
angle = TWO_PI / numPoint;
for(int i=0
; 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
循环，来遍历数组<
/p>
中的每一个点。
if
语句用来比较
i
和
j
的数字，如果
他们不相等，电脑就在这两个点之间画
一条线。如果
i
和
j
相等，说明是同一个点，那么就不用画线了
。
for (int i = 0; i <
numPoints; i++) {
for (int j = 0; j
< numPoints; j++) {
if ( j != i
) {
line( points.x,
points.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.
今天的例子和昨天的类似， <
br>连接点的时候也将采用不
坐标和 画完这些细线之后， 三个角的度数之和是 PI <
br>去除，得到 <
br>值，而我想要的结果是 <
br>fade if
<
br>要做到这个奇偶分布，
for(int
i=0;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(
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
32.
for(int j=0;j
33.
{
34.
if(j!=i) {
35.
// line( points.x,
points.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(
41.
}
成果：
processing
学习第二天笔记
第二天
连接点
第二部分
只不过我们将使用随机点代替固定点，
同的方式。
如果两点之间的距离
小于某一个我们定义的数，
我们就把这两个点连接起来。
并
且将连线的透明度与两点距离相关联，距离越大，连线就越透明。
我们用
dist()
函数来计算两个点之间的距离。前两个参数是第一个点的
x
y
坐标。
第三，第四个参数
是另外一个点的
x
坐标和
y
坐标。返回值为一个
float
类型的数值，代表
两点之间的距离。如果距离小于
255
，我们就在这两点之间连线。
float dst =
dist( points.x, points.y,
points[j].x,points[j].y );
if ( dst <
255 ) {
stroke( 255, 255 - dst );
line( points.x, points.y,
points[j].x, points[j].y );
}
我们稍微放大点的体量，
这样会让图像
更好看。
以下这些代码将加入到
第一个
for-loop
循环的结尾、内部循环之后。
stroke( 255 );
strokeWeight(4);
point(
points.x, points.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
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
16.
for(int
j=0;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(
32.
}
成果
processing
第三天学习笔记
第三天是关于绘制三角形的，但我们并不是直接使用
triangle()
函数，而是画点和线，我
们会限制线条，
只绘制基于规则三角形的网格。
为了使它更有趣
，
稍后我们会加入一些动画
效果。
<
/p>
图画的起始点位于窗口中央，
因为我们要使线条动起来，
所以我们需要跟踪当前点和前一个
点的位置，
把
它们用线连接起来。
我们还需要一个半径来计算新的点。
我们最
好在程序的开
头就定义好这些变量。
float radius = 20;
float x,
y;
float prevX, prevY;
下一步我们
需要给这些变量赋值。起始点设在窗口的中心，所以我们将
width
和
height
除以
2
，
然后分别赋值给
x
和
y
。
width
和
h
eight
是内置系统变量，
可以通过
size()
来赋值，
并可以随时调用。
x = width / 2;
y = height
/ 2;
prevX = x;
prevY =
y;
接着，我们该编写
draw(
)
函数了。计算下一个点我们要用到
cos()
和
sin()
，它俩是我们
在第一天用过的功能。
因为我们要做的三角形是规则的，
所以线条只需要在六个特定的方向
移动，算法很简单。
1.
180
度或者说是
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()
函数每调用一次点就会移动到网格上的新位置。
下一步我们需要在当前点
和前一个点之间画线。我们还需要在
dr
aw()
的末尾将前一点替换为当前点，否则在第一帧
之后就不
会有动态了。
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<
/p>
和
y
值还原成之前的值，这样线条就不会
超出窗口范围了，
y
值也做
相同处理。
if ( x < 0 || x > width ) {
x = prevX;
y = prevY;
}
if ( y < 0 || y > height)
{
x = prevX;
y = prevY;
}
为了使我们的图画更有趣，
我们给
背景加一个淡出效果，
这样那些线会像蛇一样移动。
加入
一个开关功能使用键盘按键来控制这个效果。
为了达到这样的目的，<
/p>
我们需要在程序前加一
个
boolean
变量。
Boolean fade
= true;
下面的代码应当放在
draw()
函数的最前面，
我们要先判断
值是不是为真。
如果为真，
语句中的代码会在最上层画一个透明的长方形。
if (fade) {
noStroke();
fill( 0, 4 );
rect( 0, 0,
width, height );
}
想要关闭淡出效果，
我们要用到
keyPressed()
这个方法，
它会在每次键盘有按键动作时被调
用。如果用户按了
**f**
键，系统就切换一次
fa
de
的真假值。
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(
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 par
ameter.
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*numS
pikes
（尖角数量的两倍），因为
其中既有内半径上的点又
有外半径上的点。
float innerRadius =
70; float outerRadius = 180;
int
numSpikes = 5;
PVector[] points = new
PVector[ numSpikes * 2 ];
接
下来的事情是计算绘制星星所需的所有点。
我们需要确保这些点的顺序，
偶数点分布在外
圈，
奇数点在内圈。
我们需要使用取模运算符。
如果<
/p>
i%2
的余数是
0
，
那么这个点就是偶数点，分布在外圈。
float angle = TWO_PI /
for
( int i = 0; i < 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 < i++) { vertex( points.x,
points.y );
}
endShape(CLOSE);
源码：
折叠
Java
代码复制内容到剪贴板
-
-
-
-
-
-
-
-
-
上一篇：我的processing学习笔记
下一篇：用 Processing 进行数据可视化