bass

by pkin159

HTML

<div>
    <button id='play' class='buttonclass'>Play</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://pkin159.github.io/project/drumsetting.js"></script>
<script src='https://jyunming-chen.github.io/WebAudio/js/shared.js'></script>
<script src="https://pkin159.github.io/project/js/dat.gui.min.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var frameStart, frameEnd;


var BassStep = function () {
  // properties
  this.T = 4; // in seconds
  this.stepkeys = [{ /////////will be change
    timeS: 0,
    value: -0.52
  }, {
    timeS: 0.25,
    value: 0 //3.14 / 4
  }, {
    timeS: 0.5,
    value: -0.52
  }, {
    timeS: 1,
    value: -0.52
  }];
  this.headkeys = [{ /////////will be change
    timeS: 0,
    value: -0.52
  }, {
    timeS: 0.25,
    value: 0.5 //3.14 / 4
  }, {
    timeS: 0.5,
    value: -0.52
  }, {
    timeS: 1,
    value: -0.52
  }];
  this.startTime = 0;
  this.angleS = 0;
  this.angleH = 0; // for 'text-based' rendering
  this.soundintensity = 1;
  this.group = newMesh();
  loadSounds(this, {
    kick: 'https://jennyhyc.github.io/project/sounds/drum/bass.mp3'
  });
  console.log('loadSounds');
  // methods
  this.setT = function (period) {
    this.T = period;
  }
  this.setSoundIntensity = function (intensity) {
    this.soundintensity = intensity;
  }
  this.interpolate = function (s, keys) { // normalized time
    var tempkeys = keys;
    if (s > 1) // end of cycle
      return tempkeys[tempkeys.length - 1].value;

    for (var i = 1; i < tempkeys.length; i++) {
      if (s < tempkeys[i].timeS) break;
    }

    var vv = tempkeys[i - 1].value + (s - tempkeys[i - 1].timeS) / (tempkeys[i].timeS - tempkeys[i - 1].timeS) * (tempkeys[i].value - tempkeys[i - 1].value);
    return vv;
  };

  this.update = function (time) { // time: elapsedTime
    var s = (time - this.startTime) / this.T;

    this.angleS = this.interpolate(s, this.stepkeys);
    this.angleH = this.interpolate(s, this.headkeys);
    this.group[1].rotation.x = this.angleS;
    this.group[2].rotation.x = this.angleH;

    if (this.angleH < (.5 - 0.5 - (60 / this.T) / 1000)) {
      if (!this.soundAlready()) {
        this.soundAlready(1);
        //console.log('sound of kick', this.kick);
        // this.playSound(this.kick, 0, this.soundintensity);

      }

    }
  }

  this.startOneCycle = function () {
   ...