关于本站的logo和侧栏动画

本站的logo是侧栏动画的某一帧。简洁地讲，侧栏动画是一个\(\mathbb{R}^4\)空间中随机旋转的正五面体在平面上的投影。

投影

四维坐标中的两维会直接映射成画布上点的xy坐标。另外两维对应的反正切映射成点的色相，模长映射成点的亮度，在视觉上也在某种程度上表现为深度。

随机旋转

旋转是通过对顶点坐标乘上一个单位正交矩阵实现的，这一矩阵略微偏离单位矩阵以保证动画连续。这一矩阵的生成包括如下步骤：

• 生成6个绝对值远小于1的随机数，填入矩阵的上三角
• 将矩阵补成反对称矩阵
• 对于对角线上的每一个元素，填入\(\sqrt{1-同行另外三个元素的平方和}\)
• 到这一步，可以验证该矩阵乘上自身的转置只偏离单位矩阵一个二阶小量，已经初步完成了生成随机旋转矩阵的目标
• 对矩阵施密特正交化。鉴于矩阵的生成方式，任意两行之间的乘积不会很大，因此正交化之后矩阵仍只是矩阵略微偏离单位矩阵
• 生成完毕

正五面体的初始化

可以在正四面体的基础上，计算正五面体各个点的坐标。假设只有新引入的第五个点有第四位的非零坐标，设为\(w\)，且第五个点没有前三维坐标。这样依据正五面体顶点两两之间距离相等就可以获得一个二次方程，可以解出\(w\)。如果有必要，还可以对最终的解进行正交化。

其余技术细节

点的四维坐标会被存入sessionStorage中用于下次读取，以保证动画相对连续

点会按照其深度排序，深的点先渲染，以保证覆盖关系正确

这样操作可能会使旋转高度偏离对称性，包括超球对称以及6个旋转方向之间的交换对称，不大漂亮，笔者尝试过复杂的参数独立化尝试，但是没有想到简洁的解决方法。

关于为什么有6个独立的旋转方向：对于四维刚体，以5个点的不退化刚体为例（其他的可以用数学归纳法）：5个点有5*4=20个独立坐标，两两之间距离固定有5*4/2=10个约束方程，中心位置固定有4个约束方程，剩余20-10-4=6个独立旋转自由度

随机数的生成为了保证速度相对较为连续，采用了simplex噪声生成，当然也可以用其他方法代替。

不足之处

有时在大版动画中，物体遮挡和线的边缘处理会变得有些突兀。所幸在小版动画中问题不大