Portfolio
拾羽集
把远方折成翅膀,把此刻交还给风。
以代码描绘自然,让迁徙、生长与星光成为可以交互的风景。每件作品保留两种实现,探索不同技术路径下的表达。
01
候鸟 · MIGRATION
简易版
跟随折纸候鸟沿河远行,穿过雾境、暮色与雪夜。以原生 Canvas 2D 手绘沿途风景,将画面与配乐收进一个文件。
原生 JavaScript · Canvas 2D · WebAudio
→
02
候鸟 · MIGRATION
工程版
在不断延伸的三维河谷中与候鸟同行,让指尖化作风,或把视线交给自动运镜。气候沿途流转,每次起飞都有不同的风景。
React · TypeScript · Three.js · Rsbuild
→
03
苔痕 · PATINA
简易版
点一下播种,看苔痕从零散斑点长成迷宫与珊瑚,再被一圈水渍洗回纸面。以单文件呈现反应扩散的生长,安静地循环往复。
原生 JavaScript · Canvas 2D · 反应扩散
→
04
苔痕 · PATINA
工程版
在暖纸上播种、涂抹,任苔绿与墨色缓慢蔓延。由 GPU 推演生长,叠加纸纹与墨晕,还可开启随生长变化的合成音景。
React · TypeScript · WebGL2 · Rsbuild
→
05
一木 · ARBOR
简易版
落下一粒种子,随滚动看它生根、展叶与结果,再向上回到最初。用原生 Canvas 2D 将一棵树的生长收进单文件画卷。
原生 JavaScript · Canvas 2D · WebAudio
→
06
一木 · ARBOR
工程版
让一棵水彩质感的三维树随滚动生长,直到果熟鸟归。轻轻拖动画面,换个角度看枝叶与纸鸟,也可以倒回重看这段旅程。
React · TypeScript · Three.js · GSAP · Rsbuild
→
07
星轨 · STAR TRAILS
简易版
选一个地点与日期,让真实星表中的星辰画出一夜的弧线。无需前端框架,由 WASM 在浏览器本地计算,再以 Canvas 2D 绘出星轨。
Rust (WASM) · 原生 JavaScript · Canvas 2D
→
08
星轨 · STAR TRAILS
工程版
选定一处夜空,看星光随时间累积,在长曝光中逐渐显影。与简易版共享天文内核,以 WebGL2 呈现星轨叠加与柔和光晕。
React · TypeScript · WebGL2 · Rust (WASM) · Rsbuild
→
09
潮汐 · TIDELINE
简易版
把一段潮间带画成测绘图:剖面里潮水按真实月相涨落,平面上写下的字被涨潮一点点收回。不借助任何库,由 Canvas 2D 画出水位、泡沫与湿沙。
原生 JavaScript · Canvas 2D · WebAudio
→
10
潮汐 · TIDELINE
工程版
在一段潮间带上写字,看潮水按真实的月相与谐波模型涨落。沙面被浸湿又晾干,字迹先被抹平,退水处留下一道泡沫花边。
React · TypeScript · Three.js · WebAudio · Rsbuild
→