MystifyJS用JavaScript模拟经典Win95屏幕保护程序

Mystify屏幕保护程序仿真！这只是一个快速的圣诞节项目，用来娱乐自己。一段时间以来，我一直想尝试使用Canvas和动画来做些有趣的事情，最终决定用JS重现经典的Win95 Mystify 屏幕保护程序。没想到，在编写了基础代码之后，我花了几个小时调整和优化参数，只为了看屏幕上展示的效果。

基础知识

这个小项目并不需要太多的依赖，只需要RequireJS来保持代码简洁。屏幕保护程序是由一个Shape和一个节点列表组成，每个节点有一个起始颜色。每个动画帧上，形状的周长会被绘制（即每个节点之间的一条简单的线）。每个node都有一个初始位置，并且包含一个运动轨迹（包括速度和角度）。每个动画帧时，节点位置会随着轨迹不断更新。如果节点触及到边界，它会随机化，以保持画面的有趣性。同时，形状的整体颜色会随着时间的推移逐渐变化。

有趣的参数

最初的Win95 Mystify 使用了两个具有四个节点的形状。我个人认为在JS中重现它非常有趣，但在调整过程中，发现参数的细微变化能够带来意想不到的视觉效果。