00
关于本课程
《互动编程》以 p5.js 与 Three.js 为工具，将代码视作一种艺术媒介，探索生成、交互与实时的视觉表达。
本作品集汇总课程中三个阶段性作业：从最基础的几何构成，到可玩的 3D 游戏，再到汇总前两者、并作为期末大作业（权重 60%）的本作品集网站。
-
作业一 · 20%
p5.js 几何构成
静态结构与动态交互两套几何语言。
-
作业二
Three.js 3D 游戏
「像素猎手」3D Roguelike 生存射击。
-
作业三 · 60%
作品集网站
你正在浏览的这份期末汇总。
01
作业一 · p5.js 几何构成
两份 p5.js 作品，用同一套包豪斯式几何语言做对照：
- 几何构成（静态）：仅用形状、颜色、位置构图；
setup()中noLoop()一次性绘制，无动画循环。 - 几何构成（动态）：引入
draw()循环，画面随时间与交互实时变化。
技术：p5.js · 形状 / 颜色 / 位置 / 时间 · 实时交互
在新标签页打开 ↗
02
作业二 · Three.js 3D 游戏
像素猎手 · PIXEL HUNTER 3D：一个俯视角竞技场的 3D Roguelike 生存射击游戏。
- WASD 移动 · 鼠标瞄准射击 · 空格冲刺闪避
- 4 类敌人（史莱姆 / 蝙蝠 / 射手 / 坦克）对应不同形状与行为
- 击杀掉落经验宝石 → 升级 → 强化卡牌循环
- 右键拖拽旋转视角 · 滚轮缩放
技术：Three.js（WebGL）· MeshStandardMaterial · 光照 · OrbitControls · 本地依赖离线可运行
在新标签页打开 ↗
03
作业三 · 本作品集网站
这正是你正在浏览的页面——课程期末大作业（权重 60%）。
它以单页滚动的形式，把前两个作业以可交互的实时画面（iframe 嵌入已部署的在线作品）直接呈现，而非静态截图，便于评审即时体验。
技术：纯 HTML / CSS / JavaScript · 部署于 GitHub Pages · 响应式
查看仓库源码 ↗-
首页
概览与导航
课程定位与三个作业的速览卡片。
-
作品
实时嵌入
作业一 / 二以在线画面直接呈现。
-
交付
可提交
公开仓库 + Pages，附演示 PPT。