INTERACTIVE PROGRAMMING · 2026 秋季

用代码作画,
把想法跑起来。

你好,我是何纯清,数字媒体艺术专业。这一学期我用 p5.js 与 Three.js 完成了三个作品:从一张代码生成的粒子海报,到会回应鼠标的粒子场,再到一个可以在浏览器里玩的 3D 平台跳跃游戏。

看我的作品 ↓ 关于我

01作品集

三个作品按时间顺序排列:先把一帧定住,再让它动起来,最后让人玩进去。

①

热爱不息 · 静 | 静态海报

P5.JS · 静态定格 · 作业一 · 系列静态篇

800×1200 竖版海报,是动态篇的「定格版」:220 个粒子随机落位,颜色由粒子自己的高度决定——上蓝、中红、下金,再叠一层柔和发光和暗角把视线收回中间。randomSeed 固定,每次打开都是同一张。

p5.jsclass 粒子高度取色shadowBlur 发光noLoop 定格
打开作品 →
②

热爱不息 · 动 | 粒子流向

P5.JS · 交互 · 作业一 · 静态篇的动态版

「热爱不息」系列的动态篇:80 个粒子组成的海报,颜色沿用静态稿同一条蓝→红→金映射,越靠上越蓝、越靠下越金。鼠标在左/右半屏移动时,粒子流整体改变加速方向,点击重新洗牌。包含鼠标位置与点击两种交互。

p5.jsclass 粒子mouseX 力场高度取色残影拖尾
打开作品 →
③

焰行者 · 三界之门

THREE.JS · 3D 平台跳跃游戏 · 作业二

一个能玩的 3D 平台跳跃游戏:熔岩场景配发光拱门传送门,相机可环绕跟随,有开始界面、掉落与通关判定、BOSS 关卡和 HUD,支持重新开始,帧率稳定在 30fps 以上。

Three.js3D 光照相机控制碰撞检测游戏循环
开始游戏 →

02关于我

数字媒体艺术专业 · 2026 级 · 在学

我喜欢把「视觉」和「逻辑」放在一起想问题:海报不该只是画出来的,也可以是一段代码执行的结果;游戏不只是玩,背后是循环、碰撞与状态机。

这学期最大的收获是建立了「从想法到可运行作品」的完整流程:确定构图或玩法 → 拆成可实现的变量与函数 → 迭代调参 → 部署上线给别人玩。三个作品分别覆盖了静态构图、交互动效与实时 3D 三个层次。

接下来想深入的方向:着色器(Shader)与生成艺术,让画面里出现更多「算出来的美」。

p5.js / 创意编程熟练
Three.js / 3D 网页入门进阶
HTML / CSS / JS熟练
视觉排版 / 海报设计良好