2013-12-10 20:15:51 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Erik Liked To Dance</title>
|
|
|
|
|
<link rel="stylesheet" href="../css/style.css">
|
2014-04-06 07:44:19 -04:00
|
|
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
2013-12-10 20:15:51 -05:00
|
|
|
<script type="text/paperscript" canvas="canvas">
|
2014-08-16 13:24:54 -04:00
|
|
|
var leftPath = new Path({
|
|
|
|
|
strokeColor: 'red',
|
|
|
|
|
opacity: 0.5
|
|
|
|
|
});
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var rightPath = new Path({
|
|
|
|
|
strokeColor: 'green',
|
|
|
|
|
opacity: 0.5
|
|
|
|
|
});
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var amount = 8;
|
|
|
|
|
var step = view.size.width / (amount + 1);
|
|
|
|
|
var flip = false;
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
for (var i = 0; i <= amount; i++) {
|
|
|
|
|
leftPath.add(new Point(i * step, 0));
|
|
|
|
|
rightPath.add(new Point(i * step, 0));
|
|
|
|
|
}
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var group = new Group({
|
|
|
|
|
children: [leftPath, rightPath],
|
|
|
|
|
applyMatrix: false,
|
|
|
|
|
strokeWidth: 30,
|
|
|
|
|
strokeJoin: 'round',
|
|
|
|
|
strokeCap: 'butt',
|
|
|
|
|
pivot: leftPath.position,
|
|
|
|
|
position: view.center
|
|
|
|
|
});
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function onMouseDown() {
|
|
|
|
|
flip = !flip;
|
|
|
|
|
}
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function onKeyDown(event) {
|
|
|
|
|
if (event.key === 'space')
|
|
|
|
|
group.fullySelected = !group.fullySelected;
|
|
|
|
|
}
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var audio, source, analyserL, analyserR, freqByteData;
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
view.onFrame = function() {
|
|
|
|
|
var step = view.size.width / (amount + 1);
|
|
|
|
|
var scale = view.size.height / 1.5;
|
|
|
|
|
analyserL.getByteFrequencyData(freqByteData);
|
|
|
|
|
var leftBands = getEqualizerBands(freqByteData, true);
|
|
|
|
|
analyserR.getByteFrequencyData(freqByteData);
|
|
|
|
|
var rightBands = getEqualizerBands(freqByteData, true);
|
|
|
|
|
for (var i = 1; i <= amount; i++) {
|
|
|
|
|
leftPath.segments[i].point = [i * step, -leftBands[i - 1] * scale];
|
|
|
|
|
rightPath.segments[i].point = [i * step, -rightBands[i - 1] * scale * (flip ? -1 : 1)];
|
|
|
|
|
}
|
|
|
|
|
leftPath.smooth();
|
|
|
|
|
rightPath.smooth();
|
|
|
|
|
group.pivot = [leftPath.position.x, 0];
|
|
|
|
|
group.position = view.center;
|
|
|
|
|
}
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
// Pause animation until we have data
|
|
|
|
|
view.pause();
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var AudioContext = window.AudioContext || window.webkitAudioContext;
|
|
|
|
|
if (AudioContext) {
|
|
|
|
|
audio = new AudioContext();
|
|
|
|
|
source = audio.createBufferSource();
|
|
|
|
|
// Create two separate analyzers for left and right channel.
|
|
|
|
|
analyserL = audio.createAnalyser();
|
|
|
|
|
analyserL.smoothingTimeConstant = 0.25;
|
|
|
|
|
analyserL.fftSize = Math.pow(2, amount) * 2;
|
|
|
|
|
analyserR = audio.createAnalyser();
|
|
|
|
|
analyserR.smoothingTimeConstant = analyserL.smoothingTimeConstant;
|
|
|
|
|
analyserR.fftSize = analyserL.fftSize;
|
|
|
|
|
// Create the buffer to receive the analyzed data.
|
|
|
|
|
freqByteData = new Uint8Array(analyserL.frequencyBinCount);
|
|
|
|
|
// Create a splitter to feed them both
|
|
|
|
|
var splitter = audio.createChannelSplitter();
|
|
|
|
|
// Connect audio processing graph
|
|
|
|
|
source.connect(splitter);
|
|
|
|
|
splitter.connect(analyserL, 0, 0);
|
|
|
|
|
splitter.connect(analyserR, 1, 0);
|
|
|
|
|
// Connect source to output also so we can hear it
|
|
|
|
|
source.connect(audio.destination);
|
2014-09-27 07:10:08 -04:00
|
|
|
loadAudioBuffer('http://assets.paperjs.org/audio/gnossienne.mp3');
|
2014-08-16 13:24:54 -04:00
|
|
|
} else {
|
|
|
|
|
// TODO: Print error message
|
|
|
|
|
alert('Audio not supported');
|
|
|
|
|
}
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function loadAudioBuffer(url) {
|
|
|
|
|
// Load asynchronously
|
|
|
|
|
var request = new XMLHttpRequest();
|
|
|
|
|
request.open("GET", url, true);
|
|
|
|
|
request.responseType = "arraybuffer";
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
request.onload = function() {
|
|
|
|
|
audio.decodeAudioData(
|
|
|
|
|
request.response,
|
|
|
|
|
function(buffer) {
|
|
|
|
|
source.buffer = buffer;
|
|
|
|
|
source.loop = true;
|
|
|
|
|
source.start(0);
|
|
|
|
|
view.play();
|
|
|
|
|
},
|
2014-04-06 07:44:19 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function(buffer) {
|
|
|
|
|
alert("Error loading MP3");
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
request.send();
|
|
|
|
|
}
|
2013-12-10 20:15:51 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function getEqualizerBands(data) {
|
|
|
|
|
var bands = [];
|
|
|
|
|
var amount = Math.sqrt(data.length) / 2;
|
2017-04-22 12:50:53 -04:00
|
|
|
for (var i = 0; i < amount; i++) {
|
2014-08-16 13:24:54 -04:00
|
|
|
var start = Math.pow(2, i) - 1;
|
|
|
|
|
var end = start * 2 + 1;
|
|
|
|
|
var sum = 0;
|
|
|
|
|
for (var j = start; j < end; j++) {
|
|
|
|
|
sum += data[j];
|
|
|
|
|
}
|
|
|
|
|
var avg = sum / (255 * (end - start));
|
2016-12-29 03:36:54 -05:00
|
|
|
bands[i] = Math.sqrt(avg / Math.SQRT2);
|
2014-08-16 13:24:54 -04:00
|
|
|
}
|
|
|
|
|
return bands;
|
|
|
|
|
}
|
2013-12-11 11:51:58 -05:00
|
|
|
</script>
|
2013-12-10 20:15:51 -05:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-08-16 13:24:54 -04:00
|
|
|
<canvas id="canvas" resize></canvas>
|
2013-12-10 20:15:51 -05:00
|
|
|
</body>
|
2014-04-06 07:44:19 -04:00
|
|
|
</html>
|
