一、绘制画布

1. 准备工作

int xmin=-10,xmax=10;//x坐标的区间
int ymin=-10,ymax=10;//y坐标的区间
int rangex=xmax-xmin,rangey=ymax-ymin;//xy坐标范围大小

Java 代码逻辑普及

在 Java 等高级语言中，都使用 数据类型 变量名=值; 的格式进行赋值。对于多个变量且数据类型相同的变量，可以简写为 数据类型 变量名1=值1,变量名2=值2,...,变量名n=值n。

Processing 程序解释

一个画布往往有两个信息，分别是 $x$ 坐标区间和 $y$ 坐标区间，它们影响了画布的布局。在程序中，我们定义了六个变量：xmin，xmax，ymin，ymax，rangex，rangey。这些变量影响了 $x$、$y$ 坐标的左边界和右边界，以及 在我们眼中这块画布的大小。因为在计算机眼里，它就是一块 $n$ 像素 $\times$ $m$ 像素的画布。

2. 绘制画布

int xscl,yscl;
void setup(){
    size(600,600);
    xscl=width/rangex;
    yscl=-height/rangey;
}

Java 代码逻辑普及

在 Java 等高级语言中，对于无返回值函数都会使用 void 函数名(参数1,参数2,...,参数n){函数内容;} 的格式来定义。

Processing 程序解释

我们定义的 xscl 和 yscl 变量分别表示了 $x$、$y$ 坐标的单位大小。在这个代码中，xscl 的值为 $600÷20=30$（个像素），yscl 的值也为 $600÷20=30$（个像素）。这就告诉了计算机，我们认为在坐标 $(1,-2)$ 的地方，实际上在 $(1\times 30,-2\times 30)$ 也就是 $(30,-60)$ 的位置上。

二、绘制网格

1. 准备工作

void draw(){
    background(255,255,255);
    translate(width/2,height/2);
    //strokeWeight(1);
    //stroke(0,255,255);
    grid();
}

Processing 程序解释

Processing 原理解释

在 Processing 中，画布的 $(0,0)$ 点被定在了左上角，因此越往右 $x$ 坐标越大，越往下 $y$ 坐标越大。translate() 函数则是纠正这个问题的最佳工具。在程序中，我们写了 translate(width/2,height/2); 这个代码，就是为了让 $(0,0)$ 点默认在最中间。

2. 绘制网格

void grid(){
    //纵线
    for(int i=xmin;i<=xmax;i++){
        if(i==0)stroke(0,0,0);//正中间的线
        else stroke(0,255,255);
        line(i*xscl,ymin*yscl,i*xscl,ymax*yscl);
    }
    //横线
    for(int i=ymin;i<=ymax;i++){
        if(i==0)stroke(0,0,0);//正中间的线
        else stroke(0,255,255);
        line(xmin*xscl,i*yscl,xmax*xscl,i*yscl);
    }
}

Java 代码逻辑普及

在 Java 等高级语言中，基本循环语句按照 for(初值;条件;增值) 的格式编写。这使得这个语句有了 while 循环的功能。即 while(condition) 可以写作 for(;condition;)。条件判断语句则用 if-else if-else 进行判断。

Processing 程序解释

三、完整程序

int xmin=-10,xmax=10;
int ymin=-10,ymax=10;
int rangex=xmax-xmin,rangey=ymax-ymin;
int xscl,yscl;
void setup(){
    size(800,800);
    xscl=width/rangex;
    yscl=-height/rangey;
}
void draw(){
    background(255,255,255);
    translate(width/2,height/2);
    grid();
    //测试数据
    //fill(0,0,0);
    //stroke(0,0,0);
    //ellipse(3*xscl,6*yscl,10,10);
}
void grid(){
    for(int i=xmin;i<=xmax;i++){
        if(i==0)stroke(0,0,0);
        else stroke(0,255,255);
        line(i*xscl,ymin*yscl,i*xscl,ymax*yscl);
    }
    for(int i=ymin;i<=ymax;i++){
        if(i==0)stroke(0,0,0);
        else stroke(0,255,255);
        line(xmin*xscl,i*yscl,xmax*xscl,i*yscl);
    }
}