Processing基础---绘制基本图形、颜色

一，绘制图形的三种方法：

 基本图形：rect()--矩形，ellipse()--圆形，point()--点，triangle()--三角形等等；--其他图形可查阅processingAPI

1，矩形绘制方法一：

     矩形由左上角点的坐标、矩形的宽度值、以及矩形的高度值三者确定：

   代码：

 void setup(){
   size(300,300);

}

void draw(){
  rect(0,0,75,100);
  fill(255,0,0);
}

   

    效果：

说明：

void setup(){

 //代码块在这里初始化，如上 代码初始化的时候 建立画布大小 size()设置画布大小为200X300像素；代码只运行一次

}

void draw(){

//代码在这里运行，循环往复的运行

}

rect,(0,0,75.100)---左上角点/右上角点/宽度/高度；fill()设置矩形的颜色；

 

2，矩形绘制方法二：（以下代码均在void draw(){} 里执行）

   确定矩形中心坐标点，矩形宽度值和高度值；在绘制前 需要指定CENTER模式

   注意：Processing 区分字母大小写

void draw(){
  rectMode(CENTER);
  rect(100,100,75,100);
  fill(255,0,0);
}

 效果：

    

3，矩形绘制方法三：

  确定矩形的两个坐标：矩形左上角点和右下角点，这种绘制模式是：CORNERS

rectMode(CORNERS);
rect(100,50,75,100);

效果：

二，颜色：

1，颜色是通过一系列数值来决定的，例如：灰度(grayscale)，为灰度指定的数值方法如下：

   数值0代表黑色，数值255代表白色，而在此之前的其他数值（50,87,162,209）代表是由黑色逐渐到白色的过程；

    以下为常用填充颜色函数：

   stroke()函数---设置图形轮廓的颜色，例如线条和点只能用stroke()函数

     fill()函数--设置图形的填充颜色

     background()函数---在图形渲染时设置窗口的背景色

     noFill()函数----使得填充颜色消失

     noStroke()函数---禁用轮框线

   在绘制图形前 可以通过增加 stroke()和fill()函数 设置颜色 示例如下：

   绘制了一个 背景色为黑色，轮框为白色，填充为红色的矩形

  

代码：

background(0);
  rect(100,50,75,100);
  fill(255,0,0);
  stroke(255);

练习1代码：

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

void draw(){
  background(255);
  stroke(0);
  fill(0);
  rect(0,0,100,100);
  stroke(0);
  fill(150);
  rect(100,100,100,100);
}

 绘制效果：

  

2，数位色彩--RGB颜色

  数位色彩同样是混合三种基础颜色来实现，运行机制和绘画颜料有所不同，数位色彩的色光三原色是不同的：红，绿，蓝；

其次数位色彩以光来合成颜色；

红+绿=黄

红+蓝=紫

绿+蓝=青（蓝绿）

红+绿+蓝=白

没有颜色=黑色

示例2：RGB颜色

效果：

代码：

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

void draw(){
  background(255);
  noStroke();
  fill(255,0,0);//亮红
  ellipse(20,20,16,16);
  
  fill(127,0,0);//暗红
  ellipse(40,20,16,16);
  
  fill(255,200,200);
  rect(60,20,16,16);
  
  
}

    

练习2：绘制静态Zoog

最终效果：

 代码：

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

void draw(){
  background(255);
  ellipseMode(CENTER);
  rectMode(CENTER);
   stroke(0);
   
  //绘制身体
  fill(150);
  rect(100,100,20,100);
  
  //绘制头部
  fill(255);
  ellipse(100,70,60,60);
  
  //绘制眼睛
  fill(0);
  ellipse(81,70,16,32);
  ellipse(119,70,16,32);
  
  //绘制腿
  stroke(0);
  line(90,150,80,160);
  line(110,150,120,160);

}

  

  --------------------------------------------------------------------------------------------------------------------------------------------学习笔记