Processing.doc

Processing学习笔记（一）一、相关介绍：Processing是一门用来生成图片、动画和交互软件的编程语言。它的思想是简单地谢一行代码，就会在屏幕上生成一个圆。再增加一些代码，圆便能跟着鼠标走。在增加一些代码，圆便会随着鼠标的点击而改变颜色。我们把这称为用代码做草稿（Sketching）.你写一行，再加一行，效果随之增加。结果就是用一个个片段合成的程序。Processing是一种具有革命前瞻性的新兴计算机语言，它的概念是在电子艺术的环境下介绍程序语言，并将电子艺术的概念介绍给程序设计师。她是 Java 语言的延伸，并支持许多现有的 Java 语言架构，不过在语法 (syntax) 上简易许多，并具有许多贴心及人性化的设计。Processing 可以在 Windows、MAC OS X、MAC OS 9 、Linux 等操作系统上使用。本软件目前是处于初版测试的阶段，试用版听说最近真的快要出了！以 Processing 完成的作品可在个人本机端作用，或以Java Applets 的模式外输至网络上发布。虽然图形用户界面(GUI)早在二十年前成为主流，但是基础编程语言的教学到今天仍是以命令行接口为主，学习编程语言为什么要那么枯燥呢？人脑天生擅长空间辨识，图形用户界面利用的正是这种优势，加上它能提供各种实时且鲜明的图像式反馈 (feedback)，可以大幅缩短学习曲线，并帮助理解抽象逻辑法则。举例来说，计算机屏幕上的一个像素(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)是左上角的顶点 (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,350,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);/绘制弧形结果图：2、绘制顺序绘图顺序不同结果可能不一样，如绘画圆和长方形的先后顺序不同，如果有重合的部分，先后顺序不同，结果图不一样。3、图形的性质画一条平滑的线： smooth(); 去平滑：noSmooth();(1)设置画笔粗细： strokeWeight(a); a为画笔的粗细，该函数放在所需画出图形语句的前面；例2：设置画笔粗细size(980,720); /屏幕大小设定smooth();/打开平滑模式strokeWeight(8);/画笔粗度为8arc(90,60,80,80,0,radians(270);/绘制弧形noSmooth();/关闭平滑模式strokeWeight(20); /画笔粗度为20arc(500,200,100,100,radians(90),radians(270); /绘制弧形结果：(2)设置画笔属性改变线与线间的连接模式（即衔接角的形状）圆形/锥形转角：strokejoin(ROUND/BEVEL) 圆形/锥形线： 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);结果： 4、颜色可使用的函数： background() , fill() , stroke() ;括号内填写数字，数字的不同代表不同的颜色，其中，0代表黑色，255代表白色；（1）用灰度值作图：例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);/黑色fill(204);/浅灰色ellipse(132,82,200,200);/浅灰的圆形fill(153);/中度灰色ellipse(228,-16,200,200);/中度灰色的圆形fill(102);/深灰色ellipse(268,118,200,200);/深灰色的圆形结果：（2）控制填充与描边使用函数： noStroke()关闭画笔 noFill()关闭填充例5：控制填充与描边size(480,120);smooth();fill(153); /中度灰色ellipse(132,82,200,200); /灰色圈noFill();ellipse(228,-16,200,200);/圆形线框noStroke(); /关闭画笔ellipse(268,118,200,200);/不进行绘制结果注意：不要同时禁用填充（Fill）和画笔（Stroke）,这样就什么都不会出现了，犹如上面的例题。（其实应该是3个圆，但右下角的那个圆没有出现，被同时禁用了两个）。（3）用彩色绘图例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(268,118,200,200); /蓝色圆形结果：这里颜色指的是RGB的颜色，这是计算机在显示屏上定义颜色的方式。这三个数字分别代表 红绿蓝，他们的取值范围和灰度值一样也是0255.使用RGB的颜色并不是那么直接，所以选择一个颜色，使用工具颜色选择器，这样会显示一个像你在其他软件中见到的一样的调色板。选择一个颜色，然后提供它的R、G、B的值来设置background（），fill（）或者stroke（）的参数（Procesing 颜色选择器打开步骤： 选择Tools里面有Color Seletor）5、设置透明度 通过给fill()或者stroke()函数设置第四个可选的参数，它可以控制透明度。这第四个参数表示aipha值，取值范围同样是0255。 0代表颜色是完全透明的（根本就显示不出来），255值代表完全不透明，在两个极值之间的值导致了在屏幕上的颜色混合。例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、自定义图形beginShape()函数发出了一个开始新图形的信号。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：关闭间隙（Gap）例8中第一个和最后一个点没有连接起来，为了把他们连接起来，在endShape()函数中加上CLOSE的参数即 endShape(CLOSE);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);结果：例10：创造一些生物vertex()定义形状的能力可以使我们画出更复杂的物体的外形。任你所想，processing可以在屏幕上同时画出成千上万条线并描绘出一个了不起的形状。如下面的例题：size(480,120);smooth();/左边生成图形beginShape();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);verte