【作品分享】流光织机 · 1025期-second

流光织机 · 1025期-second

数十条丝线随正弦波流动交织，鼠标纵移拨动振幅、横移改变流速，光在经纬之间织出流动的绸缎。

数十条丝线随正弦波流动交织，鼠标纵移拨动振幅、横移改变流速，光在经纬之间织出流动的绸缎。

功能特性

特性 | 说明

经纬织造 | 数十条正弦丝线以不同相位与速度流动，交叠成绸

鼠标拨弦 | 纵向移动改变振幅，横向移动调节流速，实时跟手

循环上色 | 各条丝线依次使用调色板中的颜色

每日配色 | 当日种子决定整体色系与波动气质，每天一匹新布

系统架构

整体分为四层：

1. 输入层 — mousemove → 振幅 / 流速参数

2. 状态层 — 相位累加器与曲线参数表

3. 渲染层 — Canvas 2D 逐帧绘制正弦曲线采样折线

4. 配色层 — 按丝线序号循环选取调色板颜色

技术栈

- Canvas 2D — 全部视觉效果的原生绘制，无任何图形库

- requestAnimationFrame / 定时器 — 逐帧渲染与世代节拍

- 种子化伪随机（mulberry32） — 当日种子决定布局与配色，每天面貌一新

- 原生 JavaScript (ES2020+) — 零依赖、零构建，单个 `index.html` 即可运行

快速开始

期号

1025 期 · 由每日锻造流水线自动生成，同主题次日会换上全新配色与参数。

许可证

MIT

源码：查看作品仓库

作品：查看展览馆作品