Processing之旅-----【12课，2D绘画基础】

yangfanconan

同学们我们上课，今天我们继续学习Processing的输出功能
//今天我们主要讲述Processing的2D绘画基础
//下面我会用一个小程序来详细说明每一个画图函数的用法。

1. //同学们我们上课，今天我们继续学习Processing的输出功能
   
2. //今天我们主要讲述Processing的2D绘画基础
   
3. //下面我会用一个小程序来详细说明每一个画图函数的用法。
   
4. //
   
5. //
   
6. //
   
7. //
   
8. //
   
9. //
   
10. void setup()
    
11. {
    
12.         size(512, 512);
    
13.         //既然讲到2D绘画，那么颜色当然也得说一说
    
14.         //颜色函数基本函数
    
15.         colorMode(RGB);//一下是colorMode的使用方法        
    
16. 
    
17.         // colorMode(mode)    mode         int: Either RGB or HSB, corresponding to Red/Green/Blue and Hue/Saturation/Brightness
    
18.         // colorMode(mode, max) max 参数是对颜色变量的范围        
    
19.         // colorMode(mode, max1, max2, max3) max1         
    
20.         // colorMode(mode, max1, max2, max3, maxA)
    
21.         
    
22.         background(0, 0, 0, 0);//背景色设置函数（R,G,B,A)
    
23.         //clear();//清除用的
    
24.         fill(255, 0, 0, 100);//填充颜色
    
25.         // noFill();//不进行填充
    
26.          noStroke();//不绘画边界
    
27.         //stroke(0, 255, 0, 0);//绘画边界，并设置边界颜色
    
28. 
    
29.         arc(50, 55, 50, 50, 0, HALF_PI);//花一段弧线
    
30.         ellipseMode(CENTER);//椭圆的模式 参数分别可以填RADIUS；CENTER CORNER CORNERS
    
31. 
    
32.         //        ellipse(a, b, c, d)
    
33.         // a         float: x-coordinate of the ellipse
    
34.         // b         float: y-coordinate of the ellipse
    
35.         // c         float: width of the ellipse by default
    
36.         // d         float: height of the ellipse by default
    
37.         ellipse(100, 100, 50, 50);//画一个椭圆的特例圆
    
38. 
    
39.         // 画现函数的详情
    
40.         // line(x1, y1, x2, y2)
    
41.         // line(x1, y1, z1, x2, y2, z2)
    
42.                
    
43.         // x1         float: x-coordinate of the first point第一个点的x坐标
    
44.         // y1         float: y-coordinate of the first point第一个点的y坐标
    
45.         // x2         float: x-coordinate of the second point第二个点的x坐标
    
46.         // y2         float: y-coordinate of the second point第二个点的y坐标
    
47.         // z1         float: z-coordinate of the first point第一个点的z轴坐标
    
48.         // z2         float: z-coordinate of the second point第二个点的z轴坐标
    
49.         line(0, 0, width,height);//画一条线
    
50. 
    
51. 
    
52. 
    
53.         // point(x, y)
    
54.         // point(x, y, z)
    
55.                
    
56.         // x         float: x-coordinate of the point
    
57.         // y         float: y-coordinate of the point
    
58.         // z         float: z-coordinate of the point
    
59. 
    
60.         point(width,height, 0);//画一个点
    
61. 
    
62.                
    
63. 
    
64.         // quad(x1, y1, x2, y2, x3, y3, x4, y4)
    
65.                
    
66.         // x1         float: x-coordinate of the first corner
    
67.         // y1         float: y-coordinate of the first corner
    
68.         // x2         float: x-coordinate of the second corner
    
69.         // y2         float: y-coordinate of the second corner
    
70.         // x3         float: x-coordinate of the third corner
    
71.         // y3         float: y-coordinate of the third corner
    
72.         // x4         float: x-coordinate of the fourth corner
    
73.         // y4         float: y-coordinate of the fourth corner
    
74.         quad(38, 31, 86, 20, 69, 63, 30, 76);//画一个四边形
    
75.                         
    
76. 
    
77.         // rect(a, b, c, d)
    
78.         // rect(a, b, c, d, r)
    
79.         // rect(a, b, c, d, tl, tr, br, bl)
    
80.                
    
81.         // a         float: x-coordinate of the rectangle by default
    
82.         // b         float: y-coordinate of the rectangle by default
    
83.         // c         float: width of the rectangle by default
    
84.         // d         float: height of the rectangle by default
    
85.         // r         float: radii for all four corners
    
86.         // tl         float: radius for top-left corner
    
87.         // tr         float: radius for top-right corner
    
88.         // br         float: radius for bottom-right corner
    
89.         // bl         float: radius for bottom-left corner
    
90.         rect(30, 20, 55, 55);//画一个矩形
    
91.                
    
92. 
    
93.         // rectMode(mode)
    
94.         // mode         int: either CORNER, CORNERS, CENTER, or RADIUS
    
95.         rectMode(CENTER);
    
96. 
    
97.         rect(30, 120, 55, 55, 7);//画一个圆角矩形
    
98.         
    
99. 
    
100.         // triangle(x1, y1, x2, y2, x3, y3)
     
101.                
     
102.         // x1         float: x-coordinate of the first point
     
103.         // y1         float: y-coordinate of the first point
     
104.         // x2         float: x-coordinate of the second point
     
105.         // y2         float: y-coordinate of the second point
     
106.         // x3         float: x-coordinate of the third point
     
107.         // y3         float: y-coordinate of the third point
     
108.         triangle(30, 75, 58, 20, 86, 75);//画一个三角
     
109. }
     
