企业官网建设流程全解析

• 教程
• 文档
• 示例工程

导读

本文以 Learning Processing 课程 第 0 章“主题总览”（Overview of Topics）为核心骨架，梳理 Daniel Shiffman 在该系列视频课程中规划的全部教学主题，并结合本仓库中的课程文档与 Processing 源码示例，为读者呈现一份可直接对照学习的完整知识地图。读完本文，你将清楚掌握 Learning Processing 系列覆盖的十大主题板块、每个板块的核心知识点、各章节之间的递进关系，以及如何在 Coding Train 仓库中找到配套的源码练习。

系列背景：视频课程与《Learning Processing》教材

本文对应的视频是 Learning Processing 系列的第 6 支（video_number: 6，发布于 2015-07-18），它的作用是总览整个系列将要覆盖的主题清单。正如 0.6-overview-topics.md 中所写：

This video summarizes the list of topics that I plan to cover in the entire video series. This loosely follows the table of contents from the Learning Processing book.

也就是说，整支系列的编排松散地遵循《Learning Processing》教材的目录结构（该教材由 Daniel Shiffman 编写，Processing Foundation 支持）。因此，这份主题总览既是本系列视频的地图，也是教材章节的镜像。课程主页在 _Courses/index.md 中说明，这是 Shiffman 讲授的系列课程之一。

整个系列从 2015 年 7 月开播（第 0 支视频 0.0-introduction.md 发布于 2015-07-10），每支视频对应教材中的一个章节小节，并由仓库中对应的 Markdown 文档承载结构化元信息（标题、视频编号、发布日期、视频 ID、相关链接）。

第 0 章：引言（Introduction）

引言章（0-introduction/index.md）是整个系列的起点，回答"为什么学编程、编程是什么"等元问题，共 7 支视频：

第 0.4 支视频在 "Creative Coding"（创意编程）语境下横向对比了多种编程语言，文档中列出的相关链接包括 Cinder、openFrameworks、Processing、MaxMSP、Pure Data，说明这一章意在帮助初学者理解 Processing 在整个创意编程生态中的位置。第 0.5 支视频则演示 Processing 自带示例的浏览方式、库（libraries）的加载方式，并展示用 Processing 完成的项目。

主题 1：像素与绘制（Pixels / Drawing）

进入正题后的第一个主题是像素。

• 1.1-drawing-with-pixels.md（视频 1.1）讲解计算机图形学坐标系的基础知识，以及如何在 Processing 窗口中写下第一批绘制代码。

像素主题是理解"屏幕是什么"的起点：Processing 窗口本质是一个由像素构成的网格，坐标系原点 (0, 0) 位于左上角，x 轴向右、y 轴向下。这一章的结论将贯穿后续所有章节——无论是绘制图形、操作颜色，还是最终逐像素处理图像，都建立在对坐标系和像素的理解之上。

主题 2：Processing 环境与 RGB 颜色（Processing Environment）

第 2 章（2-processing-environment/index.md）包含两大部分：

使用 Processing IDE（2.1-how-to-use-processing.md）：演示如何在 Processing IDE 中编写并运行第一批代码，涉及编辑器、运行按钮、消息区等基本工作流。

RGB 颜色（2.2-rgb-color.md）：讲解 Processing 中 RGB 颜色的基础，重点覆盖三个最常用的颜色函数：

• background()—— 设置窗口背景色；
• stroke()—— 设置描边颜色（用于点、线、形状轮廓）；
• fill()—— 设置填充颜色（用于形状内部）。

这三个函数构成了 Processing 一切视觉输出的"颜料盒"，后续所有章节的示例都会反复用到它们。

主题 3：交互（Interaction）

交互是让静态画面"活"起来的关键，第 3 章（3-interaction/index.md）由三支视频组成：

程序的运行流程（3.1-flow.md）：通过setup()与draw()两个函数讲解 Processing 草图的运行流程。setup()在程序启动时执行一次，用于初始化；draw()则被反复调用，构成动画循环。

内置变量 mouseX / mouseY（3.2-built-in-variables.md）：Processing 内置mouseX与mouseY变量，可直接在鼠标位置绘制形状，实现最基本的交互反馈。

