輪鼓

by pkin159

HTML

<div>
    <button id='play' class='buttonclass'>Play</button>
    <button id='stop' class='buttonclass'>Stop</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 intensity = 0.5;
var instrument = "s";

var sounds;

var gcontrols = {
  		intensity: 0,
  		bpm: 120.,
  		LR: true
  	};

	var gui = new dat.GUI();
  	gui.domElement.id = 'gui';
  	gui.add(gcontrols, 'intensity',0, 1);
  	gui.add(gcontrols, 'bpm', 60, 500);
  	gui.add(gcontrols, 'LR');


var Stick = function () {
    // properties
    this.T = 4; // in seconds
    this.keys = [{   /////////will be change
        timeS: 0,
        value: 0
    }, {
        timeS: 0.25,
        value: 0.2//3.14 / 4
    }, {
        timeS: 0.3,
        value: -.2
    },
       {
        timeS: 0.5,
        value: 0
    },{
        timeS: 1,
        value: 0
    }
                ];

    this.frame1 = new THREE.Object3D();  // starting & ending frames
    this.frame2 = new THREE.Object3D();  // of startOneCycle
                                         // default frame1 = frame2 = frameChair.clone();
    
    this.startTime = 0;
    this.angle = 0; // for 'text-based' rendering
    this.instrument = 's';
    this.color = new THREE.Color(1,0,0);
    this.group = newMesh(this.color);
    this.object = new THREE.Object3D();
    this.object.add(this.group);
    loadSounds(this, {
        kick: 'https://jyunming-chen.github.io/WebAudio/kick.wav',
        snare: 'https://jyunming-chen.github.io/WebAudio/snare.wav',
        hihat: 'https://jyunming-chen.github.io/WebAudio/hihat.wav'
    });
    // methods
    this.setT = function (period) {
        this.T = period;
    }
    this.setMaxKeysValue = function (intensity){
        this.keys[1].value = intensity;
    }

    this.interpolate = function (s) { // normalized time
        if (s > 1) // end of cycle
        return this.keys[this.keys.length - 1].value;

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

        var vv = this.keys[i - 1].value + (s - this.keys[i - 1].timeS) / (this.keys[i].timeS - this.keys[i - 1].timeS) * (this.keys[i].value -...