110. 
     
111. void draw()
     
112. {
     
113.         fill((int)random(0, 255), (int)random(0, 255), (int)random(0, 255), (int)random(0, 255));
     
114.         switch (key)
     
115.         {
     
116.                 case 'a' :
     
117.                 {
     
118.                         arc(mouseX, mouseY, (int)random(0,255), (int)random(0, 255), (int)random(0, 180),(int)random(180,360));
     
119.                         break;
     
120.                 }
     
121.                 case 'e' :
     
122.                 {
     
123.                         ellipse(mouseX, mouseY, (int)random(0, 500),(int)random(0, 500));
     
124.                         break ;
     
125.                 }  
     
126.                 case 'l' :
     
127.                 {
     
128.                         stroke((int)random(0,255), (int)random(0,255), (int)random(0,255), (int)random(0,255));
     
129.                         line((int)random(0, 500), (int)random(0, 500), mouseX, mouseY);
     
130.                         break;
     
131.                 }
     
132.                 case 'p':
     
133.                 {
     
134.                         stroke((int)random(0,255), (int)random(0,255), (int)random(0,255), (int)random(0,255));
     
135.                         point(mouseX, mouseY, 0);
     
136.                         break ;
     
137.                 }
     
138.                 case 'r':
     
139.                 {
     
140.                         rect(mouseX, mouseY, (int)random(0, 500), (int)random(0, 500));
     
141.                         break ;
     
142.                 }
     
143.                 case 't' :
     
144.                 {
     
145.                         triangle((int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500), mouseX, mouseY);
     
146.                         break;        
     
147.                 }
     
148.                 case 'q' :
     
149.                 {
     
150.                         quad((int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500));
     
151.                         break;        
     
152.                                 
     
153.                 }
     
154.                 case 'c':
     
155.                 {
     
156.                         clear();
     
157.                         break ;
     
158.                 }        
     
159.                
     
160.                 default :
     
161.                         
     
162.                 break;        
     
163.                
     
164.                         
     
165.         }        
     
166. }

复制代码

效果怎么样呢。


好了同学们，多按按键盘，多移动鼠标，创造出属于自己的png吧。
这节课就上到这里。我们下课。{:soso__13766225770624999893_7:}

bigman

lz辛苦啊，刚开始玩这个，正好跟着学一下哩

LINK~

//同学们我们上课，今天我们继续学习Processing的输出功能
//今天我们主要讲述Processing的2D绘画基础
//下面我会用一个小程序来详细说明每一个画图函数的用法。

