Processing基本形状内容和实例

一、Processing的基本形状内容和实例

       1.Processing有一组专门绘制基本图形得图案。像线条这样的基本图形可以被连接起来创建更为复杂得形状，例如一片叶子或者一张脸。

        2.为了绘制一条直线，我们需要四个参数，两个用于确定初始位置，另外两个用于确定结束位置。

例1:一条直线如图1

                                      图1

        注意:一条直线由两个端点构成，也就是说有四个参数，即（x1,y1）,(x2,y2).

而在Processing中输入的代码格式为:

line(x1,y1,x2,y2);

      先写代码如图2

                     图2

     保存运行如图3

                                         图3

  例2:一个三角形如图4

                                       图4

       注意:一个三角形有三个端点构成，也就是说有六个参数。即(x1,y1),(x2,y2),(x3,y3).而在Processing中输入的代码格式为:

triangle(x1,y1,x2,y2,x3,y3);

         先写代码如图5

                                       图5

          保存并运行如图6

                                    图6

例3:一个不规则四边形如图7

                                  图7

       注意:四边形有四个点，有八个参数，比三角形多了一个(x4,y4)。在这个例子里输入的代码格式为:

quad(x1,y1,x2,y2,x3,y3, x4,y4);

        先写代码如图8

                                    图8

         保存并运行如图9

                                  图9

例4:一个矩形如图10

  

                         图10

        注意:(x,y)是定义点的x轴和y轴,另外两个参数则是定义矩形的宽和高。因此矩形需要用四个参数来定义。输入的代码如下:

rect(x,y,width,height);

       先写代码如图11

                                    图11

        保存并运行如图12

                                  图12

例5:一个圆形如图13

  

                                        图13

         注意:(x,y)是确定圆的圆心，height和width是确定圆的宽和高。因此圆也是需要四个参数来定义，输入的代码如下:

ellipse(x,y,width,height);

        先写代码如图14

                                        图14

          保存并运行如图15

                                       图15

例6:缺了一角的圆如图16

                                  图16

         注意:(x,y)是确定圆的圆心，height和width是确定圆的宽和高。图6中的start指的是圆开始的角度，stop指的是圆结束的角度。输入的代码如下:

arc(x,y,start,stop);

        在这个例子中，我们不像之前的可以直接将数值带入，我们还需要了解一些内容。绘制椭圆的一部分我们需要加入开始的角度和结束的角度。但我们不能直接写几度几度，我们有两种方法写角度。

       第一种，代码如下:

arc(90,60,80,80,0,HALF_PI);

arc(190,60,80,80,0,PI+HALF_PI);

arc(290,60,80,80,PI,TWO_PI+HALF_PI);

arc(390,60,80,80,QUARTER,PI+QUARTER_PI);

       第一个和第二个参数是设置圆的圆心，第三个和第四个参数是设置圆的宽度和高度。第五个是设置弧形的初始角度，第六个参数是设置弧形的结束角度。角度是用弧度(radian)而不是角度(degree)绘制的。弧度是基于PI(3.14159)的弧度制数值绘制的。以上四个代码中，PI、QUARTER_PI、HALF_PI和TWO_PI的值可以被180°、45°、90°、360°的弧度值替代。

       第二种，我们可以用radians()函数转换角度数值。这个函数从角度数值中获得角度的信息，并把它转变为相应的弧度数值。这种方法和第一种显示的功能是一样的，只是第一种方法不常用，有点难，最常用的是第二种。

      如代码图17

                                      图17

        保存运行如图18

                                    图18

二、以上就是Processing的基本形状内容和实例，里面的实例 大家可以尝试着敲一下代码，改一下里面的数值，可以发现有趣的现象。下期我们讲形状属性，比如说设置描边粗细和色彩，让形状变得更加丰富、有趣。