详细的processing学习笔记Word下载.doc
- 文档编号:14629894
- 上传时间:2022-10-23
- 格式:DOC
- 页数:42
- 大小:1.36MB
详细的processing学习笔记Word下载.doc
《详细的processing学习笔记Word下载.doc》由会员分享,可在线阅读,更多相关《详细的processing学习笔记Word下载.doc(42页珍藏版)》请在冰豆网上搜索。
(这里的PVector其实是类型,代表这一个点)
angle
/
numPoint;
for(int
i=0
;
i<
numberPoints;
i++){
x
cos(angle
*
i
)
radius;
y
sin(angle
point[i]
new
PVector(x,y
);
}
我把计算的部分放在了setup()里面,把结果存在了PVector数组里,这样我们就不用在draw函数里一遍又一遍的计算点的x、y坐标。
我还用了一个for循环,用来计算每个点的坐标,**angle*i**
会在每个循环中计算出一个点的坐标。
绘制
接下来我们说一下,如何将圆上的点两两连线,我们需要用一个嵌套for循环,来遍历数组中的每一个点。
if语句用来比较i和j的数字,如果他们不相等,电脑就在这两个点之间画一条线。
如果i和j相等,说明是同一个点,那么就不用画线了。
for
(int
0;
<
numPoints;
i++)
{
j
j++)
if
(
!
line(
points<
i>
.x,
.y,points[j].x,points[j].y
源码:
折叠展开Java代码复制内容到剪贴板
1.int
numPoints
10;
2.
PVector[]
points
PVector[numPoints];
3.
=150;
4.void
setup()
5.{
6.
size(450,400);
7.
8.
TWO_PI/numPoints;
9.
i=0;
10.
{
11.
12.
13.
points[i]
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.
i++){
32.
j=0;
j<
33.
34.
if(j!
=i)
35.
36.
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,我们就在这两点之间连线。
dst
dist(
.y,
points[j].x,points[j].y
255
stroke(
255,
-
points[j].x,
points[j].y
画完这些细线之后,我们稍微放大点的体量,这样会让图像更好看。
以下这些代码将加入到第一个for-loop循环的结尾、内部循环之后。
strokeWeight(4);
point(
.y
2.PVector
[]
void
4.
5.
points[i]=new
PVector(random(width),random(height));
10.}void
11.{
noFill();
16.
18.
strokeWeight
(1);
19.
dist(points[i].x,points[j].y,points[j].x,points[j].y);
if(dst<
255)
stroke(255,255-dst);
23.
line(points[i].x,points[i].y,points[j].x,points[j].y);
24.
stroke(255);
point(points[i].x,points[i].y);
//节点画点
saveFrame("
images/random-connections-"
32.}
成果
processing第三天学习笔记
第三天是关于绘制三角形的,但我们并不是直接使用
triangle()函数,而是画点和线,我们会限制线条,只绘制基于规则三角形的网格。
为了使它更有趣,稍后我们会加入一些动画效果。
图画的起始点位于窗口中央,因为我们要使线条动起来,所以我们需要跟踪当前点和前一个点的位置,把它们用线连接起来。
我们还需要一个半径来计算新的点。
我们最好在程序的开头就定义好这些变量。
20;
x,
y;
prevX,
prevY;
下一步我们需要给这些变量赋值。
起始点设在窗口的中心,所以我们将
width和
height除以2,然后分别赋值给x和y。
width和height是内置系统变量,可以通过size()来赋值,并可以随时调用。
width
2;
height
prevX
x;
prevY
接着,我们该编写
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()功能,它会达到取整的效果。
(TWO_PI
6)
floor(
random(
6
));
+=
cos(
sin(
这样每次
draw()函数每调用一次点就会移动到网格上的新位置。
下一步我们需要在当前点和前一个点之间画线。
我们还需要在
draw()的末尾将前一点替换为当前点,否则在第一帧之后就不会有动态了。
64
strokeWeight(
1
y,
3
update
and
with
the
values
prevY
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 详细 processing 学习 笔记