void setup()
{
  size(512, 512);
  //既然讲到2D绘画，那么颜色当然也得说一说
  //颜色函数基本函数
  colorMode(RGB);//一下是colorMode的使用方法        

  // colorMode(mode)    mode         int: Either RGB or HSB, corresponding to Red/Green/Blue and Hue/Saturation/Brightness
  // colorMode(mode, max) max 参数是对颜色变量的范围        
  // colorMode(mode, max1, max2, max3) max1         
  // colorMode(mode, max1, max2, max3, maxA)

  background(0, 0, 0, 0);//背景色设置函数（R,G,B,A)
  //clear();//清除用的
  fill(255, 0, 0, 100);//填充颜色  255是完全不透明
  // noFill();//不进行填充
  noStroke();//不绘画边界
  //stroke(0, 255, 0, 0);//绘画边界，并设置边界颜色

  arc(50, 55, 50, 50, 0, HALF_PI);//花一段弧线
  ellipseMode(CENTER);//椭圆的模式 参数分别可以填RADIUS；CENTER CORNER CORNERS

  //        ellipse(a, b, c, d)
  // a         float: x-coordinate of the ellipse
  // b         float: y-coordinate of the ellipse
  // c         float: width of the ellipse by default
  // d         float: height of the ellipse by default
  ellipse(100, 100, 50, 50);//画一个椭圆的特例圆

  // 画现函数的详情
  // line(x1, y1, x2, y2)
  // line(x1, y1, z1, x2, y2, z2)

  // x1         float: x-coordinate of the first point第一个点的x坐标
  // y1         float: y-coordinate of the first point第一个点的y坐标
  // x2         float: x-coordinate of the second point第二个点的x坐标
  // y2         float: y-coordinate of the second point第二个点的y坐标
  // z1         float: z-coordinate of the first point第一个点的z轴坐标
  // z2         float: z-coordinate of the second point第二个点的z轴坐标
  line(0, 0, width, height);//画一条线



  // point(x, y)
  // point(x, y, z)

  // x         float: x-coordinate of the point
  // y         float: y-coordinate of the point
  // z         float: z-coordinate of the point

    point(width, height, 0);//画一个点



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

  // x1         float: x-coordinate of the first corner
  // y1         float: y-coordinate of the first corner
  // x2         float: x-coordinate of the second corner
  // y2         float: y-coordinate of the second corner
  // x3         float: x-coordinate of the third corner
  // y3         float: y-coordinate of the third corner
  // x4         float: x-coordinate of the fourth corner
  // y4         float: y-coordinate of the fourth corner
  quad(38, 31, 86, 20, 69, 63, 30, 76);//画一个四边形


  // rect(a, b, c, d)
  // rect(a, b, c, d, r)
  // rect(a, b, c, d, tl, tr, br, bl)

  // a         float: x-coordinate of the rectangle by default
  // b         float: y-coordinate of the rectangle by default
  // c         float: width of the rectangle by default
  // d         float: height of the rectangle by default
  // r         float: radii for all four corners
  // tl         float: radius for top-left corner
  // tr         float: radius for top-right corner
  // br         float: radius for bottom-right corner
  // bl         float: radius for bottom-left corner
  rect(30, 20, 55, 55);//画一个矩形


  // rectMode(mode)
  // mode         int: either CORNER, CORNERS, CENTER, or RADIUS
  rectMode(CENTER);

  rect(30, 120, 55, 55, 7);//画一个圆角矩形


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

  // x1         float: x-coordinate of the first point
  // y1         float: y-coordinate of the first point
  // x2         float: x-coordinate of the second point
  // y2         float: y-coordinate of the second point
  // x3         float: x-coordinate of the third point
  // y3         float: y-coordinate of the third point
  triangle(30, 75, 58, 20, 86, 75);//画一个三角
}

void draw()
{
  fill((int)random(0, 255), (int)random(0, 255), (int)random(0, 255), (int)random(0, 255));
  switch (key)
  {
  case 'a' :
    {
      arc(mouseX, mouseY, (int)random(0, 255), (int)random(0, 255), (int)random(0, 180), (int)random(180, 360));
      break;
    }
  case 'e' :
    {
      ellipse(mouseX, mouseY, (int)random(0, 500), (int)random(0, 500));
      break ;
    }  
  case 'l' :
    {
      stroke((int)random(0, 255), (int)random(0, 255), (int)random(0, 255), (int)random(0, 255));
      line((int)random(0, 500), (int)random(0, 500), mouseX, mouseY);
      break;
    }
  case 'p':
    {
      stroke((int)random(0, 255), (int)random(0, 255), (int)random(0, 255), (int)random(0, 255));
      point(mouseX, mouseY, 0);
      break ;
    }
  case 'r':
    {
      rect(mouseX, mouseY, (int)random(0, 500), (int)random(0, 500));
      break ;
    }
  case 't' :
    {
      triangle((int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500), mouseX, mouseY);
      break;
    }
  case 'q' :
    {
      quad((int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500), (int)random(0, 500));
      break;
    }
  case 'c':
    {
      clear();
      break ;
    }        

  default :

    break;
  }
}
交作业了