Who Visualized the Bomp Pt 5.

index.html

  <div id="room">
    <div id="decor">
      <div id="front-wall" class="wall"> </div>
      <div id="back-wall" class="wall"> 
        <div id="knob"> </div>
        <div id="screen"> 
          <div id="ladder"> 
            <div class="rail left"> </div>
            <div class="rail right"> </div>
            <div class="rung one"> </div>
            <div class="rung two"> </div>
            <div class="rung three"> </div>
            <div class="rung four"> </div>
            <div class="rung five"> </div>
            <div class="rung six"> </div>
            <div class="rung seven"> </div>
          </div>
        </div>
      </div>
      <div id="floor"> </div>
    </div>
    
    <div id="dancers">
      <div class="dancer left"> 
        <div class="head">
          <div class="hat"> </div>
          <div class="face"> 
            <div class="glasses"> </div>
          </div>
        </div>
        
        <div class="torso"> </div>
        
        <div class="arm left">
          <div class="bicep"> </div>
          <div class="forearm"> 
            <div class="hand"> </div>
          </div>
        </div>
        
        <div class="arm right">
          <div class="bicep"> </div>
          <div class="forearm"> 
            <div class="hand"> </div>
          </div>
       </div>
        
        <div class="leg left">
          <div class="thigh"> </div>
          <div class="calf"> 
            <div class="foot"> </div> 
          </div>
        </div>
        
        <div class="leg right">
          <div class="thigh"> </div>
          <div class="calf"> 
            <div class="foot"> </div> 
          </div>
        </div>
      </div>
      <div class="dancer right"> 
        <div class="head">
          <div class="hat"> </div>
          <div class="face"> 
            <div class="glasses"> </div>
          </div>
        </div>
        
        <div class="torso"> </div>
        
        <div class="arm left">
          <div class="bicep"> </div>
          <div class="forearm"> 
            <div class="hand"> </div>
          </div>
        </div>
        
        <div class="arm right">
          <div class="bicep"> </div>
          <div class="forearm"> 
            <div class="hand"> </div>
          </div>
       </div>
        
        <div class="leg left">
          <div class="thigh"> </div>
          <div class="calf"> 
            <div class="foot"> </div> 
          </div>
        </div>
        
        <div class="leg right">
          <div class="thigh"> </div>
          <div class="calf"> 
            <div class="foot"> </div> 
          </div>
        </div>
      </div>
    </div>
  </div>

script.js

