parallaxis/voices/js/greensock-v12-js/examples/beatbox.html

282 lines
8.0 KiB
HTML
Executable File

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>TweenLite.js Beatbox Demo</title>
<script src='../src/uncompressed/TweenMax.js'></script>
<script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
/**
* author: Ian Lollar, ian.lollar@gmail.com
**/
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.BeatBar = (function() {
function BeatBar(id) {
this.id = id;
this.height = 150;
}
BeatBar.prototype.getHeight = function() {
return this.height;
};
BeatBar.prototype.setHeight = function(height) {
return this.height = height;
};
return BeatBar;
})();
this.Application = (function() {
function Application() {
this.setBeat = __bind(this.setBeat, this);
this.bump = __bind(this.bump, this);
this.colorize = __bind(this.colorize, this);
var bar,
_this = this;
this.bars = (function() {
var _i, _len, _ref, _results;
_ref = $(".bar");
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
bar = _ref[_i];
_results.push(new BeatBar(bar.id));
}
return _results;
})();
this.colorPercentage = .5;
setInterval(this.colorize, 1000);
TweenLite.to($(".bar"), 1, {
css: {
height: "150px",
top: "-150px"
},
delay: .5
});
$("#button").click(function(e) {
return _this.trigger();
});
$("#button").mousedown(function(e) {
return $("#button").css("background-image", "url(img/tap_button_down.png)");
});
$("#button").mouseup(function(e) {
return $("#button").css("background-image", "url(img/tap_button.png)");
});
$("#hit").mousemove(function(e) {
return _this.setBeatBars(e.pageX / $(window).width());
});
}
Application.prototype.setBeatBars = function(percentage) {
var bar, beatBar, target, target1, target2, target3, target4, target5, targetBar, targets, _i, _j, _k, _len, _len2, _len3, _ref, _ref2, _results;
_ref = this.bars;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
beatBar = _ref[_i];
beatBar.setHeight(150);
}
target = Math.floor(this.bars.length * percentage);
targets = [
target1 = {
id: target - 2,
height: 170
}, target2 = {
id: target - 1,
height: 220
}, target3 = {
id: target,
height: 350
}, target4 = {
id: target + 1,
height: 220
}, target5 = {
id: target + 2,
height: 170
}
];
for (_j = 0, _len2 = targets.length; _j < _len2; _j++) {
targetBar = targets[_j];
if (this.bars[targetBar.id] != null) {
this.bars[targetBar.id].setHeight(targetBar.height);
}
}
_ref2 = this.bars;
_results = [];
for (_k = 0, _len3 = _ref2.length; _k < _len3; _k++) {
bar = _ref2[_k];
_results.push(this.animateBars(bar));
}
return _results;
};
Application.prototype.colorize = function() {
var color, max, min, whichColor;
max = this.colorPercentage + .1;
min = this.colorPercentage - .1;
whichColor = (Math.random() * (max - min)) + min;
if (whichColor > 1) whichColor = 1;
if (whichColor < 0) whichColor = 0;
color = '#' + Math.floor(whichColor * 16777215).toString(16);
return TweenLite.to($(".bar"), 5, {
css: {
backgroundColor: color
}
});
};
Application.prototype.animateBars = function(id) {
return TweenLite.to($("#" + id.id), .5, {
css: {
height: id.height,
top: -id.height
}
});
};
Application.prototype.expand = function(id) {
return TweenLite.to($("#" + id.id), .05, {
css: {
height: 250,
top: -250
}
});
};
Application.prototype.contract = function(id) {
return TweenLite.to($("#" + id.id), .05, {
css: {
height: id.height,
top: -id.height
}
});
};
Application.prototype.trigger = function() {
var now;
this.stopBeat();
this.bump();
now = new Date();
if (this.lastTrigger != null) this.setBeat(now - this.lastTrigger);
return this.lastTrigger = now;
};
Application.prototype.bump = function() {
var bar, _i, _j, _len, _len2, _ref, _ref2, _results;
_ref = this.bars;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
bar = _ref[_i];
this.expand(bar);
}
_ref2 = this.bars;
_results = [];
for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
bar = _ref2[_j];
_results.push(TweenLite.delayedCall(.075, this.contract, [bar]));
}
return _results;
};
Application.prototype.setBeat = function(seconds) {
var color;
console.log("beat is " + (seconds / 1000) + " seconds");
this.colorPercentage = 1 - ((seconds / 1000) / 5);
if (this.colorPercentage > 1) this.colorPercentage = 1;
if (this.colorPercentage < 0) this.colorPercentage = 0;
color = '#' + Math.floor(this.colorPercentage * 16777215).toString(16);
this.intervalSeconds = seconds;
this.stopBeat();
return this.interval = setInterval(this.bump, this.intervalSeconds);
};
Application.prototype.stopBeat = function() {
return clearInterval(this.interval);
};
return Application;
})();
$(document).ready(function() {
var application;
return application = new Application();
});
}).call(this);
</script>
<link href='css/beatbox.css' rel='stylesheet' />
</head>
<body>
<div id='bars'>
<div class='barwrapper'>
<div class='bar' id='bar1'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar2'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar3'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar4'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar5'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar6'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar7'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar8'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar9'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar10'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar11'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar12'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar13'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar14'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar15'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar16'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar17'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar18'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar19'></div>
</div>
<div class='barwrapper'>
<div class='bar' id='bar20'></div>
</div>
</div>
<div id='hit'></div>
<div id='trigger'>
<div id='button'></div>
<div id='instructions'>Tap the button and it will animate the bars below according to your click speed/pattern.</div>
</div>
</body>
</html>