ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

Coding Train《Learning Processing》开篇导读:用 Processing 从零迈入创意编程

Coding Train《Learning Processing》开篇导读:用 Processing 从零迈入创意编程
  • 教程
  • 文档
  • 示例工程

【免费下载链接】website-archive

Archive of the Coding Train website (first version)

项目地址:https://gitcode.com/gh_mirrors/we/website-archive
点击查看免费下载

本文围绕 Coding Train 网站归档仓库中《Learning Processing》课程的 Introduction 开篇系列展开,系统梳理 7 集导读视频的讲解脉络:Processing 是什么、为什么要学编程、编程的本质、创意编程的语言生态,以及整套课程十章主题的预览。读完本文,你不仅能快速定位这门课程在仓库中的组织方式,还能结合仓库内真实可运行的 Processing 示例(如 StarField 星场动画),理解入门课程知识点如何落地成完整作品。

课程定位:一本教材与一套配套视频

website-archive仓库保存了 Coding Train 网站(第一版)的完整内容,其中 _Courses/learning-processing/index.md 是《Learning Processing》课程的总入口。课程主页说明(见 index.md):

These video lessons accompany the introduction from the Learning Processing textbook.

也就是说,这套视频课程是 Daniel Shiffman 所著《Learning Processing》教材的配套讲解。课程按教材章节组织为 10 个系列(编号 0~9),每个系列在仓库中都是一个独立目录:

series_number目录主题
00-introductionIntroduction(入门导读)
11-pixelsPixels(像素与坐标系)
22-processing-environmentProcessing Environment(开发环境与 RGB 颜色)
33-interactionInteraction(交互)
44-variablesVariables(变量)
55-conditionalsConditionals(条件判断)
66-loopsLoops(循环)
77-functionsFunctions(函数)
88-object-oriented-programmingObject-Oriented Programming(面向对象编程)
99-arraysArrays(数组)

每个系列目录下的index.md都采用统一的 Jekyll front matter 结构(title、series_number、layout: series-index),并注明该系列对应教材的哪一章。这正是仓库作为课程索引页的典型组织方式。

Introduction 系列:7 集视频一览

本篇文章的关联文档 _Courses/learning-processing/0-introduction/index.md 是整个课程的"第 0 章"入口。该系列目录下共有 7 个课时文件,每集对应一个视频,仓库 front matter 中记录了视频编号、发布日期与video_id:

课时文件视频标题发布日期内容提要
0.0-introduction.mdIntroduction2015-07-10整个学习 Processing 系列的第一支视频,介绍 Processing 是免费开源的编程环境,适合初学者与进阶用户,可在视觉艺术语境中学习编程核心原理
0.1-who-are-you-who-am-i.mdWho are you? Who am I?2015-07-10自我介绍,并说明这套视频适合哪些人观看
0.2-why-learn-processing.mdHow and why should you learn programming?2015-07-10讨论"为什么想学编程"以及"有哪些学习方法"
0.3-what-is-programming.mdWhat is programming?2015-07-10以高层视角回答"什么是编程"
0.4-what-programming-lang.mdWhat are some programming languages?2015-07-24在"创意编程(Creative Coding)"语境下宏观介绍多种编程语言
0.5-processing-examples.mdProcessing Examples2015-07-10演示 Processing 自带示例、讲解库(libraries)的工作方式,并展示用 Processing 完成的作品
0.6-overview-topics.mdOverview of Topics2015-07-18总结整个视频系列计划覆盖的主题,大致对应《Learning Processing》教材目录

每个课时文件(如 0.0-introduction.md)的 front matter 中都带有links元数据,列出与本节相关的官方资源:Processing 官网、Processing Foundation(Processing 基金会)以及《Learning Processing》教材主页。它们共同构成了学习本系列时值得收藏的参考资料集。

Processing:为视觉艺术而生的编程环境

第 0 集(0.0-introduction.md)给出了 Processing 最精炼的定义,这也是整套课程的立论基础:

Processing is a free and open source programming environment perfect for beginners and advanced users alike.

It allows you to learn core principles of computer programming within the context of the visual arts.

要点可以拆解为三句话:

  • 免费且开源(free and open source):任何人都可以免费获取并使用,源代码开放,这也是它能成为入门首选的重要原因;
  • 对初学者与高级用户同样友好:语法简洁、上手快,但表达力足以支撑复杂项目;
  • 以视觉艺术为学习语境:你学习的是编程的核心原理(变量、循环、条件、函数、对象、数组等),但每一次练习都立刻以图像、动画、交互的形式反馈,这极大降低了抽象概念的理解门槛。

