diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..eceaff1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,9 @@ +# OS-specific cruft +.DS_Store +Thumbs.db + +# Editor directories and caches +.idea/ +.vscode/ +*.swp +*.swo diff --git a/changelog/2025-10-22_webfront_ui_enhancements_and_new_demos.md b/changelog/2025-10-22_webfront_ui_enhancements_and_new_demos.md new file mode 100644 index 0000000..362f31d --- /dev/null +++ b/changelog/2025-10-22_webfront_ui_enhancements_and_new_demos.md @@ -0,0 +1,111 @@ +# 2025-10-22 Webfront: UI 美化与新增演示模块 + +## 新增主页 +- 位置：`CodingToys/webfront/index.html` +- 特性： + - 全新设计的美观主页，展示所有演示模块的入口 + - 采用卡片式布局，包含分类标题、图标、描述与标签 + - 响应式设计，支持各种屏幕尺寸 + - 动画背景：粒子系统与连线效果 + - 渐变色彩与现代化设计风格 + - 悬停交互效果：卡片抬起、阴影增强、边框高亮 + +## 物理模拟新增 + +### 双摆混沌系统 +- 位置：`CodingToys/webfront/Double-Pendulum/` +- 特性： + - 经典双摆物理系统实时模拟 + - 可调节杆长、质量、重力、阻尼系数 + - 轨迹追踪，支持自定义轨迹长度 + - 能量监测与 FPS 显示 + - 拖拽末端质点设置初始角度 + - 美观的渐变色界面与控制面板 + +### 粒子系统引擎 +- 位置：`CodingToys/webfront/Particle-System/` +- 特性： + - 完整的粒子发射与力场模拟系统 + - 支持重力、风力、摩擦力、噪声扰动 + - 多种发射模式：扇形喷射、中心爆裂、旋转环、平行流 + - 可调节粒子寿命、尾迹长度、色彩方案 + - 鼠标交互：点击改变发射器位置与方向 + - 即时爆炸效果与力场可视化 + - 四种色彩主题：日落暖光、极光渐变、霓虹炫彩、余烬火花 + +### 波纹与流体模拟 +- 位置：`CodingToys/webfront/Wave-Simulation/` +- 特性： + - 基于高度场离散波动方程的水面模拟 + - 可调节阻尼系数、传播速度、扰动强度 + - 支持随机水滴生成与手动扰动 + - 多种着色模式：水面色彩、法线渲染、速度矢量、深度视图 + - 鼠标/触摸交互：点击或拖拽添加水波 + - 实时位移与速度统计 + +### 弹簧物理系统 +- 位置：`CodingToys/webfront/Spring-Physics/` +- 特性： + - 弹簧-质点布料模拟系统 + - 可调节弹性系数、阻尼系数、重力 + - 支持多种拓扑结构：结构弹簧、对角弹簧、弯曲弹簧 + - 鼠标拖拽交互：编辑布料形状 + - 风力系统：可调节风力强度与方向 + - 固定点模式：四角、全顶部、全部自由 + - 瞬间风暴效果与实时统计 + +## 视觉特效新增 + +### 粒子爆炸特效 +- 位置：`CodingToys/webfront/Particle-Effects/` +- 特性： + - 鼠标交互触发的烟花与能量脉冲效果 + - 自动间隔爆炸系统 + - 多种爆炸类型：烟花、能量脉冲、冲击环、火花雨 + - 四种色彩主题：极光、余烬、深海、赛博 + - 可调节粒子数量、尾迹长度、重力强度 + - 长按鼠标持续喷射效果 + - 冲击环扩散动画 + +### 形状变形动画 +- 位置：`CodingToys/webfront/Morphing-Shapes/` +- 特性： + - 多种几何形状之间的平滑插值变形 + - 三种形状序列：默认（圆→星形→三叶花→心形→齿轮）、有机（圆→气泡→云朵→花瓣→树叶）、科技（方形→菱形→八角星→二次曲线→旋涡） + - 可调节变形速度、路径细分、噪声幅度 + - 旋转动画与外发光效果 + - 渐变色彩填充，支持调色板选择 + - 缓动函数实现平滑过渡 + +### 3D 图形变换 +- 位置：`CodingToys/webfront/3D-Transforms/` +- 特性： + - CSS 3D 与 Canvas 结合的 3D 图形展示 + - 三种 3D 对象：立方体（CSS 3D）、环轨（CSS 3D）、二十面体（Canvas 投影） + - 可调节观察角度、透视深度、动画速度 + - 拖拽旋转、滚轮缩放、双击重置 + - 多面体实时投影与深度排序 + - 透明度与光影效果 + +## UI 改进 +- 所有新增模块采用统一的设计语言 +- 深色主题与渐变色彩方案 +- 响应式控制面板与参数调节 +- 实时统计与 FPS 显示 +- 流畅的动画过渡与交互反馈 +- 工具提示与操作说明 + +## 技术要点 +- 纯 HTML/CSS/JS，无外部依赖 +- Canvas 2D 高性能渲染 +- CSS 3D Transform 与透视效果 +- requestAnimationFrame 动画循环 +- 固定时间步长物理更新 +- 响应式设计与触摸支持 +- 参数化设计，易于调节与扩展 + +## 备注 +- 遵循 KISS 原则，保持代码简洁 +- 所有演示均为单文件实现 +- 支持直接在浏览器中打开，无需构建工具 +- 中文界面与注释 diff --git a/webfront/3D-Transforms/index.html b/webfront/3D-Transforms/index.html new file mode 100644 index 0000000..524b46b --- /dev/null +++ b/webfront/3D-Transforms/index.html @@ -0,0 +1,508 @@ + + + + + + 3D 图形变换 · CSS & Canvas 交互示例 + + + +
+
+

