Split spaceship hull and exhaust, add exhaust animation, sync star rotation with spacecip tilt

poll.coffee

@@ -15,24 +15,20 @@ rand = (lbnd, ubnd) -> Math.round((Math.random() * (ubnd - lbnd)) + lbnd)
 
 # -- create stars in background --
 
-star_tails = for _ in [1..numstars]
-    size = rand min_star_size, max_star_size
-    red_green = rand 180, 255
-    x = rand 0, 100
-    y = rand 0, 100
-    star = document.createElement 'div'
-    star.style.right = x + '%'
-    star.style.top = y + '%'
-    document.getElementById('stars').appendChild star
-
-    tail = document.createElement 'div'
-    tail.style.backgroundColor = "rgb(#{red_green}, #{red_green}, 255)"
-    tail.style.borderRadius = size / 2 + 'px'
-    tail.style.width = size + 'px'
-    tail.style.height = size + 'px'
-    star.appendChild tail
-
-    tail
+stars = for _ in [1..numstars]
+  x = rand 0, 100
+  y = rand 0, 100
+  size = rand min_star_size, max_star_size
+  red = green = rand 180, 255
+  star = document.createElement 'div'
+  star.style.right = x + '%'
+  star.style.top = y + '%'
+  star.style.width = size + 'px'
+  star.style.height = size + 'px'
+  star.style.borderRadius = size / 2 + 'px'
+  star.style.backgroundColor = "rgb(#{red}, #{green}, 255)"
+  document.getElementById('stars').appendChild star
+  star
 
 # -- state transitions --
 #
@@ -40,11 +36,11 @@ star_tails = for _ in [1..numstars]
 
 spaceship = document.getElementById 'spaceship'
 
-star_heights = (tail.style.height for tail in star_tails)
+star_heights = (star.style.height for star in stars)
 
 warp = ->
   # first stretch stars to create accelerating feel
-  Velocity star_tails,
+  Velocity stars,
     {width: '500px'},
     {
       duration: 1000, easing: 'ease-in',
@@ -52,21 +48,21 @@ warp = ->
     }
 
   # then shift
-  for tail in star_tails
+  for star in stars
     amt = rand 0, 20
-    Velocity tail, {right: "+=#{amt}%"}, {duration: 400}
-    Velocity tail, 'reverse', {duration: 1000}
+    Velocity star, {right: "+=#{amt}%"}, {duration: 400}
+    Velocity star, 'reverse', {duration: 1000}
 
   # while stars shift, the spaceship goes back a little bit, then launches
   # speedily to the right and gradually moves back to the center
-  Velocity spaceship, {left: '-=20%', top: '+=20%', }, {duration: 1000}
-  Velocity spaceship, {left: '+=45%', top: '-=45%', }, {duration: 400}
-  Velocity spaceship, {left: '-=25%', top: '+=25%', }, {duration: 1300}
+  Velocity spaceship, {left: '-=20%'}, {duration: 1000}
+  Velocity spaceship, {left: '+=45%'}, {duration: 400}
+  Velocity spaceship, {left: '-=25%'}, {duration: 1300}
 
 unwarp = ->
   # unstretch stars
