From 126fd519cdeaf0e908260c730e854a81038d0b00 Mon Sep 17 00:00:00 2001 From: q442333521 <442333521@qq.com> Date: Wed, 26 Nov 2025 11:57:45 +0800 Subject: [PATCH 1/3] Update CNAME --- CNAME | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CNAME b/CNAME index 200376b..8c6d08f 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -www.l2k.tech \ No newline at end of file +kalman.l2k.tech \ No newline at end of file From c5a206214ec15d11ca9b4bdd9db80bb24bb034e2 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 26 Nov 2025 04:16:02 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20README=EF=BC=9A?= =?UTF-8?q?=E6=89=93=E9=80=A0=E6=8E=A7=E5=88=B6=E7=AE=97=E6=B3=95=E5=AD=A6?= =?UTF-8?q?=E4=B9=A0=E5=B9=B3=E5=8F=B0=EF=BC=8C=E6=B7=BB=E5=8A=A0=E8=AF=A6?= =?UTF-8?q?=E7=BB=86=E7=9A=84=E5=8A=9F=E8=83=BD=E8=AF=B4=E6=98=8E=E5=92=8C?= =?UTF-8?q?=E5=BC=80=E5=8F=91=E8=AE=A1=E5=88=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 314 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 262 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index 4df95d1..2653640 100644 --- a/README.md +++ b/README.md @@ -1,85 +1,295 @@ -# Kalman Filter +# 🎓 控制算法学习平台 -Final project for the *Probabilistic models for decision making* course, from my [MSc in Computer Science](https://github.com/avivace/compsci): *an interactive and real time 2D simulation of the Kalman Filter in use to reduce input noise*. +> **在线交互式算法演示平台** - 让算法学习变得可视化、可交互、易理解 -### [Live demo](https://avivace.github.io/kalman) +一个专注于控制算法、机器人算法和具身智能的在线学习平台。通过实时可视化和交互式操作，让复杂的算法变得触手可及。 -### [Slides](slides.pdf) +### 🌐 [在线体验](https://www.l2k.tech/) -![](screenshot1.png) +--- -> The Kalman Filter is an algorithm that uses a series of measurements observed over time, containing statistical noise and other inaccuracies, and produces estimates of unknown variables that tend to be more accurate than those based on a single measurement alone, by estimating a joint probability distribution over the variables for each timeframe. -> The algorithm works in a two-step process. In the prediction step, the Kalman filter produces estimates of the current state variables, along with their uncertainties. Once the outcome of the next measurement (necessarily corrupted with some amount of error, including random noise) is observed, these estimates are updated using a weighted average, with more weight being given to estimates with higher certainty. The algorithm is recursive. It can run in real time, using only the present input measurements and the previously calculated state and its uncertainty matrix; no additional past information is required. +## ✨ 特性 -Algorithm pseudocode: +- 🎯 **实时可视化** - 所有算法都有实时动画演示 +- 🎮 **交互式控制** - 可调节参数，立即看到效果 +- 📚 **详细说明** - 通俗易懂的中文解释，普通人也能看懂 +- 🎨 **现代化界面** - 渐变设计，响应式布局，支持移动端 +- 🔬 **实践导向** - 边测试边学习，从实践中理解理论 -```bash -m = [X, Y, deltaX, deltaY] ← measurement vector -c = [0, 0, 0, 0] ← control vector (not used here) +--- -Prediction Step: -x = (A * x) + (B * c) -P = (A * P * AT) + Q ← AT is the matrix transpose of A +## 📊 已实现的算法 -Correction Step: -S = (H * P * HT) + R ← HT is the matrix transpose of H -K = P * HT * S-1 ← S-1 is the matrix inverse of S -y = m - (H * x) -x = x + (K * y) -P = (I - (K * H)) * P ← I is the Identity matrix +### 1️⃣ 卡尔曼滤波器 (Kalman Filter) +**用途：** 噪声过滤、状态估计 -If prediction is enabled, the prediction step is looped for n - more frames after the above code is executed: +**功能：** +- 实时 2D 轨迹追踪演示 +- 可视化噪声数据和过滤结果 +- 可调节噪声强度、预测步数等参数 +- 支持多种运动模式（鼠标、方形路径、随机路径等） -predX = x -predX = (A * predX) + (B * c) +**应用场景：** +- GPS 定位优化 +- 自动驾驶传感器融合 +- 手机陀螺仪数据处理 +- 目标追踪系统 +### 2️⃣ PID 控制器 (PID Controller) -The estimated position of the cursor is in the x vector: +**用途：** 闭环控制、系统稳定 -x ← [xPos, yPos, xVel, yVel] -``` +**功能：** +- 机械臂角度控制演示 +- 实时可视化 P、I、D 三个分量的作用 +- 可调节 Kp、Ki、Kd 参数 +- 干扰测试和快速预设 +- 动力学模型模拟（惯性、摩擦） + +**应用场景：** +- 工业机器人控制 +- 无人机姿态稳定 +- 汽车巡航控制 +- 温度/压力控制系统 + +--- -![](screenshot2.png) +## 🚀 快速开始 -### Deploy +### 在线体验 + +直接访问 [https://www.l2k.tech/](https://www.l2k.tech/) + +### 本地开发 ```bash -git clone +# 克隆仓库 +git clone https://github.com/q442333521/kalman.git +cd kalman + +# 安装依赖 npm install + +# 启动开发服务器 npm run serve + +# 访问 http://localhost:8080 ``` -Publish on `avivace.github.io/kalman`: +### 构建部署 ```bash +# 构建生产版本 +NODE_OPTIONS=--openssl-legacy-provider npm run build + +# 部署到 GitHub Pages npm run deploy ``` -> Development is done on the `develop` branch due to GitHub's restriction on branches for user pages (the build is deployed on the `master` branch and published to `avivace.github.io/kalman` from there). +--- + +## 📁 项目结构 + +``` +kalman/ +├── public/ # 静态资源 +│ ├── index.html # HTML 模板 +│ ├── CNAME # 自定义域名配置 +│ └── sylvester.js # 矩阵数学库 +├── src/ +│ ├── App.vue # 主应用 +│ ├── main.js # 入口文件 +│ ├── router/ # 路由配置 +│ │ └── index.js +│ ├── components/ # 组件 +│ │ ├── NavBar.vue # 导航栏 +│ │ └── Kalman.vue # 卡尔曼组件（旧） +│ └── views/ # 页面视图 +│ ├── KalmanView.vue # 卡尔曼滤波器页面 +│ └── PIDView.vue # PID 控制器页面 +├── package.json +└── vue.config.js # Vue CLI 配置 +``` + +--- + +## 🛠️ 技术栈 + +- **前端框架:** [Vue.js 2](https://v2.vuejs.org/) +- **路由:** [Vue Router](https://router.vuejs.org/) +- **UI 框架:** [Muse UI](https://muse-ui.org) +- **图形渲染:** Canvas API +- **数学库:** [Sylvester](http://sylvester.jcoglan.com/) - 向量和矩阵运算 +- **构建工具:** Vue CLI 3 + +--- + +## 📝 开发计划 (TODO) + +### 🔥 近期计划 + +- [ ] **机械臂运动学** (Robotic Arm Kinematics) + - [ ] 正运动学 (Forward Kinematics) 可视化 + - [ ] 逆运动学 (Inverse Kinematics) 求解演示 + - [ ] 多关节机械臂交互式控制 + - [ ] 工作空间可达性分析 + +- [ ] **路径规划算法** (Path Planning) + - [ ] A* 寻路算法可视化 + - [ ] RRT (Rapidly-exploring Random Tree) + - [ ] 势场法 (Artificial Potential Field) + - [ ] Dijkstra 算法对比 + +### 🎯 中期规划 + +- [ ] **轨迹规划** (Trajectory Planning) + - [ ] 五次多项式轨迹 + - [ ] 梯形速度曲线 + - [ ] S 型加减速曲线 + - [ ] B 样条曲线 + +- [ ] **控制算法进阶** + - [ ] MPC (模型预测控制) + - [ ] LQR (线性二次调节器) + - [ ] 滑模控制 (Sliding Mode Control) + - [ ] 自适应控制 + +- [ ] **传感器融合** + - [ ] 扩展卡尔曼滤波 (EKF) + - [ ] 粒子滤波 (Particle Filter) + - [ ] 互补滤波器 + - [ ] 多传感器数据融合 + +### 🚀 长期愿景 + +- [ ] **具身智能 (Embodied AI)** + - [ ] VLA (Vision-Language-Action) 模型演示 + - [ ] 视觉-语言理解交互 + - [ ] 动作策略可视化 + - [ ] 端到端学习演示 + +- [ ] **强化学习** + - [ ] Q-Learning 可视化 + - [ ] DQN 训练过程 + - [ ] Policy Gradient 演示 + - [ ] 机械臂抓取学习 + +- [ ] **计算机视觉** + - [ ] 目标检测实时演示 + - [ ] 视觉伺服控制 + - [ ] SLAM 可视化 + - [ ] 深度估计 -### Stack +- [ ] **动力学仿真** + - [ ] 刚体动力学 + - [ ] 碰撞检测 + - [ ] 物理引擎集成 + - [ ] 多体系统仿真 -- [Vue.js](https://vuejs.org/) JS framework; -- [MuseUI](https://muse-ui.org) CSS framework; -- [Sylvester](http://sylvester.jcoglan.com/) Vector and matrix math; -- [CanvasRenderingContext2D web API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) to draw the simulation. +### 🎨 功能优化 -### References and papers +- [ ] 添加更多语言支持（英文、日文等） +- [ ] 性能优化和代码分割 +- [ ] 添加算法性能对比模块 +- [ ] 用户自定义参数保存功能 +- [ ] 导出仿真数据和图表 +- [ ] 添加教学视频和文档 +- [ ] 社区贡献算法模块 +--- + +## 🎯 设计理念 + +### 为什么创建这个平台？ + +传统的算法学习往往停留在理论层面，公式和代码让很多人望而却步。这个平台的目标是： + +1. **可视化优先** - 所见即所得，直观理解算法原理 +2. **交互式学习** - 动手调参数，从实践中学习 +3. **通俗易懂** - 用生活化的比喻解释复杂概念 +4. **实用导向** - 展示真实应用场景和案例 + +### 适合谁使用？ + +- 📚 **学生** - 学习控制理论、机器人学、具身智能 +- 👨‍🏫 **教师** - 教学演示和课堂互动 +- 🔬 **研究人员** - 快速验证算法思路 +- 💼 **工程师** - 理解算法原理和调参技巧 +- 🤔 **好奇者** - 对算法和机器人感兴趣的任何人 + +--- + +## 🤝 贡献指南 + +欢迎贡献新的算法演示！ + +1. Fork 本仓库 +2. 创建特性分支 (`git checkout -b feature/NewAlgorithm`) +3. 在 `src/views/` 创建新的算法页面 +4. 在 `src/router/index.js` 添加路由 +5. 提交更改 (`git commit -m 'Add NewAlgorithm demo'`) +6. 推送到分支 (`git push origin feature/NewAlgorithm`) +7. 创建 Pull Request + +### 贡献建议 + +- **代码规范:** 遵循 ESLint 配置 +- **中文优先:** 界面和说明使用中文 +- **详细注释:** 关键算法添加注释 +- **性能考虑:** 确保动画流畅（60 FPS） +- **响应式设计:** 支持移动端访问 + +--- + +## 📄 许可证 + +MIT License - 详见 [LICENSE](LICENSE) 文件 + +--- + +## 🙏 致谢 + +### 原始项目 + +本项目基于 [avivace/kalman](https://github.com/avivace/kalman) 扩展开发 + +- **原作者:** [Antonio Vivace](https://github.com/avivace) +- **贡献者:** [Manuele Rota](https://github.com/dubvulture) + +### 参考资料 + +**卡尔曼滤波器:** - [An introduction to the Kalman Filter](http://www.cs.utexas.edu/~pstone/Courses/393Rfall13/readings/Welch+Bishop-TR-95.pdf) -- [Implementation of Kalman Filter with Python Language](https://arxiv.org/pdf/1204.0375.pdf) -- [Understanding the Basis of the Kalman Filter via a Simple and Intuitive Derivation](https://courses.engr.illinois.edu/ece420/sp2017/UnderstandingKalmanFilter.pdf) -- [Kalman Filter Simulation](https://www.cs.utexas.edu/~teammco/misc/kalman_filter/) -- **Kalman Filtering** - Drew Bagnell -- **Applications of Kalman Filtering in Aerospace 1960 to the Present** - MOHINDER S. GREWAL and ANGUS P. ANDREWS -- **Discriminative Training of Kalman Filters** - Pieter Abbeel, Adam Coates, Michael Montemerlo, Andrew Y. Ng and Sebastian Thrun -- **Relative Study of Measurement Noise Covariance R and Process -Noise Covariance Q of the Kalman Filter in Estimation.** - Yashpal Singh, Rajesh Mehra -- **Stochastic Filtering** - Rui Castro -- Apollo Guidance System software:[Virtual AGC — AGS — LVDC — Gemini](http://www.ibiblio.org/apollo/) - -### Acknowledgements - -[Manuele Rota](https://github.com/dubvulture) for cleaning up some of my trash code and improving the animation logic +- [Understanding the Basis of the Kalman Filter](https://courses.engr.illinois.edu/ece420/sp2017/UnderstandingKalmanFilter.pdf) +- [Implementation of Kalman Filter with Python](https://arxiv.org/pdf/1204.0375.pdf) + +**PID 控制:** +- [PID Controller Tuning: A Short Tutorial](https://www.google.com/search?q=pid+controller+tutorial) +- [Understanding PID Control](https://www.mathworks.com/help/control/getstart/understanding-pid-control.html) + +**具身智能:** +- [RT-1: Robotics Transformer](https://arxiv.org/abs/2212.06817) +- [PaLM-E: An Embodied Multimodal Language Model](https://arxiv.org/abs/2303.03378) +- [OpenVLA: Open-Source Vision-Language-Action Model](https://arxiv.org/abs/2406.09246) + +--- + +## 📮 联系方式 + +- **项目地址:** [https://github.com/q442333521/kalman](https://github.com/q442333521/kalman) +- **在线演示:** [https://www.l2k.tech/](https://www.l2k.tech/) +- **问题反馈:** [GitHub Issues](https://github.com/q442333521/kalman/issues) + +--- + +