事件机制（3.3-flow.md）：演示主动画循环如何被"事件"打断，例如mousePressed()与keyPressed()。这为后续"事件驱动编程"打下基础。

主题 4：变量（Variables）

第 4 章（4-variables/index.md）讲解编程的核心概念——变量：

• 4.1-variables.md：引入变量概念，讲解在 Processing 草图中使用变量的完整步骤（声明、初始化、使用）；
• 4.2-Incrementing-variable.md：演示如何在每轮draw()循环后递增变量值，这是动画"运动感"的来源；
• 4.3-using-random.md：在给变量赋值的语境下演示random()函数（如random(a, b)返回 [a, b) 区间的随机浮点数）；
• 4.4-using-println.md：演示用println()将变量值输出到消息控制台，这是最朴素也最有效的调试手段。

主题 5：条件判断（Conditionals）

第 5 章（5-conditionals/index.md）让程序拥有"决策"能力：

• 5.1-boolean-expressions.md：条件语句与布尔表达式的基础（==、>、<等比较运算）；
• 5.2-if-elseif-else.md：if、else if、else分支结构；
• 5.3-logical-operators.md：逻辑与（&&）、逻辑或（||）组合条件；
• 5.4-boolean-variables.md：布尔变量本身（boolean类型）；
• 5.5-bouncing-ball.md：综合运用条件语句让圆球在窗口边缘反弹——这是本章的经典综合练习，也是后续大量物理模拟示例的雏形。

主题 6：循环（Loops）

第 6 章（6-loops/index.md）讲解"重复"这一编程基本概念：

• 6.1-while-loop.md：while循环；
• 6.2-two-loops.md：用两个循环（一个横向、一个纵向）在屏幕上生成网格图案；
• 6.3-for-loop.md：for循环及其三部分语法（初始化、条件、迭代）；
• 6.4-variable-scope.md：变量作用域；
• 6.5-loop-vs-draw.md：讨论draw()本身也是循环——何时应在draw()内使用for/while循环，何时应直接利用draw()自身的循环特性；
• 6.6-nested-loops.md：嵌套循环（循环套循环）。

其中 6.5 的辨析非常关键：draw()以帧率（默认约 60 帧/秒）反复执行，本身就是一个"时间循环"；而for/while是在一帧之内完成的一次性"空间循环"。理解二者的边界，是写出高效动画逻辑的前提。

主题 7：函数（Functions）

第 7 章（7-functions/index.md）从"写代码"走向"组织代码"：

• 7.1-intro-functions-objects.md：函数与对象的前瞻性引入；
• 7.2-functions-basics.md：在 Processing（Java）中定义与调用函数的基础；
• 7.3-modularity-with-functions.md：用函数实现模块化；
• 7.4-reusability-with-functions.md：函数的可复用性——把重复代码抽象为可带参数调用的函数。

主题 8：面向对象编程（Object-Oriented Programming）

第 8 章（8-object-oriented-programming/index.md）是系列中承上启下的关键一章：

• 8.1-what-is-oop.md：面向对象编程的基础理论，辨析"类（class）"与"对象实例（object instance）"的区别；
• 8.2-defining-class-pt1.md：定义类的第一部分——变量、构造函数、方法；
• 8.3-defining-class-pt2.md：定义类的第二部分；
• 8.4-constructor-arguments.md：构造函数参数；
• 8.5-more-on-objects.md：对象的更多用法；
• 8.6-pass-value-pass-reference.md：按值传递 vs 按引用传递——这是理解 Java/Processing 内存模型的重要一环。

主题 9：数组（Arrays）

第 9 章（9-arrays/index.md）讲解"如何管理大量数据"，是面向对象之后的自然延伸：

• 9.1-what-is-an-array.md：数组的概念与必要性；
• 9.2-array-syntax.md：数组的声明、初始化与使用语法；
• 9.3-array-of-objects.md：对象数组——把第 8 章的对象与本章的数组结合；
• 9.4-arrays-and-loops.md：数组与循环的组合用法（for遍历数组）；
• 9.5-flexible-arrays.md：只使用数组的一部分来模拟可变长度数组（文中同时指向append()函数与ArrayList参考文档）。

仓库配套源码：对象数组与可变长度数组

