第一周

Processing背景设定

• setup()函数表示绘制窗体
  • size设置宽高
• draw()函数是绘画的主体内容
  • background设置rgb色彩
  • 可以通过工具的颜色选择器选择RGB色彩值

  • (255,255,255) white
    (0,0,0) black

    
    
    rgb

void setup()
{
  size(400,400); // display width height
  
}

void draw()
{
  background(255,0,0);  // rgb color
  
}

绘制矩形和椭圆

• 图形
  • rect(x,y,width,height) 矩形
  • ellipase(300,200,50,100) width&height is same 为 circle ！为椭圆

void setup()
{
  size(400,400); // display width height
  
}

void draw()
{
  background(0,0,0);  // rgb color
  
  rect(100,50,100,20); //长方形
  
  rect(200,150,10,10);  // 正方形
  
  ellipse(300,200,50,100); // 椭圆
  
}

颜色填充

• 使用fill()函数填充图像颜色

void setup()
{
  size(400,400); // display width height
  
}

void draw()
{
  background(0,0,0);  // rgb color
  
  fill(0,255,0);
  
  rect(100,50,100,20);
  
  rect(200,150,10,10);
  
  fill(255,0,0);
  
  ellipse(300,200,50,100);
  
}

描边

• 使用 stroke()函数描边

void draw()
{
  background(0,0,0);  // rgb color
  
  stroke(255,255,255);
  fill(0,255,0);
  
  rect(100,50,100,20);
  
  stroke(255,0,255); //下面的都变成了紫色
  rect(200,150,10,10);
  
  fill(255,0,0);
  
  ellipse(300,200,50,100);
  
}

图像的绘制顺序

• noStroke()去掉图片默认边框，代码由上至下执行

void setup()
{
  size( 400, 400);
}

void draw()
{
  background(255,255,255);
  
  noStroke();
  
  fill(0,255,0);
  rect( 100, 100, 200, 200);
  
  fill(255,0,0);
  rect(120,120,200,200);
  
}

使用beginShape()绘制自定义图形

• 不规则多边形
• beginShape();
  vertex(x,y) 中间绘制顶点坐标(至少三个)
  endShape();

void setup()
{
  size(400,400);
}

void draw()
{
  background(255,255,255);
  
  fill(0,0,255);
  noStroke();
  
  beginShape();
  vertex(100,100);
  vertex(150,150);
  vertex(150,175);
  vertex(200,220);
  vertex(200,250);
  endShape();

• rect&Shape绘制的正方形

void setup()
{
  size(400,400);
}

void draw()
{
  background(255,255,255);
  fill(0,0,255);
  noStroke();
  
  beginShape();
  vertex(100,100);
  vertex(100,150);
  vertex(150,150);
  vertex(150,100);
  endShape();
  
  
  rect(200,100,50,50);
  
}

制作雪人

void setup()
{
  size(600,600);
}

void draw()
{
  background(125,125,125);
  
  fill(255,255,255);
  
  ellipse(300,250,200,200);
  
  ellipse(200,450,300,300);
  
  fill(0,0,0);
  ellipse(340,215,10,10);
  ellipse(300,215,10,10);
  
  fill(255,180,0);
  beginShape();
  vertex(320,250);
  vertex(450,270);
  vertex(320,280);
  endShape();
}