PORTFOLIO / 2026 数字媒体艺术 · 大二互动编程 · 结课

刘晓茹

创意交互×动态视觉

我想做的是那种能被手推动的画面。所以这个网站本身也是作品之一—— 它延续《运动轨迹》的画法：整站是一张米白的纸，你的光标走到哪里，纸上就落下一串马卡龙色的泡泡，正片叠底、慢慢褪去。下面三个作品，是我从静态构成走到实时交互的三步。

看作品 ↓ p5.js 现场 Three.js 现场

SCROLL

WORKS

三个作品都能在页面里直接打开、直接玩

ip-01-p5-works / static.html 新标签 ↗

用形状、颜色和位置排出一个有节奏的画面，一次画完，之后不再变动。

标题: 几何构成
一句话说明: 把画布切成竖条当骨架，用循环生成的圆制造节奏。
创作思路: 先把画面切成四条竖带定下骨架，再用两个 for 循环生成“渐大渐低”的圆，靠大小递增和位置错位制造向前推进的节奏；最后压上几层大圆打乱这份秩序，让平面的色块有前后层次。全程只用 5 个颜色。
技术: p5.js 2.3.1 · 不写 draw() 循环，全部在 setup() 里一次画完 · 两个 for 循环生成重复元素 · 5 色配色

ip-01-p5-works / dynamic.html 新标签 ↗

鼠标在画面里移动 · 点击爆发 · 空格清屏

白底上落下一层又一层马卡龙色的泡泡，旧的慢慢褪成一道轨迹。

标题: 运动轨迹
一句话说明: 鼠标每动一下就长出两个极淡的泡泡，叠成会呼吸的透叠轨迹。
创作思路: 把画布当成一张会呼吸的纸：鼠标每移动一下就落下两个大而极淡的泡泡，白底每帧只盖 12% 的透明度，所以旧泡泡不会一下子消失，而是慢慢褪成一道轨迹。三个马卡龙色用正片叠底混合，重叠的地方会压出更深的层次；每个泡泡还带着不同相位的呼吸缩放，画面就不会死。
技术: p5.js 2.3.1 · draw() 循环 · MULTIPLY 正片叠底 · 3 种交互（移动生成 / 点击爆发 / 空格清屏）· 白底 + 3 色马卡龙配色

ip-02-three-game / index.html 新标签 ↗

方向键 / WASD 移动 · 空格跳 · 鼠标拖拽转视角 · R 重开

一颗金属小球在悬空的霓虹赛道上奔跑，收集宝石、躲开障碍，别掉下去。

标题: 滚动霓虹 · Rolling Neon
一句话说明: Three.js 做的 3D 跑酷：跑满 600 米通关，掉下去就结束。
创作思路: 赛道用随机游走生成，保证每一局都存在一条走得通的路线；速度随进度往上加，障碍和断口的密度也跟着变紧，越到后面越不敢走神。相机可以按住鼠标绕小球转，让你回头看自己刚跑过的路——那是这个游戏里唯一“慢下来”的时刻。
技术: Three.js r160 · UnrealBloom 辉光后处理 · 程序化关卡 + 对象池 · PBR 金属球与虹彩材质 · WebAudio 实时合成音效 · 键盘 / 触摸双端操作

关于我

刘晓茹

数字媒体艺术专业，大二。我的方向是创意交互与动态视觉——喜欢那种“你一动手，画面就变”的东西，比起把一张图做到完美，我更想知道它动起来、被人碰过之后会变成什么样。

这学期的三个作业刚好是一条路：先是让它好看，再让它能动、能被人推动，最后让它成为一个能被玩的东西。