第 9 章的 9.3-array-of-objects.md 与 9.5-flexible-arrays.md 在元数据中注明了仓库内的配套示例目录（repository: Tutorials/Processing/9.3-array-of-objects与repository: Tutorials/Processing/9.5-flexible-arrays），可直接对照运行：

对象数组示例（sketch_9_3_Array_of_Objects.pde）：

Bubble[] bubbles = new Bubble[2]; void setup() { size(640, 360); bubbles[0] = new Bubble(64); bubbles[1] = new Bubble(64); } void draw() { background(255); for (int i = 0; i < bubbles.length; i++) { bubbles[i].ascend(); bubbles[i].display(); bubbles[i].top(); } }

对应的 Bubble.pde 定义了冒泡对象：构造函数接收直径参数，ascend()让气泡上升并左右漂移，display()绘制半透明圆，top()在气泡移出屏幕顶部后重置回底部，形成循环动画。

可变长度数组示例（sketch_9_5_Flexible_Arrays.pde）则演示"只用数组的一部分"：

Bubble[] bubbles = new Bubble[100]; int total = 0; void setup() { size(640, 360); for (int i = 0; i < bubbles.length; i++) { bubbles[i] = new Bubble(random(20, 40)); } } void mousePressed() { total = total + 1; } void keyPressed() { total = total - 1; } void draw() { background(255); for (int i = 0; i < total; i++) { bubbles[i].ascend(); bubbles[i].display(); bubbles[i].top(); } }

这里的技巧是：预先分配一个容量为 100 的数组，但用total计数器控制实际生效的元素数量——鼠标点击增加total，按键减少total，draw()只遍历前total个元素。这正是教材中"flexible sized array"（可变长度数组）的朴素实现方式，也是后续引入ArrayList的前置铺垫。视频文档 9.5 还额外关联了 Nature of Code 中关于 ArrayLists 的归档视频，可作为延伸学习。

主题地图：课程主线与递进逻辑

综合第 0 章主题总览与整个 Learning Processing 课程目录，整条学习主线可以概括为一条清晰的递进链条：

1. 理解画布：坐标系与像素（主题 1）；
2. 掌握工具：IDE 工作流与 RGB 颜色（主题 2）；
3. 让画面响应：setup()/draw()流程、内置变量、事件（主题 3）；
4. 让数值变化：变量、随机数、调试输出（主题 4）；
5. 让程序决策：布尔表达式与条件分支（主题 5）；
6. 让程序重复：while/for/嵌套循环，以及draw()与循环的分工（主题 6）；
7. 让代码可复用：函数的定义、模块化与复用（主题 7）；
8. 让数据成"物"：类与对象、构造函数、传值语义（主题 8）；
9. 让对象成"群"：数组、数组与循环、对象数组、可变长度数组（主题 9）。

每一个主题都建立在前一个主题之上：变量让数值"动"起来，条件让运动有"边界"（如反弹球），循环让操作"批量"执行，函数让逻辑"复用"，对象把数据与行为"封装"，数组把对象"组织成群体"。学完这九大主题，你已经具备用 Processing 写出具有一定交互性与复杂度的视觉程序所需的全部核心语法基础，可以自然过渡到仓库中更进阶的内容，例如 Nature of Code（物理模拟与智能体）或 Programming with Text（文本与数据处理）系列。

学习路径建议

1. 按序观看：系列视频编号与文档目录严格对应，建议从 0.0-introduction.md 顺序推进，先通读本文梳理的九大主题地图，再逐章对照学习；
2. 边看边写：每支视频对应的小节都可在本地 Processing IDE 中复现；第 9 章起配合 Tutorials/Processing 目录下的配套示例（如 9.3 与 9.5 的 Bubble 示例）运行对比；
3. 善用调试：从第 4 章起养成用println()观察变量值的习惯；
4. 关注衔接章节：6.5-loop-vs-draw.md 与 8.6-pass-value-pass-reference.md 属于"想清楚再写代码"的关键辨析，值得反复理解。

这份主题总览的意义在于：它把长达九章的课程浓缩成一张可预期的学习路线图——无论你是零基础初学者，还是想系统补全 Processing 语法体系的学习者，都可以按图索骥，稳步前进。

• 教程
• 文档
• 示例工程