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

}

  

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页