这个网站的建立是因为我厌倦了使用模板并想要一个 一种方法来制作我需要的东西，而不需要所有额外的绒毛和缺乏 让它按照我想要的方式运行的真正方法。

它完全是用 HTML、CSS 和 Javascript 从头开始编写的。 没有图书馆或 在lottie之外的网站设计、布局或功能中使用的框架 自定义动画分散在整个页面中。 继续发展部分 将会使用图书馆，我将利用这个机会制作互动的东西 在学习新的库或框架时。 这个网站永远是一个正在进行的工作，所以随着我的调整，事情会发生变化 新工作、新工具和新知识。 我的目标是让它尽可能高效和快速 尽可能加载，我希望它对您来说是快速且响应迅速的。
旋转木马上有一些初始草图和想法的屏幕截图。 大多数最初的想法没有被采纳，但它们可能会在未来出现。
这个网站总共花了两个月的时间来设计、建立和上线，包括制作新的 本文介绍的许多项目的渲染图。 对于那些感兴趣的人来说，该网站的本次迭代的代码并未被缩小，并且 虽然理论上我可以将其发布到 github，但如果没有 我实际上无法在那里发布图像和视频，所以请随意查看 在浏览器的开发模式下。 接下来要做的事情是进行大规模重构，以清理不需要的 CSS 并收紧 javascript 因此它更加灵活。

这个项目的宗旨是，尝试使用普通 JavaScript 来取代 p5js 和processing 等代码文件，看看是否能做出相同的艺术效果。 经过这次测试，我认为它可以很好地胜任这个角色。 它实际上并没有变得更复杂，而且在某些方面它实际上更容易理解，特别是如果您想通过代码文件添加功能的话。 性能也更好。该演示仅使用 HTML canvas 的 2D 模型，并且能够以合理的帧速率运行 10-15,000 个粒子； 如果没有大量额外的工作，p5js 就无法做到这一点。 我确信将其转移到 webGL 或 webGPU 环境中可以使性能提高 10 倍，这也是我未来项目的目标。

在此演示中，我使用 Google MediaPipe 来利用其基于 ML/AI 的姿势检测，让粒子系统跟踪到 用户的脸和手。 这不是一个完美的解决方案，在我的测试中，它的启动速度非常慢，并且从中获取的数据非常嘈杂。 但这个演示表明，可以在浏览器中以良好的帧速率使用相当数量的粒子进行跟踪。