3D 图形变换

+

利用 CSS 3D 与 Canvas 绘制展示多种空间变换效果，可交互控制旋转角度、投影透视与动画模式。

+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
拖拽画布旋转视角 · 滚轮缩放 · 双击恢复默认
+
+ +
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+ + + +
+
+ +
+
+
+
+ + + + diff --git a/webfront/Double-Pendulum/index.html b/webfront/Double-Pendulum/index.html new file mode 100644 index 0000000..40809cf --- /dev/null +++ b/webfront/Double-Pendulum/index.html @@ -0,0 +1,613 @@ + + + + + + 双摆混沌系统 · 物理模拟 + + + +
+
+ 双摆混沌系统 + 经典双摆模型的实时模拟，支持参数调节、轨迹追踪与能量监测。 +
+ +
+
+ 角度 θ₁：0° + 角度 θ₂：0° + 能量：0 + FPS：0 +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + +
+
+ 质点 1 + 质点 2 + 轨迹 +
+
+ +
+ +
拖拽末端质点可重新设定初始角度 · 双击画布重置轨迹
+
+
+ + + + diff --git a/webfront/Morphing-Shapes/index.html b/webfront/Morphing-Shapes/index.html new file mode 100644 index 0000000..19ed9e8 --- /dev/null +++ b/webfront/Morphing-Shapes/index.html @@ -0,0 +1,518 @@ + + + + + + 形状变形动画 · 几何插值与路径渐变 + + + +
+
+

形状变形动画

+

通过参数化轮廓与弧度插值，实现多种几何形状之间的平滑过渡，同时支持渐变着色、旋转动画与噪声扰动。

+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + +
+ +
+
点击画布可锁定当前形状 · 滚轮缩放视图 · 按住空格键暂停。
+
+ +
+ +
+
+ + + + diff --git a/webfront/Particle-Effects/index.html b/webfront/Particle-Effects/index.html new file mode 100644 index 0000000..4739b2c --- /dev/null +++ b/webfront/Particle-Effects/index.html @@ -0,0 +1,579 @@ + + + + + + 粒子爆炸特效 · 烟花与能量轨迹 + + + +
+
+

粒子爆炸特效

+

点击或自动触发烟花、能量脉冲与尾迹轨迹。多种色彩主题和粒子行为，可用于创意交互展示。

+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + +
+ +
+ 粒子数：0 + FPS：0 + 平均寿命：0s +
+
点击画布任意位置创建烟花 · 长按生成持续喷射 · 双指缩放控制全局缩放。
+
+ +
+ +
+
+ + + + diff --git a/webfront/Particle-System/index.html b/webfront/Particle-System/index.html new file mode 100644 index 0000000..c8f2598 --- /dev/null +++ b/webfront/Particle-System/index.html @@ -0,0 +1,633 @@ + + + + + + 粒子系统引擎 · 力场与发射模拟 + + + +
+
+

粒子系统引擎

+

实时粒子发射与力场模拟，支持重力、风力、摩擦、噪声扰动等多种效果，并提供轨迹尾迹与颜色渐变控制。

