beat warmup rotation / twist

src/components/beat-loader.js

@@ -1,8 +1,6 @@
-import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED} from '../constants/beat';
+import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED, BEAT_WARMUP_TIME} from '../constants/beat';
 import utils from '../utils';
 
-const WARMUP_TIME = (BEAT_WARMUP_OFFSET / BEAT_WARMUP_SPEED) * 1000;  // ms.
-
 /**
  * Load beat data (all the beats and such).
  */
@@ -151,7 +149,7 @@ AFRAME.registerComponent('beat-loader', {
         this.songCurrentTime !== this.el.components.song.context.currentTime) {
       this.songCurrentTime = this.el.components.song.context.currentTime;
       this.beatsTime = (this.songCurrentTime + this.data.beatAnticipationTime) * 1000 +
-                       WARMUP_TIME;
+                       BEAT_WARMUP_TIME;
     }
 
     notes = this.beatData._notes;

src/components/beat.js

@@ -1,6 +1,9 @@
-import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED} from '../constants/beat';
+import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED, BEAT_WARMUP_TIME} from '../constants/beat';
 
 const auxObj3D = new THREE.Object3D();
+const BEAT_WARMUP_ROTATION_CHANGE = Math.PI / 5;
+const BEAT_WARMUP_ROTATION_OFFSET = 0.4;
+const BEAT_WARMUP_ROTATION_TIME = 750;
 const SIGN_MATERIAL = {shader: 'flat', color: '#88f'};
 
 /**
@@ -41,6 +44,7 @@ AFRAME.registerComponent('beat', {
     this.backToPool = false;
     this.beams = document.getElementById('beams').components.beams;
     this.beatBoundingBox = new THREE.Box3();
+    this.currentRotationWarmupTime = 0;
     this.cutDirection = new THREE.Vector3();
     this.destroyed = false;
     this.gravityVelocity = 0;
@@ -98,27 +102,38 @@ AFRAME.registerComponent('beat', {
   },
 
   tock: function (time, timeDelta) {
+    const el = this.el;
+    const position = el.object3D.position;
+
     if (this.destroyed) {
       this.tockDestroyed(timeDelta);
     } else {
       // Only check collisions when close.
       const collisionZThreshold = -4;
-      if (this.el.object3D.position.z > collisionZThreshold) { this.checkCollisions(); }
+      if (position.z > collisionZThreshold) { this.checkCollisions(); }
 
       // Move.
-      if (this.el.object3D.position.z < this.startPositionZ) {
+      if (position.z < this.startPositionZ) {
         // Warm up / warp in.
-        this.el.object3D.position.z += BEAT_WARMUP_SPEED * (timeDelta / 1000);
-        if (this.el.object3D.position.z >= this.startPositionZ) {
-          this.beams.newBeam(this.data.color, this.el.object3D.position);
+        position.z += BEAT_WARMUP_SPEED * (timeDelta / 1000);
+        if (position.z >= this.startPositionZ) {
+          this.beams.newBeam(this.data.color, position);
         }
       } else {
         // Standard moving.
-        this.el.object3D.position.z += this.data.speed * (timeDelta / 1000);
+        position.z += this.data.speed * (timeDelta / 1000);
+      }
+
+      if (position.z > (this.startPositionZ - BEAT_WARMUP_ROTATION_OFFSET) &&
+          this.currentRotationWarmupTime < BEAT_WARMUP_ROTATION_TIME) {
+        const progress = AFRAME.ANIME.easings.easeOutBack(
+          this.currentRotationWarmupTime / BEAT_WARMUP_ROTATION_TIME);
+        el.object3D.rotation.z = this.rotationZStart + (progress * this.rotationZChange);
+        this.currentRotationWarmupTime += timeDelta;
       }
 
       // Check.
-      this.backToPool = this.el.object3D.position.z >= 2;
+      this.backToPool = position.z >= 2;
       if (this.backToPool) { this.missHit(); }
     }
     this.returnToPool();
@@ -130,6 +145,13 @@ AFRAME.registerComponent('beat', {
   onGenerate: function () {
     this.startPositionZ = this.el.object3D.position.z;
     this.el.object3D.position.z -= BEAT_WARMUP_OFFSET;
+
+    // Set up rotation warmup.
+    this.currentRotationWarmupTime = 0;
+    this.rotationZChange = BEAT_WARMUP_ROTATION_CHANGE;
+    if (Math.random > 0.5) { this.rotationZChange *= -1; }
+    this.el.object3D.rotation.z -= this.rotationZChange;
+    this.rotationZStart = this.el.object3D.rotation.z;
   },
 
   initBlock: function () {

src/constants/beat.js

@@ -1,2 +1,3 @@
 export const BEAT_WARMUP_OFFSET = 25;
 export const BEAT_WARMUP_SPEED = 155;
+export const BEAT_WARMUP_TIME = (BEAT_WARMUP_OFFSET / BEAT_WARMUP_SPEED) * 1000;