这套"在视觉语境中学编程"的思路贯穿了后续全部课程:第 1 章讲像素和坐标系、第 2 章讲开发环境与 RGB 颜色、第 3 章讲交互……每一章都围绕"画出点什么"来展开,而不是枯燥的语法堆砌。

三问入门:为谁而学、为何而学、编程是什么

Introduction 系列用三集视频回答了学习编程前最常被问到的三个问题。

为谁而学(第 1 集):0.1-who-are-you-who-am-i.md 中 Shiffman 介绍了自己,并说明这套视频的目标受众——从零开始、想用编程进行视觉创作的人。它不预设你具备编程经验。

为何而学(第 2 集):0.2-why-learn-processing.md 讨论了"为什么你可能想学编程"以及"有哪些学习方式"。动机可以是创作数字艺术、实现交互作品、理解计算机背后的逻辑,学习方式则强调动手实践与持续练习——这也是 Coding Train 一贯的教学风格:边写代码边讲解。

编程是什么(第 3 集):0.3-what-is-programming.md 以"高层视角(in a high level way)"回答"什么是编程"。这里刻意不陷入语法细节,而是先建立心智模型:编程是向计算机下达精确指令、让它按你的设计执行任务的过程。Processing 把这个过程变成了"写几行代码,立刻看到画面变化"的即时反馈体验。

创意编程的语言生态

第 4 集(0.4-what-programming-lang.md)把视野拉宽,在"创意编程"的语境下介绍了一批编程语言/工具。该课时文件的links元数据中记录的语言生态包括:

工具形态定位
Processing基于 Java 的编程语言/环境面向视觉艺术,入门友好,本课程的主角
openFrameworksC++ 开源框架面向创意编码的 C++ 工具库,性能更强
CinderC++ 库专业的 C++ 创意编程/多媒体库
MaxMSP可视化节点式编程环境面向音乐与多媒体,图形化连线编程
Pure Data可视化节点式编程环境开源的实时音频/图形处理环境

这一集的核心观点是:编程语言不是唯一答案,选择取决于你想做什么。Processing 之所以适合作为起点,是因为它在"上手速度"与"表达能力"之间取得了很好的平衡;当你需要更高性能或更专业的多媒体管线时,可以迁移到 openFrameworks、Cinder 等 C++ 方案,或用 MaxMSP、Pure Data 这类可视化环境做实时音频处理。

用自带示例认识 Processing 与库

第 5 集(0.5-processing-examples.md)是本系列中实操味道最浓的一集,包含三个层次:

  • 浏览 Processing 自带示例:Processing 安装后自带一批示例程序(如基础绘制、图像处理、3D 等),逐个打开、运行、修改,是熟悉环境的捷径;
  • 理解库(libraries)的工作方式:Processing 的很多能力(声音、视频、物理引擎、机器学习等)通过库扩展,这集演示了如何加载和使用库;
  • 展示真实作品:用 Processing 创作的项目案例,让你看到学习之后的可能去向。

结合仓库资源,这套"示例驱动"的学习方法在 Coding Train 生态中被贯彻得淋漓尽致:仓库的 CodingChallenges 目录收录了大量可直接运行的 .pde 作品(详见下文),它们本质上就是"更大的自带示例库"。

全系列主题总览:十章课程的路线图