+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + +
+ +
+ 当前粒子：0 + 平均速度：0 px/s + FPS：0 +
+
点击画布改变发射器位置 · 按住拖动调整方向 · 滚轮可缩放视图
+
+ +
+ +
+
+ + + + diff --git a/webfront/Spring-Physics/index.html b/webfront/Spring-Physics/index.html new file mode 100644 index 0000000..8fcaaa2 --- /dev/null +++ b/webfront/Spring-Physics/index.html @@ -0,0 +1,645 @@ + + + + + + 弹簧-质点布料模拟 · 互动演示 + + + +
+
+

弹簧-质点布料模拟

+

基于弹簧-质点模型的布料模拟，支持重力、风力、阻尼与拓扑结构调节，鼠标拖拽可交互编辑布料形状。

+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + +
+ +
+ 节点数量：0 + 弹簧数量：0 + 平均速度：0 px/s + FPS：0 +
+
按住鼠标拖拽节点进行编辑 · 双击画布释放所有固定点 · 支持多点触控拖拽。
+
+ +
+ +
+
+ + + + diff --git a/webfront/Wave-Simulation/index.html b/webfront/Wave-Simulation/index.html new file mode 100644 index 0000000..0edac68 --- /dev/null +++ b/webfront/Wave-Simulation/index.html @@ -0,0 +1,514 @@ + + + + + + 波纹与流体模拟 · 高度场水面 + + + +
+
+

波纹与流体模拟

+

采用高度场离散波动方程模拟水面波纹，可调节阻尼、传播速度与扰动强度，同时提供多种着色模式展示法线、速度与深度。

+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + +
+ +
+ FPS：0 + 最大位移：0 + 平均速度：0 +
+
点击/拖拽添加扰动 · 按住 Shift 创建负扰动 · 支持触摸。视图可根据窗口自适应。
+
+ +
+ +
+
+ + + + diff --git a/webfront/index.html b/webfront/index.html new file mode 100644 index 0000000..093fb4e --- /dev/null +++ b/webfront/index.html @@ -0,0 +1,566 @@ + + + + + + Webfront · 交互式前端演示集 + + + + + +
+
+

Webfront

+

探索交互式前端演示 · 物理模拟 · 视觉特效 · 创意动画

+
+ 纯前端实现 + · + 无需构建工具 +
+
+ +

物理模拟

+
+ +
+
⬡
+
+
+

六边形小球自由落体

+

在规则六边形容器中模拟小球的重力、碰撞与弹性反弹

+
+ 物理引擎 + 交互式 + Canvas +
+
+ + + +
+
🎭
+
+
+

双摆混沌系统

+

经典双摆物理系统，展示混沌运动与轨迹追踪

+
+ 混沌理论 + 轨迹追踪 + Canvas +
+
+ + + +
+
✨
+
+
+

粒子系统引擎

+

可配置的粒子系统，支持重力、风力、摩擦力等多种力场

+
+ 粒子物理 + 力场模拟 + Canvas +
+
+ + + +
+
🌊
+
+
+

波纹与流体模拟

+

交互式水波传播与流体动力学可视化

+
+ 流体力学 + 交互式 + Canvas +
+
+ + + +
+
🔗
+
+
+

弹簧物理系统

+

可交互的弹簧-质点系统，模拟布料与软体动力学

+
+ 弹簧力学 + 拖拽交互 + Canvas +
+
+ +
+ +

视觉特效

+
+ +
+
💥
+
+
+

粒子爆炸特效

+

鼠标交互触发的烟花、爆炸与粒子轨迹效果

+
+ 粒子动画 + 鼠标交互 + Canvas +
+
+ + + +
+
🔷
+
+
+

形状变形动画

+

几何图形的平滑变形与过渡动画

+
+ 形状插值 + SVG/Canvas +
+
+ + + +
+
🎲
+
+
+

3D 图形变换

+

纯 CSS 与 Canvas 的 3D 旋转、透视与光影效果

+
+ 3D 变换 + CSS 3D + Canvas +
+
+ + + +
+
🌤️
+
+
+

动画天气卡片

+

精美的天气状态卡片，含日出、风、雨、雪等动画效果

+
+ CSS 动画 + 关键帧 +
+
+ +
+ +

3D 交互

+
+ +
+
🎨
+
+
+

3×3 魔方模拟器

+

完整的 3D 魔方，支持各种旋转操作、打乱与视角控制

+
+ 3D 交互 + CSS 3D + 变换动画 +
+
+ +
+ + +
+ + + +