daily-work-20261025-second:基于原生 JavaScript 与 Canvas 2D 的交互式生成艺术项目

可直接在浏览器打开体验的交互式光影生成艺术。数十条正弦丝线以不同相位实时交织成流动绸缎,鼠标纵移拨动振幅、横移调节流速,配合每日种子化配色每天呈现全新面貌。零依赖单 HTML 文件,离线即可运行。【此简介由AI生成】

分支1Tags0

流光织机 · 1025期-second

移动鼠标,拨动光的经纬

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

架构图

实际运行截图


功能特性

特性 说明
经纬织造 数十条正弦丝线以不同相位与速度流动,交叠成绸
鼠标拨弦 纵向移动改变振幅,横向移动调节流速,实时跟手
循环上色 各条丝线依次使用调色板中的颜色
每日配色 当日种子决定整体色系与波动气质,每天一匹新布

系统架构

整体分为四层:

  1. 输入层 — mousemove → 振幅 / 流速参数
  2. 状态层 — 相位累加器与曲线参数表
  3. 渲染层 — Canvas 2D 逐帧绘制正弦曲线采样折线
  4. 配色层 — 按丝线序号循环选取调色板颜色

技术栈

  • Canvas 2D — 全部视觉效果的原生绘制,无任何图形库
  • requestAnimationFrame / 定时器 — 逐帧渲染与世代节拍
  • 种子化伪随机(mulberry32) — 当日种子决定布局与配色,每天面貌一新
  • 原生 JavaScript (ES2020+) — 零依赖、零构建,单个 index.html 即可运行

快速开始

# 直接双击 index.html 用浏览器打开即可,离线可用

期号

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

许可证

MIT

项目介绍

可直接在浏览器打开体验的交互式光影生成艺术。数十条正弦丝线以不同相位实时交织成流动绸缎,鼠标纵移拨动振幅、横移调节流速,配合每日种子化配色每天呈现全新面貌。零依赖单 HTML 文件,离线即可运行。【此简介由AI生成】

定制我的领域