2012-02-16 05:46:03 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Whitney Music Box in HTML5</title>
|
2012-11-06 22:06:08 +01:00
|
|
|
<script src="./js/Color/SpaceW3.js" type="text/javascript"></script>
|
2013-01-25 09:21:16 +01:00
|
|
|
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
|
|
|
|
|
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
|
2012-10-10 07:59:04 +02:00
|
|
|
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
|
|
|
|
|
<script src="./js/MIDI/Player.js" type="text/javascript"></script>
|
|
|
|
|
<script src="./js/MusicTheory/Synesthesia.js" type="text/javascript"></script>
|
|
|
|
|
<script src="./js/Widgets/Loader.js" type="text/javascript"></script>
|
2012-11-06 22:06:08 +01:00
|
|
|
<script src="./js/Window/Event.js" type="text/javascript"></script>
|
|
|
|
|
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
|
|
|
|
|
<script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script>
|
2012-02-16 05:46:03 +01:00
|
|
|
<!-- base642binary package -->
|
2013-01-14 02:03:02 +01:00
|
|
|
<script src="./inc/Polyfill/Base64.js" type="text/javascript"></script>
|
2012-10-10 07:59:04 +02:00
|
|
|
<script src="./inc/base64binary.js" type="text/javascript"></script>
|
2012-02-16 05:46:03 +01:00
|
|
|
<!-- google fonts package -->
|
|
|
|
|
<link href="http://fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css" />
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
background: #000; color: #fff; font-family: andada; line-height: 1.5em;
|
|
|
|
|
}
|
|
|
|
|
a {
|
|
|
|
|
color: #fff
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
Whitney Music Box animation in HTML5.<br>
|
|
|
|
|
Graphics code by <a href="https://github.com/jbum/Whitney-Music-Box-Examples">Jim Bumgardner</a>.<br>
|
|
|
|
|
Audio created with <a href="https://github.com/mudx/MIDI.js">MIDI.js</a><br>
|
|
|
|
|
<canvas id="mycanvas" />
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
var dc;
|
|
|
|
|
var nbrPoints = 48;
|
|
|
|
|
var cycleLength = 60 * 3; // 3 minutes
|
|
|
|
|
var gw = 800;
|
|
|
|
|
var gh = 800;
|
|
|
|
|
var cx = gw / 2;
|
|
|
|
|
var cy = gh / 2;
|
|
|
|
|
var circleRadius = (gw / 2) * 0.95;
|
|
|
|
|
var startTime = (new Date()).getTime();
|
|
|
|
|
var PI = 3.1415927;
|
|
|
|
|
var PI2 = PI * 2;
|
|
|
|
|
var tines = [];
|
|
|
|
|
var lastSound = [];
|
|
|
|
|
|
|
|
|
|
RefreshFrame = function () {
|
|
|
|
|
dc.clearRect(0, 0, gw, gh);
|
|
|
|
|
dc.lineWidth = 3;
|
|
|
|
|
dc.strokeStyle = '#333';
|
|
|
|
|
dc.beginPath();
|
|
|
|
|
dc.moveTo(cx, cy);
|
|
|
|
|
dc.lineTo(gw, cy);
|
|
|
|
|
dc.stroke();
|
|
|
|
|
var speed = (2 * PI * nbrPoints) / cycleLength;
|
|
|
|
|
var ms = (new Date()).getTime();
|
|
|
|
|
var timer = (ms - startTime) * .001 * speed;
|
|
|
|
|
var maxRad = (gw / 2 - circleRadius) * .75;
|
|
|
|
|
var minRad = maxRad * .2;
|
|
|
|
|
for (var i = 0; i < nbrPoints; ++i) {
|
|
|
|
|
var r = (i + 1) / nbrPoints;
|
|
|
|
|
var a = timer * r;
|
|
|
|
|
var len = circleRadius * (1 + 1.0 / nbrPoints - r);
|
|
|
|
|
if (Math.floor(a / PI2) !== Math.floor(tines[i] / PI2)) {
|
|
|
|
|
MIDI.noteOn(0, i + 21, 100, 0);
|
2013-01-12 03:05:42 +01:00
|
|
|
MIDI.noteOn(0, i + 21 + 36, 100, 0);
|
2012-02-16 05:46:03 +01:00
|
|
|
lastSound[i] = ms;
|
|
|
|
|
}
|
|
|
|
|
var x = (cx + Math.cos(a) * len);
|
|
|
|
|
var y = (cy + Math.sin(a) * len);
|
|
|
|
|
var radv = minRad + (maxRad - minRad) * (1 - r);
|
|
|
|
|
radv = Math.max((radv + 6) - 6 * (ms - lastSound[i]) / 500.0, radv);
|
|
|
|
|
var huev = r * 360;
|
|
|
|
|
var satv = Math.round(100 * Math.min(1, (ms - lastSound[i]) / 1000.0));
|
|
|
|
|
var lumv = Math.round(100 * Math.max(0.5, 1 - (ms - lastSound[i]) / 1000.0));
|
|
|
|
|
dc.fillStyle = 'hsla(' + huev + ',' + satv + '%,' + lumv + '%,1)';
|
|
|
|
|
dc.beginPath();
|
|
|
|
|
dc.arc(x, y, radv, 0, PI2, false);
|
|
|
|
|
dc.fill();
|
|
|
|
|
tines[i] = a;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.onload = function () {
|
2013-01-12 03:05:42 +01:00
|
|
|
MIDI.loader = new widgets.Loader;
|
2012-11-21 10:29:46 +01:00
|
|
|
MIDI.loadPlugin({
|
2012-11-21 11:03:56 +01:00
|
|
|
instrument: "acoustic_grand_piano", // or multiple instruments
|
2012-11-21 10:29:46 +01:00
|
|
|
callback: function() {
|
2013-01-12 03:05:42 +01:00
|
|
|
MIDI.loader.stop();
|
2012-11-21 10:29:46 +01:00
|
|
|
var canvas = document.getElementById('mycanvas');
|
|
|
|
|
canvas.style.width = gw + "px";
|
|
|
|
|
canvas.style.width = gw + "px";
|
|
|
|
|
canvas.width = gw;
|
|
|
|
|
canvas.height = gh;
|
|
|
|
|
dc = canvas.getContext('2d');
|
|
|
|
|
for (var i = 0; i < nbrPoints; ++i) {
|
|
|
|
|
if (i % 7 === 0) MIDI.noteOn(0, i + 21, 100, 0);
|
|
|
|
|
lastSound[i] = 0;
|
|
|
|
|
tines[i] = 0;
|
|
|
|
|
}
|
|
|
|
|
startTime = (new Date()).getTime();
|
|
|
|
|
setInterval(RefreshFrame, 1000 / 30);
|
2012-02-16 05:46:03 +01:00
|
|
|
}
|
2012-11-21 10:29:46 +01:00
|
|
|
});
|
2012-02-16 05:46:03 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
