互 动 编 程 · 课 程 作 品 集
用代码生成画面，
用画面承载交互。
这里收录本学期《互动编程》的三件作品：用 p5.js 写出来的静态生成图形、 用原生 Canvas 2D 做的可交互曼陀罗、用 Three.js 做出来的 3D 双人对战小游戏。 三件都能直接在浏览器里打开，也都可以在页面上直接操作。
作 品
03 WORKS
02 / 原生 Canvas 2D · 交互图形
ORBIS 可交互曼陀罗
Orbis Interactive Mandala
一整幅曼陀罗都是算出来的：花蕊、花瓣环、星形环、96 颗光点每帧重绘。 拖动带着惯性旋转，滚轮缩放，点一下在指针处炸开涟漪和 30 颗火花；四套配色切换时颜色逐帧插值过渡。
查看作品 →
技 术
TOOLS
生成图形
p5.js 2.3.2
画布、坐标映射与随机。
交互图形
原生 Canvas 2D
指针交互、粒子与后处理。
三维与交互
Three.js 0.160.0
GLTFLoader、OrbitControls、Blender 导出的 GLB 模型。
开发与发布
VS Code + Live Server
本地调试；Cloudflare Pages 发布。
关 于
ABOUT
三件作品都是边学边做的：第一件是第一次用代码「画」东西，重点在理解坐标、循环和映射； 第二件开始处理指针输入与实时动画，让画面能回应操作；第三件第一次碰 Three.js 和 3D 模型， 重点在把模型、动画、输入和碰撞拼成一个能玩的东西。 源码分别托管在 dusonglin-source 与 my-portfolio。