$(function(){
  
  var DOM = {
    dancers: $('#dancers'),
    dancerLeft: $('.dancer.left'),
    dancerRight: $('.dancer.right'),
  };
  
  var classes = {
    marquee: 'marquee',
    bendArms: 'bend-arms',
    bendLegs: 'bend-legs',
    sideKick: 'side-kick',
    bopHead: 'bop-head'
  }
  
  var playSound, dataArray, bufferLength, count;
  var midiBuffer = null;
  var audioURL = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1260/aha-lofi.mp3';
  var audioTime = 0;
  var audioOffset = 0;
  var audioPlaying = false;
  var currentMoves = '';
  
  /* hot dance moves */
  
  var marquee = function(){
    DOM.dancers.toggleClass(classes.marquee);
  };
  
  var bopHead = function(){
    DOM.dancers.toggleClass(classes.bopHead);
  }
    
  var bendArms = function(){
    DOM.dancers.toggleClass(classes.bendArms);
  };
  
  var bendLegs = function(){
    // make sure legs are stationary first
    DOM.dancers.removeClass(classes.sideKick).toggleClass(classes.bendLegs);
  };
  
  var stopDancing = function(){
    // remove all classes
    DOM.dancers.attr('class', null);
  };
  
  
  
  /* web audio fun */
  
  var loadAudio = function(url) {
    var request = new XMLHttpRequest();
    request.open('GET', audioURL, true);
    request.responseType = 'arraybuffer';
  
    request.onload = function() {
      audioCtx.decodeAudioData(request.response, function(buffer) {
        midiBuffer = buffer;
      });
      
      // debug - load audio
      console.log('audio loaded');
    }
    request.send();
  };

  
  var playSong = function(){
    audioTime = audioCtx.currentTime;
    playSound = audioCtx.createBufferSource();
    playSound.buffer = midiBuffer;
    playSound.connect(audioCtx.destination);
    playSound.start(0, audioOffset);
    
    playSound.connect(analyser);
    
    DOM.dancers.attr('class', currentMoves);
  };
  
  var pauseSong = function(){
    playSound.stop();
    audioOffset += audioCtx.currentTime - audioTime;
    currentMoves = DOM.dancers.attr('class');
  };
  
  // web audio api turn upppp
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  var audioCtx = new AudioContext();
  var analyser = audioCtx.createAnalyser();
  
  loadAudio(audioURL);
  
  
  
  /* key events */
  
  $('body').keypress(function(e){
    
    // debug - print key code
    // console.log(e.which);
    
    // choose action depending on key code
    switch ( e.which ) {
      
      case 0:
        // arrow 
        marquee();
        break;
        
      case 106:
        // j
        bopHead();
        break;
        
      case 101:
        // e
        bendArms();
        break;
        
      case 110:
        // n
        bendLegs();
        break;
      
      case 32:
        // space 
        stopDancing();
        break;
        
      case 102:
        // f
        if (!audioPlaying) { 
          audioPlaying = true;
          playSong();
        }
        break;
        
      case 114:
        // r
        if (audioPlaying) {
          audioPlaying = false;
          pauseSong();
          stopDancing();
        }
        break;
    }
    
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

* { margin: 0; padding: 0; position: relative; }

#room {
  width: 800px;
  height: 400px; 
  border-bottom: 10px solid #999;
  background-color: #000;
  #decor {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    .wall {
      float: left;
      background-color: #97A4A9;
      box-shadow: inset 0 5px 20px #000;
      &#back-wall {
        width: 85%;
        height: 75%;
      }
      &#front-wall {
        width: 15%;
        height: 100%;
        background-color: #DFE6DF;
        box-shadow: none;
        float: right;
      }
    }
    
    #knob {
      background-color: #343233;
      width: 10px;
      height: 5px;
      border-radius: 0px 3px 3px 0px;
      box-shadow: 2px 2px 5px #333;
      position: absolute;
      left: 0px;
      top: 200px;
    }
    
    #screen {
      background-color: #A2242A;
      width: 60%;
      height: 100%;
      margin: 0 auto;
      border-bottom: 5px solid #fff;
      z-index: 1;
    }
    
    #ladder {
      width: 20%;
      height: 100%;
      left: 5px;      
      
      .rail,
      .rung {
        background-color: #65362D;
        position: absolute;
        left: 0;
        bottom: -5px;
      }
      
      .rail {
        width: 5px;
        height: 105%;
        
        &.right {
          left: 100%;
          right: 0;
        }
      }
      
      .rung {
        width: 100%;
        height: 4px;
        
        &.one {
          top: 20px;
        }        
        &.two {
          top: 60px;
        }        
        &.three {
          top: 105px;
        }        
        &.four {
          top: 150px;
        }       
        &.five {
          top: 200px;
        }        
        &.six {
          top: 250px;
        }        
        &.seven {
          top: 300px;
        }
      }

    }
    
    #floor {
      float: left;
      width: 85%;
      height: 25%;
      background-color: #967D31;
    }
  }
  
  #dancers {
    position: absolute;
    top: 45px;
    .dancer {
      position: absolute;
      left: 275px;
      z-index: 2;
      &.right {
        left: 425px;
      }
      
      .head {
        left: 22px;
        top: 3px;
        z-index: 3;
        .hat {
          background-color: #FDF16B;
          width: 30px;
          height: 25px;
          border-radius: 10px 10px 0 0;
        }
        .face {
          background-color: #E27F68;
          width: 30px;
          height: 28px;
          border-radius: 0 0 50px 50px;
          .glasses {
            background-color: black;
            width: 28px;
            height: 12px;
            border-radius: 2px 2px 10px 10px;
            left: 1px;
          }
        }
      }
      .torso {
        background-color: #9C5B3D;
        width: 70px;
        height: 150px;
        top: -3px;
      }
      .arm {
        position: absolute;
        top: 50px;
        .bicep {
          background-color: #9C5B3D;
          width: 23px;
          height: 55px;
          border-radius: 50px 0 0 0;
        }
        .forearm {
          background-color: #9C5B3D;
          width: 20px;
          height: 50px;
        }
        .hand {
          background-color: #999;
          width: 15px;
          height: 25px;
          left: 3px;
          bottom: -50px;
        }
        
        &.left {
          left: -23px;
        }
        
        &.right {
          right: -23px;
          .bicep {
            border-radius: 0 50px 0 0;
          }
          .forearm {
            left: 3px;
          }
          .hand {
            background-color: #E27F68;
            left: 5px;
          }
        }      
      }
      .leg {
        position: absolute;
        top: 200px;
        .thigh {
          background-color: #9C5B3D;
          width: 30px;
          height: 35px;
        }
        .calf {
          background-color: #9C5B3D;
          width: 30px;
          height: 65px;
        }
        .foot {
          background-color: #D62418;
          width: 19px;
          height: 20px;
          left: 6px;
          top: 65px;
          border-top: 4px solid #fff;
        }
        
        &.left {
          left: 0;
        }
        
        &.right {
          right: 0; 
        }
      }
    }
  }
}

