《Processing.docx》由会员分享，可在线阅读，更多相关《Processing.docx（7页珍藏版）》请在三一办公上搜索。
1、ProcessingProcessing学习笔记 一、相关介绍： Processing是一门用来生成图片、动画和交互软件的编程语言。它的思想是简单地谢一行代码，就会在屏幕上生成一个圆。再增加一些代码，圆便能跟着鼠标走。在增加一些代码，圆便会随着鼠标的点击而改变颜色。我们把这称为用代码做草稿.你写一行，再加一行，效果随之增加。结果就是用一个个片段合成的程序。 Processing是一种具有革命前瞻性的新兴计算机语言，它的概念是在电子艺术的环境下介绍程序语言，并将电子艺术的概念介绍给程序设计师。她是 Java 语言的延伸，并支持许多现有的 Java 语言架构，不过在语法 (syntax) 上简易许
2、多，并具有许多贴心及人性化的设计。Processing 可以在 Windows、MAC OS X、MAC OS 9 、Linux 等操作系统上使用。本软件目前是处于初版测试的阶段，试用版听说最近真的快要出了！以 Processing 完成的作品可在个人本机端作用，或以Java Applets 的模式外输至网络上发布。 虽然图形用户界面(GUI)早在二十年前成为主流，但是基础编程语言的教学到今天仍是以命令行接口为主，学习编程语言为什么要那么枯燥呢？人脑天生擅长空间辨识，图形用户界面利用的正是这种优势，加上它能提供各种实时且鲜明的图像式反馈 (feedback)，可以大幅缩短学习曲线，并帮助理解抽
3、象逻辑法则。举例来说，计算机屏幕上的一个像素(pixel) 就是一个变量值(the value of a variable) 的可视化表现。Processing将Java的语法简化并将其运算结果“感官化”，让使用者能很快享有声光兼备的交互式多媒体作品。 二、详细操作 1、基本形状： (1)直线 line(x1,y1,x2,y2); (2)三角形 triangle(x1,y1,x2,y2,x3,y3); (3)四边形 quad(x1,y1,x2,y2,x3,y3,x4,y4); (4)长方形 rect(x,y,width,height/正方形width=heigh);/(x,y)是左上角的顶点
4、(5)圆/椭圆 ellipse(x,y,width,height)； (6)圆弧 arc(x,y,width,height,start,stop); stop, start 表示为圆弧的起始位置与终止位置，用角度表示为： (0,PI,HALF_PI,QUARTER_PI,TWO_PI,radians(角度 如：90,270等）) 例1： size(1000,600);/屏幕大小设定 triangle(100,150,150,500,200,250); /三角形绘制 triangle(900,150,850,500,800,250); /同上 quad(100,10,200,250,100,35
5、0,400,450); /四边形绘制 quad(900,10,800,250,900,350,600,450); /同上 ellipse(500,400,500,100); /绘制椭圆 ellipse(500,100,140,140); /绘制圆 arc(500,200,400,400,-QUARTER_PI,PI+QUARTER_PI); /绘制弧形 结果图： 1 2、绘制顺序 绘图顺序不同结果可能不一样，如绘画圆和长方形的先后顺序不同，如果有重合的部分，先后顺序不同，结果图不一样。 3、图形的性质 画一条平滑的线： smooth; 去平滑：noSmooth; (1)设置画笔粗细： stro
6、keWeight(a); a为画笔的粗细，该函数放在所需画出图形语句的前面； 例2：设置画笔粗细 size(980,720); /屏幕大小设定 smooth;/打开平滑模式 strokeWeight(8);/画笔粗度为8 arc(90,60,80,80,0,radians(270);/绘制弧形 noSmooth;/关闭平滑模式 strokeWeight(20); /画笔粗度为20 arc(500,200,100,100,radians(90),radians(270); /绘制弧形 结果： 2 (2)设置画笔属性 改变线与线间的连接模式 圆形/锥形转角：strokejoin(ROUND/BEV
7、EL) 圆形/锥形线： strokeCap(ROUND/SQUARE); 例3：设置画笔属性 size(480,120); smooth; strokeWeight(12); strokeJoin(ROUND);/圆形的转角画笔 rect(40,25,70,70); strokeJoin(BEVEL);/锥形的转角画笔 rect(140,25,70,70); strokeCap(SQUARE);/方形的线 line(270,25,340,95); strokeCap(ROUND);/圆形的线 line(350,25,420,95); 结果： 3 4、颜色 可使用的函数： background
8、, fill , stroke ;括号内填写数字，数字的不同代表不同的颜色，其中，0代表黑色，255代表白色； 用灰度值作图： 例4：用灰度值作图 size(480,120); smooth; background(0);/背景黑色 fill(204);/浅灰色 ellipse(132,82,200,200);/浅灰的圆形 fill(153);/中度灰色 ellipse(228,-16,200,200);/中度灰色的圆形 fill(102);/深灰色 ellipse(268,118,200,200);/深灰色的圆形size(480，120）； smooth; background(0);/黑色
9、 fill(204);/浅灰色 ellipse(132,82,200,200);/浅灰的圆形 fill(153);/中度灰色 ellipse(228,-16,200,200);/中度灰色的圆形 fill(102);/深灰色 ellipse(268,118,200,200);/深灰色的圆形 结果： 控制填充与描边 使用函数： noStroke关闭画笔 noFill关闭填充 例5：控制填充与描边 size(480,120); smooth; fill(153); /中度灰色 ellipse(132,82,200,200); /灰色圈 noFill; ellipse(228,-16,200,200)
10、;/圆形线框 noStroke; /关闭画笔 4 ellipse(268,118,200,200);/不进行绘制 结果 注意：不要同时禁用填充和画笔,这样就什么都不会出现了，犹如上面的例题。 用彩色绘图 例6：用彩色绘图 size(480,120); noStroke; smooth; background(0,26,51); /深蓝色 fill(255,0,0); /红色 ellipse(132,82,200,200); /红色圆形 fill(0,255,0); /绿色 ellipse(228,-16,200,200); /绿色圆形 fill(0,0,255); /蓝色 ellipse(26
11、8,118,200,200); /蓝色圆形 结果： 这里颜色指的是RGB的颜色，这是计算机在显示屏上定义颜色的方式。这三个数字分别代表 红绿蓝，他们的取值范围和灰度值一样也是0255.使用RGB的颜色并不是那么直接，所以选择一个颜色，使用工具颜色选择器，这样会显示一个像你在其他软件中见到的一样的调色板。选择一个颜色，然后提供它的R、G、B的值来设置background，fill或者stroke的参数 5 选择Tools里面有5、设置透明度 通过给fill或者stroke函数设置第四个可选的参数，它可以控制透明度。这第四个参数表示aipha值，取值范围同样是0255。 0代表颜色是完全透明的，2
12、55值代表完全不透明，在两个极值之间的值导致了在屏幕上的颜色混合。 例7：设置透明度 size(480,120); noStroke; smooth; background(204,226,225); /浅蓝色 fill(255,0,0,160); /红色 ellipse(132,82,200,200); /红色圆形 fill(0,255,0,160); /绿色 ellipse(228,-16,200,200); /绿色圆形 fill(0,0,255,160); /蓝色 ellipse(268,118,200,200); /蓝色圆形 结果： 6 6、自定义图形 beginShape函数发出了一
13、个开始新图形的信号。vertex函数被用来定义每对X轴与Y轴的点的坐标。最后endShape函数发出这个图形定义结束的信号。 例8：画一个箭头 size(480,120); beginShape; vertex(180,82); vertex(207,36); vertex(214,63); vertex(407,11); vertex(412,30); vertex(219,82); vertex(226,109); endShape; 结果： 例9：关闭间隙 例8中第一个和最后一个点没有连接起来，为了把他们连接起来，在endShape函数中加上CLOSE的参数即 endShape(CLOS
14、E) ; size(480,120); beginShape; vertex(180,82); vertex(207,36); vertex(214,63); vertex(407,11); vertex(412,30); vertex(219,82); vertex(226,109); endShape(CLOSE); 结果： 7 例10：创造一些生物 vertex定义形状的能力可以使我们画出更复杂的物体的外形。任你所想，processing可以在屏幕上同时画出成千上万条线并描绘出一个了不起的形状。如下面的例题： size(480,120); smooth; /左边生成图形 beginSha
15、pe; vertex(50,120); vertex(100,90); vertex(110,60); vertex(80,20); vertex(210,60); vertex(160,80); vertex(200,90); vertex(140,100); vertex(130,120); endShape; fill(0); ellipse(155,60,8,8); /右边生成图 fill(255); beginShape; vertex(370,120); vertex(320,90); vertex(310,60); vertex(340,20); vertex(210,60); vertex(260,80); vertex(220,90); vertex(280,100); vertex(290,120); endShape; fill(0); ellipse(265,60,8,8); 结果： 8 七、注释 在这章中出现的“/”是表示为代码增加注释。注释是程序的一部分，但运行时会被忽略。当你用Processing草稿工作时，你将发现自己有许多新的想法，用注释来做个笔记或者注释一些代码可以让你保留多个选择。 9
