Processing Java版教程(1)：画布与网格

一、绘制画布

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 程序解释

函数	功能
background(R,G,B)	按照 RGB 的值设置背景颜色
translate(x,y)	将 $(0,0)$ 点（原本应在左上角）移动到 $(x,y)$
strokeWeight(width)	将线条的粗细设置为 width
stroke(R,G,B)	按照 RGB 的值设置线条颜色

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 程序解释

函数	功能
line(sx,sy,ex,ey)	在 $(sx,sy)$ 到 $(ex,ey)$（像素）之间绘制一条直线

三、完整程序

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