← 返回作品集
作业二 / 交互图形
02 / 原生 Canvas 2D · 交互图形

ORBIS 可交互曼陀罗

Orbis Interactive Mandala · 2025
在上面这块画面里:拖动旋转 · 滚轮缩放 · 点击绽放 · C 换色 · 空格 中心绽放 · R 复位
全屏打开 →

作 品 说 明

一整幅曼陀罗都是算出来的,没有一张贴图:中心花蕊、花瓣环、星形环、起伏环、 96 颗沿行波起伏的光点,全部由路径函数每帧重新绘制,随时间和指针位置缓慢呼吸。

交互是这件作品的主体 —— 拖动时整幅图跟着手转,松手后带惯性继续转;滚轮缩放是缓动过去的; 点一下会在指针处炸开一圈 1.6 秒的涟漪和 30 颗火花,同时整幅图轻微"弹"一下。 指针移到哪个角度,那个方向的光点就会亮起来,画面像是在回应你。

最后叠了一层噪点和暗角,把发光的东西压出一点实体感;换成青玉、绯樱、霜蓝时, 颜色是逐帧插值过去的,不会硬切。

操 作

  • 拖动旋转曼陀罗,松手有惯性
  • 滚轮缩放(0.55× – 1.9×)
  • 点击在该处绽放涟漪 + 火花
  • 空格从正中心绽放一次
  • C循环切换四套配色
  • R角度与缩放复位
  • 保存 PNG右上角按钮,导出当前画面
光点96 颗
火花每次 30 颗
涟漪1.6 秒
配色4 套 · 插值过渡

四 套 配 色

左起:鎏金(默认)、青玉、绯樱、霜蓝。切换时背景与三层主色同时插值,约一秒内过渡完成。

青玉配色
青玉 JADE
绯樱配色
绯樱 ROSE
霜蓝配色
霜蓝 ICE