Processing学习记录（1）：初相识

1. 下载安装

这一步不需要详细介绍，作为个人学习记录，在此备注一下：

访问 Processing官网，根据自己的操作系统，下载对应的版本。我的是mac系统。

2. 初识界面

之前接触eclipse等一些开发软件界面，相比较，Processing的开发环境非常简单明了。

Processing由代码编辑区、工具栏、标签栏、控制台组成。
Mac菜单栏在电脑界面顶栏。
当点击工具栏运行按钮后，会弹出一个新的窗口，称为显示窗口。

举例来说，比如代码区编写代码设置画布大小，点击运行，弹出下图中右侧的显示窗口，大小为400*400。(Processing默认画布大小是100*100）

3. 创建第一个图形

先绘制一个圆

3.1. 代码

void setup() {
  size(400,400);            //画布大小设置为400*400
  ellipse(50,50,100,100);   // 以50,50为圆心，画一个直径为100的圆
}

3.2. 效果

3.3. 说明

• 设置画布大小的函数：

size(width,height)；

• 圆的绘制函数为：

ellipse(x,y,width,height);

前两个参数x,y(50,50)设置圆心的位置
第三个参数width设置长轴，第四个参数height设置短轴。相等时，便是正圆。

• setup ()函数
  • 标准的Processing主程序的结构之一。
  • setup (){ 设置画布 }
  • 作用是设置画布，{}内的内容只执行一次，一般用来进行初始化设置，如上面的画布大小。
  • 后面不需要再做改变的设置，可以放在setup ()中。

4. 绘制第一个动画

4.1. 代码：

int r =0;
void setup() {
  size(400,400);
}
void draw() {
  ellipse(200,200,r++,r++);  //200,200为中心点，一个不断往外扩大的圆
}

4.2. 效果

圆连续变大：

4.3. 说明

• draw ()函数
  • 标准的Processing主程序的结构之一。
  • draw (){ 开始作画 }
  • 作用是绘制图形，运行动画，{}内的内容循环执行。每运行一次相当于在画布中绘制一个新的帧，运行完一次后再执行下一次。

5. 第一个交互

调用鼠标绘制一根直线

5.1. 代码

void setup() {
  size(400,400);
}
void draw() {
  line(mouseX,mouseY,200,200);  // 从200,200往外绘制一条直线,不消除痕迹
}

5.2. 效果

5.3. 说明

• mouseX和mouseY是系统变量，是鼠标所在的坐标位置。
• 绘画中不消除原有的绘画留下的痕迹。
• 如果想要消除痕迹，需要每次载入一个空白页面。如下：

5.4. 消除痕迹

• 代码如下：

void setup() {
  size(400,400);
}
void draw() {
  background(255);          // 加载空白页面
  line(mouseX,mouseY,0,0);  // 从0,0往外绘制一条直线,消除上一条痕迹
}

• 效果