Permalink
Browse files

Added visualization to the loop-sequencer test.

Per request, it seems to be a useful resource for seeing how you could
implement a loop machine with visualizations quite simply using the API.
The visualization is simple, changing colors of boxes according to the
current beat, but enough to show how this can be done.
  • Loading branch information...
1 parent a71a7de commit f3a96d032145191d012683ba2ba6adcc75ba5087 @jussi-kalliokoski committed May 23, 2012
Showing with 47 additions and 0 deletions.
  1. +47 −0 tests/loop-sequencer.html
View
@@ -66,5 +66,52 @@
</script>
</head>
<body>
+ <style>
+body {
+ background: #1a1e1f;
+}
+td {
+ background-color: #9e6ffe;
+}
+
+td.active {
+ background-color: #a6e22e;
+}
+ </style>
+ <table id="beats">
+ <tr>
+ <td>1 1/4</td>
+ <td>1 2/4</td>
+ <td>1 3/4</td>
+ <td>1 4/4</td>
+ <td>2 1/4</td>
+ <td>2 2/4</td>
+ <td>2 3/4</td>
+ <td>2 4/4</td>
+ </tr>
+ </table>
+ <script>
+var beats = [].slice.call(document.querySelectorAll('#beats td'));
+
+function getBeat () {
+ var b = (seq.position - (dev.writePosition - dev.getPlaybackTime()) *
+ 60 / seq.tempo / seq.sampleRate);
+ return b < 0 ? b + seq.length : b % seq.length;
+}
+
+setInterval(function () {
+ /* We multiply by four to get the index of the box we want to highlight. */
+ var index, i;
+ index = ~~(getBeat() * 4);
+
+ for (i=0; i<beats.length; i++) {
+ if (i === index) {
+ beats[i].classList.add('active');
+ } else {
+ beats[i].classList.remove('active');
+ }
+ }
+}, 1000/60);
+ </script>
</body>
</html>

0 comments on commit f3a96d0

Please sign in to comment.