+ 让算法学习变得简单有趣 🚀
+ 从卡尔曼滤波到具身智能，一站式学习平台 +

+ +

+ 立即体验 • + 反馈建议 • + 参与贡献 +

From 032ddf3118d06bdca53e5c897f5f4f9770e40965 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 26 Nov 2025 04:29:25 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=89=E4=B8=AA?= =?UTF-8?q?=E6=96=B0=E7=AE=97=E6=B3=95=E6=BC=94=E7=A4=BA=EF=BC=9A=E6=AD=A3?= =?UTF-8?q?=E8=BF=90=E5=8A=A8=E5=AD=A6=E3=80=81A*=E5=AF=BB=E8=B7=AF?= =?UTF-8?q?=E3=80=81=E9=80=86=E8=BF=90=E5=8A=A8=E5=AD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增功能： - 机械臂正运动学 (Forward Kinematics) - 4关节机械臂可视化 - 实时计算末端位置 - 多种预设姿态 - D-H参数法说明 - A*寻路算法 (A-Star Pathfinding) - 交互式网格地图 - 可视化搜索过程 - 多种启发式函数 - 预设迷宫场景 - 逆运动学求解 (Inverse Kinematics) - CCD迭代算法 - 实时目标跟踪 - 可调节关节数量 - 收敛过程可视化 - 更新导航栏，支持5个算法页面 - 所有页面均为中文界面，详细说明 --- src/components/NavBar.vue | 28 +- src/router/index.js | 21 + src/views/AStarView.vue | 688 ++++++++++++++++++++++++++++ src/views/ForwardKinematicsView.vue | 570 +++++++++++++++++++++++ src/views/InverseKinematicsView.vue | 574 +++++++++++++++++++++++ 5 files changed, 1879 insertions(+), 2 deletions(-) create mode 100644 src/views/AStarView.vue create mode 100644 src/views/ForwardKinematicsView.vue create mode 100644 src/views/InverseKinematicsView.vue diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 68d4d44..20cdb11 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -12,15 +12,39 @@ active-class="active" > 📊 - 卡尔曼滤波器 + 卡尔曼滤波 + 🎮 + PID 控制 + + + 🦾 + 正运动学 + + + 🗺️ + A* 寻路 + + 🤖 - PID 控制器 + 逆运动学 diff --git a/src/router/index.js b/src/router/index.js index 8df8308..ef9ebd3 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -2,6 +2,9 @@ import Vue from 'vue' import VueRouter from 'vue-router' import KalmanView from '../views/KalmanView.vue' import PIDView from '../views/PIDView.vue' +import ForwardKinematicsView from '../views/ForwardKinematicsView.vue' +import AStarView from '../views/AStarView.vue' +import InverseKinematicsView from '../views/InverseKinematicsView.vue' Vue.use(VueRouter) @@ -21,6 +24,24 @@ const routes = [ name: 'PID', component: PIDView, meta: { title: 'PID 控制器' } + }, + { + path: '/forward-kinematics', + name: 'ForwardKinematics', + component: ForwardKinematicsView, + meta: { title: '正运动学' } + }, + { + path: '/astar', + name: 'AStar', + component: AStarView, + meta: { title: 'A* 寻路算法' } + }, + { + path: '/inverse-kinematics', + name: 'InverseKinematics', + component: InverseKinematicsView, + meta: { title: '逆运动学' } } ] diff --git a/src/views/AStarView.vue b/src/views/AStarView.vue new file mode 100644 index 0000000..8cc4089 --- /dev/null +++ b/src/views/AStarView.vue @@ -0,0 +1,688 @@ + + + + + diff --git a/src/views/ForwardKinematicsView.vue b/src/views/ForwardKinematicsView.vue new file mode 100644 index 0000000..4dff693 --- /dev/null +++ b/src/views/ForwardKinematicsView.vue @@ -0,0 +1,570 @@ + + + + + diff --git a/src/views/InverseKinematicsView.vue b/src/views/InverseKinematicsView.vue new file mode 100644 index 0000000..35d7ea3 --- /dev/null +++ b/src/views/InverseKinematicsView.vue @@ -0,0 +1,574 @@ + + + + +