第1部分 语言基础
第1章 Processing
1.1 Hello Processing
Processing开发环境（Processing Development Environment），简称PDE，可以从它的官方网站（https://www.processing.org/download/）下载安装。PDE主要有运行窗口和编辑窗口两个窗口。运行窗口用来运行你的程序效果，编辑窗口主要用来编辑代码和发布程序。编辑窗口包括工具栏、标签栏、代码编辑区、消息区、控制台。
工具栏 ：包括运行、停止运行、新建、打开、保存、发布等按钮。
运行：点击“运行”按钮可以运行你的程序。运行时会弹出“运行窗口”，你可以通过“运行窗口”来观察程序的视觉效果和交互效果。
停止运行：点击“停止运行”按钮可以关闭“运行窗口”。
新建：新建一个Processing工程文件，会弹出一个新的未保存的代码编辑窗口。在开发过程中，可以利用它来新建代码编辑窗口，测试某一段程序代码单独运行的效果。
打开：打开一个指定路径的Processing工程文件，还可以打开最近的工程或者是Processing事例代码。
保存：保存目前的工程文件。
开发模式：点击右上角“Java”按钮可以切换开发模式。Processing支持很多种开发模式，可以通过点击“Add Mode”来添加新的开发模式（JavaScript、Android等），添加后需要重新运行Processing才能显示。
标签栏：打开标签栏向下箭头的弹出菜单，可以点击“New Tab”新建标签。如果代码有很多行的话可以用它来扩展程序。不过一般我们会用它来定义一个单独的类，在后面的第7章我们会详细讲到。
代码编辑区：所有的程序代码都在这里编辑。会用不同颜色来区分数据类型、系统变量、系统常量、系统函数、语句等。
消息区：显示程序编译时的错误（语法错误），还有一些提示消息。
控制台：显示程序运行时的错误，还可以用print()或println()函数在这里输出信息。
1.2 Hello world
我们开始写第一行代码，让你的Processing向世界问声好。打开Processing，在代码编辑区输入下面的代码：
println("Hello， world!");
点击“运行”后，在控制台会输出“Hello，world!”（不包含双引号）。
我们在程序开发的过程中，可能会追踪某个变量在某个时刻的值，或者输出一些有用的信息来分析程序。这时可以使用print()和println()函数，在程序运行的时候通过控制台输出信息。print()和println()函数的区别是，println()函数输出完信息后会换行，而print()函数不会，例如：
println("Hello，");
println("world!");
/* 输出：
Hello，
world!
*/
print("Hello，");
print("world!");
//输出：Hello，world!
有时候我们在写代码时为了便于阅读和理解会给代码添加一些标注，但是我们知道在代码编辑器里写的任何非程序语法的文字，程序都会报错。在Processing里可以使用注释，注释是不会被当作执行代码的。用“//”来添加单行注释，用“/* ”开始符号和“*/”结束符号来添加多行注释：
//单行注释
/*
多行注释
多行注释
*/
1.3 第一个图形
以画面中心为原点画一个直径为100像素的圆，如图1.2所示。
ellipse(50，50，100，100); //画一个椭圆，x、y坐标都为50，宽和高都为100
Processing提供了大量有关绘图的函数，这些函数就好比是各种各样的绘图工具。而且还可以添加图片，支持叠加和滤镜功能，如果你之前学习过图形编辑软件的话，比如Adobe Photoshop，那么在学习Processing的时候，会发现有很多概念都似曾相识。没错！图形编辑软件其实就是把绘图操作可视化。而程序绘图是使用程序语言来描述绘图。所谓描述绘图就是，概括出图形的所有特征属性，用相应的属性值来描述它。比如画一个圆，圆的特征属性是半径和位置，那么我们只要告诉Processing这个圆的半径和位置，Processing就会在屏幕帮我们画出这个圆。是不是很简单，就好像你在告诉一个使用绘图软件的人，让他帮你画出你想要的东西一样。只不过你和他沟通的时候，需要和他说他能听得懂的语言——Processing程序语言。本书将教你如何使用Processing程序语言，让你学会和他沟通，绘制出各种各样的图形。
1.4 第一个动画
以画面中心为原点画一个圆，让圆的直径从0开始逐渐变大，如图1.3所示。
int diameter = 0; //声明一个直径变量，初始值为0
//draw()函数会不断地循环执行
void draw() {
//画一个圆，直径为diameter变量
ellipse(50， 50， diameter， diameter);
diameter++; //每次循环，让直径变量增加1
}
上面的圆形可以随着时间逐渐变大，是因为把它的特征属性“直径”设置成了随着时间变化的量，这样就形成了动画。这种把特征属性设置为随着时间而变化的方法，是程序动画的基本实现机制。和我们传统的逐帧动画不同，传统逐帧动画需要在每一帧都重画，而程序动画只需要改变它的特征属性，计算机就会帮我们重绘，这也是为什么我们在绘图的时候用描述图形特征属性的方法来绘制。
1.5?第一个交互
不断以鼠标x、y坐标为原点画直径为100像素的圆，你可以移动鼠标来进行交互，如图1.4所示。
//draw()函数会不断循环执行
void draw() {
//画一个圆，位置为鼠标的x、y坐标
ellipse(mouseX， mouseY， 100， 100);
}
上面的圆形可以随着鼠标的移动而改变位置，是因为把它的特征属性“位置”设置成了随着时间变化的量，并且变化的量由鼠标位置来决定，这就是在程序动画的基础上添加交互因素的设计方法。
我们已经学习了第一个图形、第一个动画、第一个交互。在这里我想告诉读者，本章不要求你理解上面所有例子中每一行代码的原理，主要目的是让你对交互动画有个初步的理解，并且能够带着交互动画的概念来完成本书的学习。下面是构成交互动画的三个过程：
（1）图形：用特征描述绘图。
（2）动画：把特征属性定义为随时间变化的量。
（3）交互：设置变化量的决定因素。
……
精品教材 更多
