← 返回首页
作品 02 · p5.js 交互

交互动态

满屏点阵像水面一样随光标起伏,点击炸开水波,空格让整个世界停下来。

👆 在窗口内移动 / 点击;键盘:空格暂停 · N 昼夜 · ↑↓ 调速 · R 重置

创作意图

想做一张"活的画":静态时是一张极简的构成,一旦光标靠近,点阵就变成可以拨动的水面。昼夜切换则是想看看同一构图在两种情绪下的样子。

用了什么技术

p5.js;点阵由嵌套 for 循环生成,位移是距离衰减的 sin 波;跟随用与帧率无关的指数缓动;点阵颜色按透明度分档预生成,避免每帧解析颜色字符串。

三种交互

① 鼠标移动:点阵波状起伏 + 圆盘缓动跟随;② 点击:扩散水波(最多 8 个);③ 键盘:空格暂停、N 昼夜切换、↑↓ 调速、R 重置。

稳定性处理

所有运动都是时间的连续函数,没有随机数;时间取自 deltaTime,高刷屏和后台切回都不会跳帧、抖动。

在新标签页全屏打开 ↗