互动编程 · 结课作品集

刘晓茹
创意交互 与 动态视觉

数字媒体艺术大二。我想做的是那种能被手推动的画面——不是挂在墙上的图, 而是你一动,它就跟着变的东西。下面三个作品,是我从静态构成走到实时交互的三步。

看作品 → 作业一 · p5.js 作业二 · Three.js

Works

三个作品都能在页面里直接打开、直接玩
01 / P5.JS · 静态

几何构成

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

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

运动轨迹

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

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

滚动霓虹

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

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

About

关于我

刘晓茹

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

这学期的三个作业刚好是一条路:先是让它好看(几何构成),再让它能动、能被人推动(运动轨迹), 最后让它成为一个能被玩的东西(滚动霓虹)。

专业
数字媒体艺术
年级
大二
方向
创意交互 + 动态视觉
邮箱
3623405084@qq.com