1.首先在界面中输入如下代码，注意，所有括号都是英文括号

//程序启动时用到的代码
void setup(){

}

//程序持续运行时用到的代码
void draw(){

}

如下图所示

2.设置窗体大小

在setup中输入如下代码来设置窗体大小

void setup(){
  size(600,600);//窗体的大小，尾部有一个分号。注意:逗号、括号，分号等都需要使用英文符号
}

3.点击运行，可以看到窗体

4.运行结果

5.在draw()中设置背景色

设置后的代码如下

void draw(){
  background(0,0,0);//设置背景色为黑色
}

其中，background的三个参数分别是Reg,Green,Blue，取值范围在(0~255之间)

运行后的结果如下

6.开始绘制矩形

一般来说，程序都会约定窗体的左上角为(0,0)，意思是左上角的X坐标为0，Y坐标为0. 例如，我们想要在距离左上角X=50,Y=100的位置画一个长为40，宽为20的矩形的话。则可以使用如下代码

void draw(){
  background(0,0,0);//设置背景色为黑色
   rect(50,100,40,20);//在相对左上角距离左边50个像素，距离顶部100个像素的位置绘制一个长为40，宽为20的矩形
}

点击运行后，结果为

另外，使用如下代码我们还可以绘制一个大点的正方形

void draw(){
  background(0,0,0);//设置背景色为黑色
  rect(50,100,40,20);//在相对左上角距离左边50个像素，距离顶部100个像素的位置绘制一个长为40，宽为20的矩形
  rect(200,200,100,100);//在相对左上角距离左边200个像素，距离顶部200个像素的位置绘制一个边长为100的正方形
}

结果如下图所示

7.给矩形填充颜色

现在的矩形还是一个白色，看着有点单调，一般来说，我们会给予不同的颜色，以满足的我们的常规需求。这个时候，我们可以使用以下代码来填充颜色。

//程序持续运行时用到的代码
void draw(){
  background(0,0,0);//设置背景色为黑色
  fill(255,0,0);//给这句语句以后的图形填充红色
  rect(50,100,40,20);//在相对左上角距离左边50个像素，距离顶部100个像素的位置绘制一个长为40，宽为20的矩形
  rect(200,200,100,100);//在相对左上角距离左边200个像素，距离顶部200个像素的位置绘制一个边长为100的正方形
}

但是上面的代码有点问题，好像两个矩形都被改成了红色。如果我想要有一个矩形是绿色，那么我们可以再次使用fill，单独给某个图形绘制颜色。

//程序持续运行时用到的代码
void draw(){
  background(0,0,0);//设置背景色为黑色
  fill(255,0,0);//给这句语句以后的图形填充红色
  rect(50,100,40,20);//在相对左上角距离左边50个像素，距离顶部100个像素的位置绘制一个长为40，宽为20的矩形
  rect(200,200,100,100);//在相对左上角距离左边200个像素，距离顶部200个像素的位置绘制一个边长为100的正方形
  
    fill(0,255,0);//给这句语句以后的图形填充绿色
  rect(10,10,20,20);//在相对左上角距离左边10个像素，距离顶部10个像素的位置绘制一个长为10，宽为10的正方形
  
   fill(0,0,255);//给这句语句以后的图形填充蓝色
  rect(10,50,20,20);//在相对左上角距离左边10个像素，距离顶部30个像素的位置绘制一个长为10，宽为10的正方形
}

结果如下，并且之前的颜色也还是存在：

8.给矩形加上一个边框

一般来说，每一个图形，都会有一个边框。我们可以使用stroke给图形加上边框

stroke的使用方式和fill的使用方式一样的，都是给其设置颜色即可。以下代码是分别给不同的图形加上不同的边框颜色

//程序持续运行时用到的代码
void draw(){
  background(0,0,0);//设置背景色为黑色
  fill(255,0,0);//给这句语句以后的图形填充红色
  stroke(255,255,255);//设置边框颜色为白色
  rect(50,100,40,20);//在相对左上角距离左边50个像素，距离顶部100个像素的位置绘制一个长为40，宽为20的矩形
  stroke(0,255,0);//设置边框颜色为绿色
  rect(200,200,100,100);//在相对左上角距离左边200个像素，距离顶部200个像素的位置绘制一个边长为100的正方形
  
    fill(0,255,0);//给这句语句以后的图形填充绿色
    stroke(255,0,0);//设置边框颜色为红色
  rect(10,10,20,20);//在相对左上角距离左边10个像素，距离顶部10个像素的位置绘制一个长为10，宽为10的正方形
  
   fill(0,0,255);//给这句语句以后的图形填充蓝色
   stroke(237,0,250);//设置边框颜色为紫色
  rect(10,50,20,20);//在相对左上角距离左边10个像素，距离顶部30个像素的位置绘制一个长为10，宽为10的正方形
}

9.颜色选择器

当你不知道用什么颜色好的时候，编译工具给我们提供了一个颜色选择器，打开方式为顶部的 工具-》颜色选择器

点击后，将会弹出颜色选择器窗口，你在其中，可以查看调整一些你觉得适合的颜色

10.绘制圆形

接下来，让我们来绘制圆形。绘制圆形一般使用ellipse(x,y,w,h)方法来绘制。他的使用方式和矩形是一致的，都是先输入坐标X,坐标Y，在输入宽W，最后输入高度H，即可

绘制一个圆形的代码如下

  ellipse(100,50,50,50);//在X=100，Y=50的位置绘制直径为50的圆形

结果为

11.绘制椭圆

很多时候，我们绘制圆形，不一定是一个完美的圆形，他也有可能是椭圆，这时候，我们可以通过调整他的长和宽来绘制一个椭圆

ellipse(100,50,50,50);//在X=100，Y=50的位置绘制直径为50的圆形
  
    ellipse(100,150,50,100);//在X=100，Y=150的位置绘制一个宽为50，高为100的椭圆
    
      ellipse(100,250,100,50);//在X=100，Y=250的位置绘制一个宽为100，高为50的椭圆

好了，绘制圆形和矩形的基础代码就到此结束。后续取消边框，图形覆盖和透明等效果请看后续教程。

以下表格内容是本次课程使用到的函数解释