课程大纲 · Creative Coding with P5.js

评分标准

课堂参与

10%

每周小练习

20%

期中项目

25%

期末项目

35%

课堂展示

10%

教学内容

Part I

编程基础与视觉入门

第 1–6 周 · 掌握 P5.js 基本语法，建立计算思维

01

欢迎来到创意编程

课程介绍、P5.js 简介、开发环境搭建、第一个 sketch

环境配置Hello P5

02

绘图基础

坐标系、基本图元（点、线、圆、矩形）、颜色模式、描边与填充

03

变量与动画

变量声明、数学函数、让图形动起来、随机数

变量random()sin()

04

条件判断与交互

if/else、条件表达式、鼠标交互、键盘事件

if/elsemousePressedkeyPressed

05

循环与复制

for 循环、嵌套循环、translate() 变换、push/pop 栈

for looptranslatepush/pop

06

函数封装

自定义函数、参数传递、返回值、模块化思维

functionreturnmodular

Part II

进阶视觉与数据表达

第 7–11 周 · 数组、对象、文字与数据可视化

07

数组与粒子系统

数组基础、Array 操作、粒子系统入门

08

向量与力

p5.Vector、加速度与速度、力的模拟（引力、摩擦力）

p5.Vectorphysics

09

文字与字体

loadFont()、textFont()、文字排版、逐字动画

text()typography

10

图像处理

loadImage()、image()、像素操作、图像合成模式

pixels[]blendMode

11

数据可视化

CSV/JSON 数据读取、绑定可视化、地图可视化基础

loadTabledata viz

Part III

高级主题与作品构建

第 12–16 周 · 机器视觉、算法艺术与作品集开发

12

摄像头与 ML5.js

getUserMedia()、ML5.js 姿势检测、身体作为输入设备

13

噪音艺术

Perlin Noise、随机噪声、噪声场、纹理生成与有机运动

noise()Perlin Noisenoise field

14

故障艺术

像素排序、RGB 通道偏移、数据弯曲、噪点与数字图像故障美学

glitchpixel sortingRGB shift

15

分形艺术

递归、自相似结构、分形几何、L-system 与生成式图案

fractalrecursionL-system

16

期末项目展示

期末项目 presentation 与课程总结