-  for tail, i in star_tails
-    Velocity tail,
+  for star, i in stars
+    Velocity star,
       {width: star_heights[i]},
       {
         duration: 1000, easing: 'ease-in',

style.less

 /* config */
 
-@spaceship-width: 400px;
-@spaceship-height: @spaceship-width * 1447 / 2454;
+@hull-width: 350px;
 
 @cruising-move-radius: 5px;
 @cruising-nose-tilt: 6deg;
 @cruising-move-duration: 1.5s;
 @cruising-tilt-duration: 1s;
+@cruising-exhaust-duration: 500ms;
+@cruising-exhaust-scalediff: 0.05;
 
 @excited-move-radius: 10px;
 @excited-nose-tilt: 16deg;
 @excited-move-duration: 500ms;
 @excited-tilt-duration: 100ms;
+@excited-exhaust-duration: 150ms;
+@excited-exhaust-scalediff: 0.5;
+@excited-exhaust-scalebase: 1.2;
+
+@hull-w: 1760;
+@hull-h: 1240;
+@exhaust-w: 1020;
+@exhaust-h: 530;
+
+@hull-height: @hull-width * @hull-h / @hull-w;
+@exhaust-width: @exhaust-w / @hull-w * @hull-width;
+@exhaust-height: @exhaust-width * @exhaust-h / @exhaust-w;
 
 /* general */
 
@@ -23,27 +36,41 @@ img, div {
   position: absolute;
 }
 
-.bg {
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
+.camera {
+  @camera-extend: 20%;
+  left: -@camera-extend;
+  top: -@camera-extend;
+  width: 100 + 2 * @camera-extend;
+  height: 100 + 2 * @camera-extend;
+  transform: rotateZ(-25deg);
 }
 
 .spaceship {
   left: 50%;
   top: 50%;
-  width: @spaceship-width;
-  height: @spaceship-height;
-  margin-left: -@spaceship-width / 2;
-  margin-top: -@spaceship-height / 2;
+  width: @hull-width + @exhaust-width;
+  height: @hull-height;
+  margin-left: -(@hull-width + @exhaust-width) / 2;
+  margin-top: -@hull-height / 2;
   z-index: 10;
 
-  img {
-    position: static;
+  .rotate-box {
+    position: relative;
     width: 100%;
     height: 100%;
   }
+  .exhaust {
+    top: 50%;
+    right: @hull-width * 0.815;
+    width: @exhaust-width;
+    height: @exhaust-height;
+    margin-top: -@exhaust-height / 2;
+  }
+  .hull {
+    right: 0;
+    width: @hull-width;
+    height: @hull-height;
+  }
 }
 
 .stars {
@@ -53,9 +80,6 @@ img, div {
   height: 100%;
 
   & > div {
-    // FIXME: this should depend on the market and the client width/height
-    transform: rotateZ(-25deg);
-
     div {
       right: 0;
       background-color: white;
@@ -86,11 +110,17 @@ img, div {
 
 /* Cruising state */
 
-.cruising .spaceship {
-  animation: cruising-movement @cruising-move-duration linear 0s infinite;
+.cruising {
+  .spaceship {
+    animation: cruising-movement @cruising-move-duration linear 0s infinite;
 
-  img {
-    animation: cruising-rotation @cruising-tilt-duration linear 0s infinite alternate;
+    .rotate-box {
+      animation: cruising-rotation @cruising-tilt-duration linear 0s infinite alternate;
+    }
+  }
+
+  .exhaust {
+    animation: cruising-exhaust @cruising-exhaust-duration linear 0s infinite alternate;
   }
 }
 
@@ -104,14 +134,23 @@ img, div {
   to   { transform: rotateZ(@cruising-nose-tilt / 2) }
 }
 
+@keyframes cruising-exhaust {
+  from { width: @exhaust-width }
+  to   { width: (1 + @cruising-exhaust-scalediff) * @exhaust-width }
+}
+
 /* Excited state */
 
 .excited .spaceship {
   animation: excited-movement @excited-move-duration linear 0s infinite;
 
-  img {
+  .rotate-box {
     animation: excited-rotation @excited-tilt-duration linear 0s infinite alternate;
   }
+
+  .exhaust {
+    animation: excited-exhaust @excited-exhaust-duration linear 0s infinite alternate;
+  }
 }
 
 @keyframes excited-movement {
@@ -123,3 +162,9 @@ img, div {
   from { transform: rotateZ(-@excited-nose-tilt / 2) }
   to   { transform: rotateZ(@excited-nose-tilt / 2) }
 }
+
+@keyframes excited-exhaust {
+  @w: @excited-exhaust-scalebase * @exhaust-width;
+  from { width: @w }
+  to   { width: (1 + @excited-exhaust-scalediff) * @w }
+}

www/index.html

@@ -5,10 +5,13 @@
     <link rel="stylesheet" href="style.css"></link>
   </head>
   <body class="cruising">
-    <div id="stars" class="stars"></div>
-    <div id="bg" class="bg">
+    <div id="camera" class="camera">
+      <div id="stars" class="stars"></div>
       <div id="spaceship" class="spaceship">
-        <img src="spaiceship.png">
+        <div class="rotate-box">
+          <img class="exhaust" src="spaiceship-exhaust.png">
+          <img class="hull" src="spaiceship-hull.png">
+        </div>
       </div>
     </div>
     <img class="moon" src="moooon.png" width="100">