Processing 是什么？
Processing 是一个为电子艺术、新媒体艺术和视觉设计而生的开源编程语言和集成开发环境，它的语法基于 Java，但被极大地简化了，让艺术家和设计师能够快速上手，通过代码生成图形、动画和交互。
（图片来源网络，侵删）
Processing 的核心理念：
- 可视化： 学习编程最直观的方式就是立即看到结果，Processing 的 "setup()" 和 "draw()" 函数让你能轻松创建动态、交互式的视觉内容。
- 简单易学： 去除了 Java 中复杂的部分（如类、对象、事件监听器等），让你专注于创意本身。
- 社区强大： 拥有全球最大的创意编程社区，有海量的教程、示例和第三方库。
第一部分：准备工作与核心概念
安装与启动
- 下载： 访问 Processing 官网，根据你的操作系统下载对应的版本。
- 安装： 无需复杂安装，解压后即可运行，Windows 和 Linux 用户是
.zip文件，Mac 用户是.dmg文件。 - 启动： 运行
processing.exe(Windows) 或Processing.app(Mac/Linux)。
你会看到一个简洁的编辑器界面,分为两部分：
- 文本编辑区： 在这里编写你的代码。
- 消息区： 显示错误信息或程序输出。
- 工具栏： 包含运行、停止等按钮。
第一个程序：你好，世界！
在编辑区输入以下代码,然后点击工具栏的 "运行" 按钮（一个向右的三角形）。
void setup() {
size(400, 300); // 设置画布大小，宽400像素，高300像素
background(255); // 设置背景颜色为白色 (RGB: 255, 255, 255)
}
void draw() {
fill(0); // 设置填充颜色为黑色
textSize(20); // 设置文字大小
text("你好，Processing！", 100, 150); // 在坐标(100, 150)处显示文字
}
你会看到一个 400x300 像素的窗口，中间显示着 "你好，Processing！"。
（图片来源网络，侵删）
核心概念解析
上面的例子包含了 Processing 的两个最核心的函数：
void setup()
- 作用： 程序的 初始化 函数，它只在程序 开始时运行一次。
- 用途： 设置画布大小 (
size())、背景颜色 (background())、加载图片、字体等。 -
setup()是你的“准备工作”，只做一次。
void draw()
- 作用： 程序的 主循环 函数，它会以默认每秒 60 次 的频率 不断重复执行。
- 用途： 绘制所有动态的、会随时间变化的内容，比如移动的球、变化的颜色、交互效果等。
-
draw()是你的“表演时间”，每一帧都在重新绘制整个画面。
第二部分：基础绘图
Processing 提供了丰富的绘图函数，让我们从最简单的几何图形开始。
基本形状
void setup() {
size(600, 400);
background(220); // 浅灰色背景
}
void draw() {
// 画一个点
point(50, 50);
// 画一条线
stroke(255, 0, 0); // 设置线条颜色为红色
strokeWeight(3); // 设置线条粗细
line(100, 100, 200, 150);
// 画一个矩形
noStroke(); // 不描边
fill(0, 0, 255); // 设置填充颜色为蓝色
rect(250, 100, 100, 80); // x, y, width, height
// 画一个椭圆
fill(255, 0, 255); // 填充颜色为品红
ellipse(450, 140, 100, 80); // x, y, width, height
// 画一个三角形
fill(0, 255, 0); // 填充颜色为绿色
triangle(100, 300, 200, 220, 150, 350);
}
常用绘图函数：
point(x, y): 画点line(x1, y1, x2, y2): 画线rect(x, y, width, height): 画矩形ellipse(x, y, width, height): 画椭圆/圆 (当宽高相等时)triangle(x1, y1, x2, y2, x3, y3): 画三角形
常用颜色和样式函数：
（图片来源网络，侵删）
fill(r, g, b): 设置填充颜色 (RGB 值从 0 到 255)noFill(): 不填充stroke(r, g, b): 设置描边颜色noStroke(): 不描边strokeWeight(w): 设置描边粗细
第三部分：让动起来！变量与动画
静态图形很棒,但 Processing 的魅力在于动态，要实现动画，我们需要 变量。
变量
变量是一个用来存储数据的容器,在动画中，我们通常用它来存储位置、速度、大小等会变化的值。
float x; // 声明一个浮点型变量 x，用来存储水平位置
void setup() {
size(600, 400);
x = 0; // 初始化 x 的值
}
void draw() {
background(220);
// 每一帧，x 的值都增加 1
x = x + 1;
// x 超出了画布宽度，就让它从左边重新开始
if (x > width) {
x = 0;
}
// 使用变量 x 来决定圆的位置
fill(0, 150, 255);
noStroke();
ellipse(x, 200, 50, 50);
}
代码解析：
float x;: 声明一个名为x的float(浮点数) 类型变量，用于存储小数。x = 0;: 在setup()中给变量一个初始值。x = x + 1;: 在draw()中，每一帧都将x的值加 1，这就是动画的核心——在每一帧更新状态。
动画进阶：弹跳的小球
让我们结合位置和速度来创建一个更自然的动画。
float x, y; // 位置
float speedX, speedY; // 速度
void setup() {
size(600, 400);
x = width / 2;
y = height / 2;
speedX = 3;
speedY = 2;
}
void draw() {
background(220);
// 更新位置
x = x + speedX;
y = y + speedY;
// 边界检测：如果碰到左右边界，速度取反
if (x > width || x < 0) {
speedX = speedX * -1;
}
// 边界检测：如果碰到上下边界，速度取反
if (y > height || y < 0) {
speedY = speedY * -1;
}
// 绘制小球
fill(255, 0, 100);
noStroke();
ellipse(x, y, 50, 50);
}
新概念：
- 边界检测: 通过
if语句判断物体是否到达画布边缘，如果是，就反转速度方向 (speedX = speedX * -1;)，实现反弹效果。
第四部分：交互：响应鼠标和键盘
Processing 可以轻松地与用户进行交互。
鼠标交互
Processing 提供了内置的变量来获取鼠标状态：
mouseX,mouseY: 当前鼠标的 X, Y 坐标。pmouseX, `pmouseY**: 上一帧鼠标的 X, Y 坐标。
示例：跟随鼠标的线
void setup() {
size(600, 400);
stroke(0, 150);
strokeWeight(2);
}
void draw() {
// 每一帧都画一条从上一帧鼠标位置到当前鼠标位置的线
line(pmouseX, pmouseY, mouseX, mouseY);
}
尝试： 将 line 函数中的 pmouseX 替换为 mouseX，看看会发生什么？理解 p (previous) 的含义。
键盘交互
你可以使用 keyPressed() 函数来检测按键事件，这个函数和 setup() 一样，只在按键被按下时触发一次。
示例：按空格键清空画布
void setup() {
size(600, 400);
background(255);
}
void draw() {
// 鼠标按下时画一个圆
if (mousePressed) {
fill(100, 200, 255);
noStroke();
ellipse(mouseX, mouseY, 20, 20);
}
}
// 当键盘被按下时，执行这个函数
void keyPressed() {
// 如果按下的键是空格键
if (key == ' ') {
background(255); // 清空画布
}
}
新概念：
mousePressed: 一个布尔值，当鼠标按键被按下时为true。keyPressed(): 一个特殊的函数，用于响应键盘事件。key: 一个变量，存储了被按下的键的字符。
第五部分：拓展与资源
当你掌握了基础后,Processing 的世界将更加广阔。
使用库
Processing 的强大之处在于其丰富的第三方库，你可以通过菜单 Sketch -> Import Library... 来添加。
- Sound: 处理音频。
- Video: 播放和处理视频。
- ControlP5: 创建复杂的用户界面（滑块、按钮等）。
- OpenCV: 进行计算机视觉处理（人脸识别、物体跟踪等）。
学习资源
- Processing 官网:
- Processing 官网: 主页，包含下载、文档和示例。
- Processing 学习区: 官方教程，非常权威。
- Processing 示例库: 数百个可运行的代码示例，是学习的最佳素材。
- 推荐书籍:
- 《Processing 编程艺术》: 中文版，非常适合入门，由 Daniel Shiffman（Processing 核心开发者之一）所著。
- 《The Nature of Code》: Daniel Shiffman 的另一本经典著作，专注于模拟自然现象（如物理、生命、群体行为），有免费在线版本。
- 社区:
- OpenProcessing: 一个分享和发现 Processing 作品的社区，你可以看到别人的代码并学习。
- Processing 论坛: 提问和交流的地方。
总结与下一步
你已经走出了创意编程的第一步！现在你知道了：
- 如何设置画布和运行代码。
setup()和draw()的区别。- 如何绘制基本图形并设置颜色。
- 如何使用变量创建动画。
- 如何让程序响应鼠标和键盘。
下一步的建议：
- 模仿与修改： 去 Processing 示例库 找一个你感兴趣的例子，尝试理解它的代码，然后修改它，看看会发生什么。
- 给自己定个小项目： "制作一个可以拖动的粒子系统" 或 "一个根据音乐节奏变化的可视化"。
- 保持好奇心： 遇到不懂的函数，查阅 Processing 参考手册。
创意编程是一场充满乐趣的探索,祝你玩得开心！