第 6 集(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.

正如上文课程结构表所示,这条路线图是:

  1. Pixels——计算机图形坐标系与第一行绘制代码(1-pixels);
  2. Processing Environment——在 Processing IDE 中编写与运行代码、RGB 颜色与background()/stroke()/fill()函数(2-processing-environment);
  3. Interaction——交互入门(3-interaction);
  4. Variables——变量、自增、random()与println()(4-variables);
  5. Conditionals——布尔表达式、if / else if / else、逻辑运算符与弹球动画(5-conditionals);
  6. Loops——while与for循环、嵌套循环、变量作用域(6-loops);
  7. Functions——函数基础、模块化与可复用性(7-functions);
  8. Object-Oriented Programming——类与对象、构造函数、传值与传引用(8-object-oriented-programming);
  9. Arrays——数组语法、对象数组、数组与循环、灵活数组(9-arrays)。

从这张路线图可以清楚看到:Introduction 系列负责"建立动机与全局观",而后续九个系列逐一补齐编程的核心语法与思想。先看第 0 章建立整体认知,再按章循序渐进,是最符合课程设计的学习顺序。

仓库实证:入门知识点如何落地成完整作品

为了让"学完 Introduction 之后能做什么"更加具体,可以看看仓库中一个真实的 Processing 作品——第 1 号编程挑战 StarField(星场/飞行星空效果),源码位于 CodingChallenges/CC_001_StarField/Processing/CC_001_StarField/CC_001_StarField.pde 与同目录下的 Star.pde。主程序只有寥寥数十行:

Star[] stars = new Star[800]; float speed; void setup() { size(600, 600); for (int i = 0; i < stars.length; i++) { stars[i] = new Star(); } } void draw() { speed = map(mouseX, 0, width, 0, 50); background(0); translate(width/2, height/2); for (int i = 0; i < stars.length; i++) { stars[i].update(); stars[i].show(); } }

这个 30 行不到的小程序,恰好浓缩了《Learning Processing》前九章的核心知识点,与 Introduction 系列预告的课程主题一一对应:

  • 数组与对象:Star[] stars = new Star[800]用数组管理 800 个星星对象,对应第 8 章面向对象与第 9 章数组;
  • setup / draw 结构:Processing 的固定生命周期函数,对应第 2 章开发环境的使用;
  • 坐标与绘制:translate()、ellipse()、line()、fill()/stroke(),对应第 1 章像素与第 2 章 RGB 颜色;
  • 交互:map(mouseX, 0, width, 0, 50)把鼠标位置映射为运动速度,对应第 3 章交互;
  • 变量与随机:random(-width/2, width/2)生成随机坐标,对应第 4 章变量与random();
  • 条件判断:if (z < 1)判断星星是否飞出屏幕并重置,对应第 5 章条件;
  • 循环:for循环遍历数组,对应第 6 章循环;
  • 函数与类:Star类中的update()与show()方法,对应第 7 章函数与第 8 章对象。

再深入 Star.pde,还可以看到pz(上一帧的 z 值)配合map()绘制"星轨"线条的技巧——z作为除数,值越小投影坐标x / z越大,星星越接近观察者;当z < 1时重置,既完成"穿越"效果,也避免了除零。这份代码用注释详尽说明了每一步的数学直觉,是入门者阅读源码、验证课程知识点的绝佳材料。

这正是 Introduction 系列想传达的信息:一旦掌握基础语法与"画布思维",你就能用几十行代码做出让人惊叹的视觉作品。仓库中 CodingChallenges 目录下 169 个挑战题目(从 StarField 到流体模拟、傅里叶变换、机器学习的 NeuroEvolution Flappy Bird 等)都延续了同一条学习路径。

下一步:如何在仓库中继续学习

  • 按顺序学习后续章节,入口为 _Courses/learning-processing/index.md,从 1-pixels 开始逐章推进;
  • 观看每个课时时,先读对应 .md 文件顶部的 front matter(标题、视频编号、日期、links参考资源),快速了解本集目标;
  • 学到某章后,去 CodingChallenges 找对应主题的挑战题动手实践(如学完第 8、9 章后可精读 StarField 的对象数组代码);
  • 仓库 _Courses 下还收录了 natureofcode、programming_with_text 等系列课程,以及 beginners、Tutorials 等入门材料,可作为《Learning Processing》之后的进阶方向。

需要说明的是:仓库是只读归档,所有 .pde 源码均可用 Processing IDE 直接打开运行;本文涉及的语言生态信息(openFrameworks、Cinder、MaxMSP、Pure Data 等)仅依据课程 front matter 中的links元数据整理,实际安装与版本要求请以各工具官方发布为准。对零基础学习者,建议的路线始终是:先看 Introduction 建立全局观,再按 1~9 章循序渐进,最后用 Coding Challenges 检验学习成果。

  • 教程
  • 文档
  • 示例工程

【免费下载链接】website-archive

Archive of the Coding Train website (first version)

项目地址:https://gitcode.com/gh_mirrors/we/website-archive
点击查看免费下载
上一篇:Android轮盘选择器CursorWheelLayout:打造炫酷旋转选择界面的终极指南
下一篇:QMUI_iOS中的依赖注入:降低代码耦合度

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进