/* dance moves */
.marquee {
  -moz-animation: marquee 4s infinite linear;
}

.bop-head {
  .head {
    -moz-animation: headbop 600ms infinite linear;
  }
}

.bend-arms {
  .forearm {
    top: -25px;
  }
  .left > .forearm {
    -moz-animation: armbend-left 600ms infinite linear;
  }
  .right > .forearm {
    transform: rotateX(180deg);
    -moz-animation: armbend-right 600ms infinite linear;
  }
}

.bend-legs {
  .dancer {
    -moz-animation: body-rock 600ms infinite linear;
  }
  .thigh {
    height: 60px!important;
  }
  .calf {
    top: -30px;
  }
  .left > .calf {
    -moz-animation: legbend-left 600ms infinite linear;
  }
  .right > .calf {
    transform: rotateX(-90deg);
    -moz-animation: legbend-right 600ms infinite linear;
  }
}


@-moz-keyframes marquee {
  0% { left: 0;}
  25% { left: 130px; }
  50% { left: 0; }
  75% { left: -130px; }
  100% { left: 0; }
}

@-moz-keyframes headbop {
  25% { transform-origin: 0 50%; transform: rotate(-10deg); }
  50% { transform: rotate(0deg); }
  75% { transform-origin: 50% 0; transform: rotate(10deg); }
}

@-moz-keyframes armbend-left {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(180deg); }
}

@-moz-keyframes armbend-right {
  0% { transform: rotateX(180deg); }
  50% { transform: rotateX(0deg); }
}

@-moz-keyframes body-rock {
  25% { transform-origin: 0 50%; transform: rotate(1deg); }
  50% { transform: rotate(0deg); }
  75% { transform-origin: 50% 0; transform: rotate(-1deg); }
}

@-moz-keyframes legbend-left {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(-90deg); }
}

@-moz-keyframes legbend-right {
  0% { transform: rotateX(-90deg); }
  50% { transform: rotateX(0deg); }
}

who-visualized-the-bomp-pt-5.markdown

Who Visualized the Bomp Pt 5.

Incorporate the web audio api to have a song and be able to start and pause it. When paused, the dancers stop. When starting again, the dance moves happen again.

A Pen by Jenn on CodePen.

License.