Implement a more chaotic yet pleasing spin.

src/open.js

@@ -5,8 +5,22 @@ const STAR_POINTS = 5;
 let scene, camera, renderer;
 let coreStarGroup;
 let lights = {};
+let animation = {
+    steps: 0,
+    x: new Float32Array(4),
+    y: new Float32Array(4),
+    z: new Float32Array(4),
+};
+
+function interpolate(range, factor) {
+    for (let i = 1; i < range.length; ++i) {
+        range[i] += (range[i - 1] - range[i]) * factor;
+    }
+}
+
 
 /**
+ * Create a BufferGeometry from vertices and faces.
  *
  * @param {Float32Array} vertices
  * @param {number[]} faces
@@ -23,6 +37,10 @@ THREE.BufferGeometry.fromVertices = function (vertices, faces) {
     return geometry;
 };
 
+Float32Array.prototype.last = function () {
+    return this[this.length - 1];
+};
+
 function addStar() {
     let frontGeometry = THREE.BufferGeometry.fromVertices(starCoordinates(2, 3, -0.1), filledStarIndices());
     let backGeometry = THREE.BufferGeometry.fromVertices(starCoordinates(2, 3, 0.1), filledStarIndices());
@@ -222,8 +240,21 @@ function starCoordinates(innerRadius, outerRadius, z) {
 function animate() {
     requestAnimationFrame(animate);
 
-    coreStarGroup.rotation.z += 0.01;
+    if (animation.steps === 0) {
-    coreStarGroup.rotation.y += 0.01;
+        animation.steps = Math.floor(Math.random() * 60) + 30;
+        animation.x[0] = 4 * Math.random() * Math.PI;
+        animation.y[0] = 4 * Math.random() * Math.PI;
+        animation.z[0] = 4 * Math.random() * Math.PI;
+    }
+
+    animation.steps--;
+    interpolate(animation.x, 0.05);
+    interpolate(animation.y, 0.05);
+    interpolate(animation.z, 0.05);
+
+    coreStarGroup.rotation.x = animation.x.last();
+    coreStarGroup.rotation.y = animation.y.last();
+    coreStarGroup.rotation.z = animation.z.last();
 
     renderer.render(scene, camera);
 }