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);//画笔粗度为8

arc(90,60,80,80,0,radians(270));//绘制弧形

 

noSmooth();//关闭平滑模式

strokeWeight(20); //画笔粗度为20

arc(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的颜色，这是计算机在显示屏上定义颜色的方式。这三个数字分别代表 红绿蓝，他们的取值范围和灰度值一样也是0~255.使用RGB的颜色并不是那么直接，所以选择一个颜色，使用工具—>颜色选择器，这样会显示一个像你在其他软件中见到的一样的调色板。选择一个颜色，然后提供它的R、G、B的值来设置background（），fill（）或者stroke（）的参数

（Procesing 颜色选择器打开步骤：   选择Tools里面有Color Seletor）

 

5、设置透明度

 通过给fill()或者stroke()函数设置第四个可选的参数，它可以控制透明度。这第四个参数表示aipha值，取值范围同样是0~255。 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);

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

结果：

 

七、注释

   在这章中出现的“//”是表示为代码增加注释。注释是程序的一部分，但运行时会被忽略。当你用Processing草稿工作时，你将发现自己有许多新的想法，用注释来做个笔记或者注释一些代码可以让你保留多个选择。