Skip to content
Browse files

working hats

  • Loading branch information...
1 parent cda9a42 commit 36d2b1674e3c0b525d36d8120b9219626d4b2f50 @stenson committed Dec 3, 2011
View
1 _posts/2011-11-01-i-got-the-feelin.textile
@@ -22,6 +22,7 @@ position: "200px -200px"
<p>Trying to make his grooves happen — even at slow tempos — takes time, repetition and repetition.</p>
<script>
+ var mods = [ [0,2], [2,2], [6,0] ];
var values = [
[3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0],
[0, 0, 0, 0, 0, 0, 4, 0, 0, 2, 0, 0, 0, 0, 4, 0, 0, 2, 0, 0, 4, 2, 0, 3, 0, 2, 1, 2, 0, 2, 2, 1],
View
1 _posts/2011-11-02-mother-popcorn.textile
@@ -16,6 +16,7 @@ position: "200px -200px"
<p>It&rsquo;s fun to ballpark the dates of funk tracks based on hi-hat parts. Invite over some friends, order some pizza and try it sometime.</p>
<script>
+ var mods = [];
var values = [
[3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0],
[0, 0, 0, 0, 4, 0, 0, 2, 0, 2, 0, 0, 0, 0, 4, 0, 0, 2, 0, 2, 3, 2, 0, 2, 0, 4, 0, 2, 3, 2, 0, 2],
View
1 _posts/2011-11-03-cissy-strut.textile
@@ -22,6 +22,7 @@ position: "50px -100px"
<p>That said, it’s still fun to play with one hand.</p>
<script>
+ var mods = [];
var values = [
[0, 4, 3, 0, 4, 0, 3, 4, 0, 4, 3, 0, 4, 0, 4, 0, 0, 4, 3, 0, 4, 0, 3, 4, 0, 4, 3, 0, 4, 0, 4, 0],
[0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 4, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 4, 0],
View
27 _posts/2011-11-11-use-me.textile
@@ -0,0 +1,27 @@
+---
+layout: post
+who: "James Gadson"
+title: "Use Me"
+act: "Bill Withers"
+year: "1972"
+bpm: "100"
+image: ""
+position: "200px -200px"
+---
+
+<p>Grooving is a spiritual thing for James Gadson.</p>
+
+<p>On this track, the band grooved for about ten minutes straight. After that, Bill Withers put down his vocal part and the engineer manufactured a breakdown by soloing vocals and drums for certain sections.</p>
+
+<p>If you listen closely, you can hear the bass bleeding into the drum mics during the breakdowns.</p>
+
+<p>I dig this work-flow. When the album version starts, the musicians have already been deep in the groove for a few minutes.</p>
+
+<script>
+ var mods = [ [6,1], [6,3], [7,1] ];
+ var values = [
+ [4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 2, 4, 2, 4, 2, 4, 2, 4],
+ [0, 0, 0, 0, 4, 0, 0, 4, 0, 4, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4],
+ [4, 0, 4, 0, 0, 4, 0, 3, 4, 0, 4, 4, 0, 4, 0, 3, 4, 0, 4, 0, 0, 4, 0, 0, 3, 4, 0, 4, 0, 4, 0, 3]
+ ];
+</script>
View
1 _posts/2011-11-25-come-dancing.textile → _posts/2011-11-16-come-dancing.textile
@@ -16,6 +16,7 @@ position: "0px -250px"
<p>This imagery has helped a lot of my students nail the swing of this groove.</p>
<script>
+ var mods = [[6,2]];
var values = [
[3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 4, 0, 3, 0, 3, 0],
[0, 2, 2, 0, 4, 2, 2, 0, 0, 2, 2, 0, 4, 2, 2, 0, 0, 2, 0, 0, 4, 2, 0, 0, 0, 4, 0, 0, 4, 2, 2, 0],
View
1 _posts/2011-11-25-hot-sweat.textile → _posts/2011-11-17-hot-sweat.textile
@@ -12,6 +12,7 @@ position: "0px -350px"
<p>Purdie&rsquo;s take on Stubblefield&rsquo;s &ldquo;Cold Sweat.&rdquo;</p>
<script>
+ var mods = [];
var values = [
[4, 0, 4, 0, 4, 0, 1, 0, 4, 0, 2, 0, 0, 2, 0, 2, 0, 0, 2, 1, 2, 0, 4, 0, 4, 0, 2, 1, 2, 0, 2, 0],
[0, 0, 0, 0, 4, 0, 0, 2, 1, 1, 0, 0, 2, 0, 4, 1, 0, 1, 0, 1, 4, 2, 0, 1, 0, 1, 0, 1, 4, 1, 0, 0],
View
29 _posts/2011-11-20-the-unknown-drummer.textile
@@ -0,0 +1,29 @@
+---
+layout: post
+who: "The Unknown Drummer"
+title: "Str Bts DC Gogo 100"
+act: "n/a"
+year: "n/a"
+bpm: "110"
+image: ""
+position: "200px -200px"
+---
+
+<p>Welcome to the Tomb of the Unknowns.</p>
+
+<p>I was listening to a friend’s remix and heard a funky drum break. I asked if he knew where the break was from, and he said it was part of a library of loops he bought. He sent me the 1-bar cut.</p>
+
+<p>I Shazamed it. I played it for some funky friends. No one had any leads.</p>
+
+<p>Between poor crediting (common during the sixties and seventies) and nameless loop libraries, it has become difficult to identify who played some of the funkiest beats.</p>
+
+<p>We shall call this beat by its file name: <em>Strt Bts DC Gogo 100.</em></p>
+
+<script>
+ var mods = [ [2,0], [2,2], [6,0], [6,2] ];
+ var values = [
+ [0, 2, 4, 0, 2, 4, 0, 2, 4, 0, 0, 0, 0, 2, 2, 4, 0, 2, 4, 0, 2, 4, 0, 2, 4, 0, 0, 0, 0, 2, 2, 4],
+ [0, 1, 0, 0, 4, 0, 0, 1, 0, 0, 0, 0, 4, 0, 0, 1, 0, 1, 0, 0, 4, 0, 0, 1, 0, 0, 0, 0, 4, 0, 0, 1],
+ [4, 0, 0, 4, 0, 0, 4, 0, 0, 0, 4, 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 4, 0, 0, 0, 4, 0, 0, 0, 0, 0]
+ ];
+</script>
View
50 _site/atom.xml
@@ -4,7 +4,7 @@
<title>The Funklet</title>
<link href="http://funklet.com/atom.xml" rel="self"/>
<link href="http://funklet.com/"/>
- <updated>2011-12-02T09:04:15-08:00</updated>
+ <updated>2011-12-03T14:31:35-08:00</updated>
<id>http://funklet.com/</id>
<author>
<name>Jack Stratton</name>
@@ -13,12 +13,33 @@
<entry>
+ <title>Str Bts DC Gogo 100</title>
+ <link href="http://funklet.com/the-unknown-drummer"/>
+ <updated>2011-11-20T00:00:00-08:00</updated>
+ <id>http://funklet.com/the-unknown-drummer</id>
+ <content type="html">&lt;p&gt;Welcome to the Tomb of the Unknowns.&lt;/p&gt;
+&lt;p&gt;I was listening to a friend’s remix and heard a funky drum break. I asked if he knew where the break was from, and he said it was part of a library of loops he bought. He sent me the 1-bar cut.&lt;/p&gt;
+&lt;p&gt;I Shazamed it. I played it for some funky friends. No one had any leads.&lt;/p&gt;
+&lt;p&gt;Between poor crediting (common during the sixties and seventies) and nameless loop libraries, it has become difficult to identify who played some of the funkiest beats.&lt;/p&gt;
+&lt;p&gt;We shall call this beat by its file name: &lt;em&gt;Strt Bts DC Gogo 100.&lt;/em&gt;&lt;/p&gt;
+&lt;script&gt;
+ var mods = [ [2,0], [2,2], [6,0], [6,2] ];
+ var values = [
+ [0, 2, 4, 0, 2, 4, 0, 2, 4, 0, 0, 0, 0, 2, 2, 4, 0, 2, 4, 0, 2, 4, 0, 2, 4, 0, 0, 0, 0, 2, 2, 4],
+ [0, 1, 0, 0, 4, 0, 0, 1, 0, 0, 0, 0, 4, 0, 0, 1, 0, 1, 0, 0, 4, 0, 0, 1, 0, 0, 0, 0, 4, 0, 0, 1],
+ [4, 0, 0, 4, 0, 0, 4, 0, 0, 0, 4, 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 4, 0, 0, 0, 4, 0, 0, 0, 0, 0]
+ ];
+&lt;/script&gt;</content>
+ </entry>
+
+ <entry>
<title>Hot Sweat</title>
<link href="http://funklet.com/hot-sweat"/>
- <updated>2011-11-25T00:00:00-08:00</updated>
+ <updated>2011-11-17T00:00:00-08:00</updated>
<id>http://funklet.com/hot-sweat</id>
<content type="html">&lt;p&gt;Purdie&amp;rsquo;s take on Stubblefield&amp;rsquo;s &amp;ldquo;Cold Sweat.&amp;rdquo;&lt;/p&gt;
&lt;script&gt;
+ var mods = [];
var values = [
[4, 0, 4, 0, 4, 0, 1, 0, 4, 0, 2, 0, 0, 2, 0, 2, 0, 0, 2, 1, 2, 0, 4, 0, 4, 0, 2, 1, 2, 0, 2, 0],
[0, 0, 0, 0, 4, 0, 0, 2, 1, 1, 0, 0, 2, 0, 4, 1, 0, 1, 0, 1, 4, 2, 0, 1, 0, 1, 0, 1, 4, 1, 0, 0],
@@ -30,14 +51,15 @@
<entry>
<title>Come Dancing</title>
<link href="http://funklet.com/come-dancing"/>
- <updated>2011-11-25T00:00:00-08:00</updated>
+ <updated>2011-11-16T00:00:00-08:00</updated>
<id>http://funklet.com/come-dancing</id>
<content type="html">&lt;p&gt;Narada wrote this tune. Wilbur Bascomb&amp;rsquo;s bass playing will break your neck.&lt;/p&gt;
&lt;p&gt;(If you want to hear Wilbur and Purdie lock up, check out &lt;em&gt;Hair: Original Soundtrack Recording&lt;/em&gt; &amp;mdash; the soundtrack from the movie version of &lt;em&gt;Hair&lt;/em&gt;.)&lt;/p&gt;
&lt;p&gt;This particular pattern only happens during the drum intro.&lt;/p&gt;
&lt;p&gt;Graphically, it&amp;rsquo;s one of the mroe symmetrical patterns. However, when playing it, rather than thinking about the symmetry or the clever dialog between kick and snare, you should imagine an overweight Daffy Duck grumblign his way into a strip club.&lt;/p&gt;
&lt;p&gt;This imagery has helped a lot of my students nail the swing of this groove.&lt;/p&gt;
&lt;script&gt;
+ var mods = [[6,2]];
var values = [
[3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 4, 0, 3, 0, 3, 0],
[0, 2, 2, 0, 4, 2, 2, 0, 0, 2, 2, 0, 4, 2, 2, 0, 0, 2, 0, 0, 4, 2, 0, 0, 0, 4, 0, 0, 4, 2, 2, 0],
@@ -47,6 +69,25 @@
</entry>
<entry>
+ <title>Use Me</title>
+ <link href="http://funklet.com/use-me"/>
+ <updated>2011-11-11T00:00:00-08:00</updated>
+ <id>http://funklet.com/use-me</id>
+ <content type="html">&lt;p&gt;Grooving is a spiritual thing for James Gadson.&lt;/p&gt;
+&lt;p&gt;On this track, the band grooved for about ten minutes straight. After that, Bill Withers put down his vocal part and the engineer manufactured a breakdown by soloing vocals and drums for certain sections.&lt;/p&gt;
+&lt;p&gt;If you listen closely, you can hear the bass bleeding into the drum mics during the breakdowns.&lt;/p&gt;
+&lt;p&gt;I dig this work-flow. When the album version starts, the musicians have already been deep in the groove for a few minutes.&lt;/p&gt;
+&lt;script&gt;
+ var mods = [ [6,1], [6,3], [7,1] ];
+ var values = [
+ [4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 2, 4, 2, 4, 2, 4, 2, 4],
+ [0, 0, 0, 0, 4, 0, 0, 4, 0, 4, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4],
+ [4, 0, 4, 0, 0, 4, 0, 3, 4, 0, 4, 4, 0, 4, 0, 3, 4, 0, 4, 0, 0, 4, 0, 0, 3, 4, 0, 4, 0, 4, 0, 3]
+ ];
+&lt;/script&gt;</content>
+ </entry>
+
+ <entry>
<title>Cissy Strut</title>
<link href="http://funklet.com/cissy-strut"/>
<updated>2011-11-03T00:00:00-07:00</updated>
@@ -58,6 +99,7 @@
&lt;p&gt;After I got remotely schooled by Stanton Moore’s book, the groove felt better.&lt;/p&gt;
&lt;p&gt;That said, it’s still fun to play with one hand.&lt;/p&gt;
&lt;script&gt;
+ var mods = [];
var values = [
[0, 4, 3, 0, 4, 0, 3, 4, 0, 4, 3, 0, 4, 0, 4, 0, 0, 4, 3, 0, 4, 0, 3, 4, 0, 4, 3, 0, 4, 0, 4, 0],
[0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 4, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 4, 0],
@@ -77,6 +119,7 @@
&lt;p&gt;Because of the quarters on the hat, the kick and snare part sound totally fresh, even though it is similar to some past Stubblefield grooves.&lt;/p&gt;
&lt;p&gt;It&amp;rsquo;s fun to ballpark the dates of funk tracks based on hi-hat parts. Invite over some friends, order some pizza and try it sometime.&lt;/p&gt;
&lt;script&gt;
+ var mods = [];
var values = [
[3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0],
[0, 0, 0, 0, 4, 0, 0, 2, 0, 2, 0, 0, 0, 0, 4, 0, 0, 2, 0, 2, 3, 2, 0, 2, 0, 4, 0, 2, 3, 2, 0, 2],
@@ -97,6 +140,7 @@
&lt;p&gt;His groups of three 16th notes on the snare are funky and righteously difficult.&lt;/p&gt;
&lt;p&gt;Trying to make his grooves happen — even at slow tempos — takes time, repetition and repetition.&lt;/p&gt;
&lt;script&gt;
+ var mods = [ [0,2], [2,2], [6,0] ];
var values = [
[3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0],
[0, 0, 0, 0, 0, 0, 4, 0, 0, 2, 0, 0, 0, 0, 4, 0, 0, 2, 0, 0, 4, 2, 0, 3, 0, 2, 1, 2, 0, 2, 2, 1],
View
1 _site/cissy-strut/index.html
@@ -44,6 +44,7 @@ <h1 id="name"><span>Zigaboo Modeliste</span></h1>
<p>After I got remotely schooled by Stanton Moore’s book, the groove felt better.</p>
<p>That said, it’s still fun to play with one hand.</p>
<script>
+ var mods = [];
var values = [
[0, 4, 3, 0, 4, 0, 3, 4, 0, 4, 3, 0, 4, 0, 4, 0, 0, 4, 3, 0, 4, 0, 3, 4, 0, 4, 3, 0, 4, 0, 4, 0],
[0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 4, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 4, 0],
View
1 _site/come-dancing/index.html
@@ -43,6 +43,7 @@ <h1 id="name"><span>Narada Michael Walden</span></h1>
<p>Graphically, it&rsquo;s one of the mroe symmetrical patterns. However, when playing it, rather than thinking about the symmetry or the clever dialog between kick and snare, you should imagine an overweight Daffy Duck grumblign his way into a strip club.</p>
<p>This imagery has helped a lot of my students nail the swing of this groove.</p>
<script>
+ var mods = [[6,2]];
var values = [
[3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 4, 0, 3, 0, 3, 0],
[0, 2, 2, 0, 4, 2, 2, 0, 0, 2, 2, 0, 4, 2, 2, 0, 0, 2, 0, 0, 4, 2, 0, 0, 0, 4, 0, 0, 4, 2, 2, 0],
View
1 _site/hot-sweat/index.html
@@ -39,6 +39,7 @@ <h1 id="name"><span>Bernard Purdie</span></h1>
<div id="text">
<p>Purdie&rsquo;s take on Stubblefield&rsquo;s &ldquo;Cold Sweat.&rdquo;</p>
<script>
+ var mods = [];
var values = [
[4, 0, 4, 0, 4, 0, 1, 0, 4, 0, 2, 0, 0, 2, 0, 2, 0, 0, 2, 1, 2, 0, 4, 0, 4, 0, 2, 1, 2, 0, 2, 0],
[0, 0, 0, 0, 4, 0, 0, 2, 1, 1, 0, 0, 2, 0, 4, 1, 0, 1, 0, 1, 4, 2, 0, 1, 0, 1, 0, 1, 4, 1, 0, 0],
View
1 _site/i-got-the-feelin/index.html
@@ -44,6 +44,7 @@ <h1 id="name"><span>Clyde Stubblefield</span></h1>
<p>His groups of three 16th notes on the snare are funky and righteously difficult.</p>
<p>Trying to make his grooves happen — even at slow tempos — takes time, repetition and repetition.</p>
<script>
+ var mods = [ [0,2], [2,2], [6,0] ];
var values = [
[3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0, 3, 0],
[0, 0, 0, 0, 0, 0, 4, 0, 0, 2, 0, 0, 0, 0, 4, 0, 0, 2, 0, 0, 4, 2, 0, 3, 0, 2, 1, 2, 0, 2, 2, 1],
View
24 _site/index.html
@@ -13,12 +13,22 @@
<div id="text">
<div id="posts">
+ <a href="/the-unknown-drummer"
+ class="link"
+ data-title="Str Bts DC Gogo 100"
+ data-drummer="The Unknown Drummer"
+ data-year="n/a"
+ data-posted="Sun Nov 20 00:00:00 -0800 2011">
+ <span class="image" style="background-image:url(/images/)"></span>
+ <span class="title">The Unknown Drummer, &ldquo;Str Bts DC Gogo 100&rdquo;</span>
+ </a>
+
<a href="/hot-sweat"
class="link"
data-title="Hot Sweat"
data-drummer="Bernard Purdie"
data-year="1996"
- data-posted="Fri Nov 25 00:00:00 -0800 2011">
+ data-posted="Thu Nov 17 00:00:00 -0800 2011">
<span class="image" style="background-image:url(/images/purdie.jpg)"></span>
<span class="title">Bernard Purdie, &ldquo;Hot Sweat&rdquo;</span>
</a>
@@ -28,11 +38,21 @@
data-title="Come Dancing"
data-drummer="Narada Michael Walden"
data-year="1976"
- data-posted="Fri Nov 25 00:00:00 -0800 2011">
+ data-posted="Wed Nov 16 00:00:00 -0800 2011">
<span class="image" style="background-image:url(/images/narada.jpg)"></span>
<span class="title">Narada Michael Walden, &ldquo;Come Dancing&rdquo;</span>
</a>
+ <a href="/use-me"
+ class="link"
+ data-title="Use Me"
+ data-drummer="James Gadson"
+ data-year="1972"
+ data-posted="Fri Nov 11 00:00:00 -0800 2011">
+ <span class="image" style="background-image:url(/images/)"></span>
+ <span class="title">James Gadson, &ldquo;Use Me&rdquo;</span>
+ </a>
+
<a href="/cissy-strut"
class="link"
data-title="Cissy Strut"
View
1 _site/mother-popcorn/index.html
@@ -43,6 +43,7 @@ <h1 id="name"><span>Clyde Stubblefield</span></h1>
<p>Because of the quarters on the hat, the kick and snare part sound totally fresh, even though it is similar to some past Stubblefield grooves.</p>
<p>It&rsquo;s fun to ballpark the dates of funk tracks based on hi-hat parts. Invite over some friends, order some pizza and try it sometime.</p>
<script>
+ var mods = [];
var values = [
[3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0, 3, 0, 0, 0],
[0, 0, 0, 0, 4, 0, 0, 2, 0, 2, 0, 0, 0, 0, 4, 0, 0, 2, 0, 2, 3, 2, 0, 2, 0, 4, 0, 2, 3, 2, 0, 2],
View
37 _site/script/functions.js
@@ -68,28 +68,33 @@ var writeValuesIntoTable = function(patterns, div) {
});
};
-var writeModifiersIntoTable = function(length, div) {
+var writeModifiersIntoTable = function(length, div, modifiedValues, hats) {
var tr = cabin("div.tr.modifiers");
var tds = [];
for(var i = 0; i < length; i++) {
- tds.push(writeValueIntoCell(0, tr));
+ var td = writeValueIntoCell(0, tr);
+ td.appendChild(cabin("span.plus", "+"));
+ td.setAttribute("stick", hats[i] > 0);
+ td.setAttribute("modified", modifiedValues[i]);
+ tds.push(td);
}
div.appendChild(tr);
return tds;
};
/* listening for value changes */
-var listenForValuesFromRows = function(rows, values, limit) {
+var listenForValuesFromRows = function(rows, values, limit, modifiers) {
rows.forEach(function(tr, i) {
tr.forEach(function(td, j) {
- var setVolume = function(volume) { td.setAttribute("volume", values[i][j] = volume) };
+ var setVolume = function(volume) {
+ td.setAttribute("volume", values[i][j] = volume);
+ i === 0 && modifiers[j].setAttribute("stick", volume > 0);
+ };
td.addEventListener("mouseup", function(e) {
var v = parseInt(td.getAttribute("volume"));
- setVolume(
- (e.metaKey || v === limit) ? 0
- : (e.altKey) ? limit : v + 1);
+ setVolume((e.metaKey || v === limit) ? 0 : (e.altKey) ? limit : v + 1);
}, true);
td.addEventListener("mouseover", function(e) {
@@ -99,17 +104,15 @@ var listenForValuesFromRows = function(rows, values, limit) {
});
};
-var listenForModifiers = function(modifiers, values) {
+var listenForModifiers = function(modifiers, modifiedValues, values) {
modifiers.forEach(function(modifier, i) {
+ var setValue = function(v) {
+ modifiedValues[i] = v;
+ modifier.setAttribute("modified", v);
+ };
+
modifier.addEventListener("mouseup", function(e) {
- var mod = modifier.getAttribute("modified");
- if (modifier.getAttribute("modified")) {
- modifiedValues[i] = undefined;
- modifier.setAttribute("modified", false);
- } else {
- modifiedValues[i] = true;
- modifier.setAttribute("modified", true);
- }
+ setValue(parseInt(modifier.getAttribute("modified"), 10) > 0 ? 0 : 1);
});
});
};
@@ -124,7 +127,7 @@ var listenForBpmChange = function(bpm, el, form) {
};
el.addEventListener("blur", updateBpm, true);
-
+
form.addEventListener("submit", function(e) {
e.preventDefault();
updateBpm();
View
69 _site/script/funklet.js
@@ -1,5 +1,3 @@
-/* run the program */
-
var originals = copyArray(values);
var length = values[0].length - 1;
@@ -12,23 +10,27 @@ var bpmMeter = getElement("bpm");
var line = getElement("line");
var width = diagram.clientWidth;
+// sample names
var names = ["hat", "snare", "kick"];
-var buildNames = function(a, b) {
- return b.map(function(i) { return a+""+i })
-};
+var buildNames = function(a, b) { return b.map(function(i) { return a+""+i }) };
+
var sampleNames = (["foothat"])
.concat(buildNames("hat", [1,2,3,4]))
.concat(buildNames("ohat", [1,2,3,4]))
.concat(buildNames("snare", [1,2,3,4]))
.concat(buildNames("kick", [1,2,3,4]));
-var modifiers = writeModifiersIntoTable(length+1, diagram);
var modifiedValues = [];
+mods.forEach(function(mod) {
+ console.log(mod);
+ modifiedValues[mod[0]*4 + mod[1]] = 1;
+});
+var modifiers = writeModifiersIntoTable(length+1, diagram, modifiedValues, values[0]);
var rows = writeValuesIntoTable(values, diagram, names);
var bpm = { value: parseInt(bpmMeter.value, 10) };
-listenForModifiers(modifiers, modifiedValues, 4);
-listenForValuesFromRows(rows, values, 4);
+listenForModifiers(modifiers, modifiedValues, values);
+listenForValuesFromRows(rows, values, 4, modifiers);
listenForBpmChange(bpm, bpmMeter, getElement("bpm-form"));
var context = new webkitAudioContext();
@@ -37,7 +39,7 @@ var left = 5;
getBuffersFromSampleNames(sampleNames, context, function(buffers) {
playSampleWithBuffer(context, buffers.kick4, 0, 0); // start the audio context
-
+
var interval;
var i = 0;
@@ -54,32 +56,51 @@ getBuffersFromSampleNames(sampleNames, context, function(buffers) {
rows[j][last].className = "td";
rows[j][i].className = "td current";
var buffer = buffers[prefix+""+volume];
- if (j === 0 && volume !== 0 && outstandingOpen) {
- outstandingOpen.noteOff(0);
- outstandingOpen = null;
- playSampleWithBuffer(context, buffers.foothat, 0, 1);
- }
-
- if (j === 0 && modifiedValues[i] && volume !== 0) {
- buffer = buffers["o"+prefix+""+volume];
- outstandingOpen = playSampleWithBuffer(context, buffer, 0, 0.85);
- } else {
+
+ if (j === 0) { // hat row, more complicated
+ var modified = modifiedValues[i];
+ var modifiedBuffer = buffers["o" + prefix + "" + volume];
+
+ if (outstandingOpen && (volume || modified)) {
+ outstandingOpen.noteOff(0); // kill the ringing hat
+ oustandingOpen = null;
+ }
+
+ if (volume) {
+ if (modified) outstandingOpen = playSampleWithBuffer(context, modifiedBuffer, 0, 0.85);
+ else playSampleWithBuffer(context, buffer, 0, 1);
+ } else if (modified) {
+ playSampleWithBuffer(context, buffers.foothat, 0, 1);
+ }
+ } else { // bass and snare
(volume !== 0) && playSampleWithBuffer(context, buffer, 0, 1);
}
+ // if (j === 0 && volume !== 0 && outstandingOpen) {
+ // outstandingOpen.noteOff(0);
+ // outstandingOpen = null;
+ // playSampleWithBuffer(context, buffers.foothat, 0, 1);
+ // }
+ //
+ // if (j === 0 && modifiedValues[i] && volume !== 0) {
+ // buffer = buffers["o"+prefix+""+volume];
+ // outstandingOpen = playSampleWithBuffer(context, buffer, 0, 0.85);
+ // } else {
+ // (volume !== 0) && playSampleWithBuffer(context, buffer, 0, 1);
+ // }
}, 0);
i = (i === length) ? 0 : (i + 1);
};
- var metronomeGraphicback = function(lag) {
- //line.style.left = left + "px";
- };
-
var start = function() {
- interval = runCallbackWithMetronome(context, bpm, 4, metronomeClickback, metronomeGraphicback);
+ startButton.style.display = "none";
+ stopButton.style.display = "block";
+ interval = runCallbackWithMetronome(context, bpm, 4, metronomeClickback);
};
var stop = function() {
+ stopButton.style.display = "none";
+ startButton.style.display = "block";
clearInterval(interval);
};
View
31 _site/style/style.css
@@ -230,11 +230,32 @@
.tr.modifiers .td-holder {
height: 15px;
border-right-color: white;
+ font-weight: bold;
}
-
- .tr.modifiers .td[modified="true"] {
+
+ .tr.modifiers .td {
+ position: relative;
+ }
+
+ .tr.modifiers .td .plus {
+ position: absolute;
+ top: -9px;
+ left: -1px;
+ font-size: 21px;
+ display: none;
+ }
+
+ .tr.modifiers .td[stick="true"][modified="1"] {
background: #333;
}
+
+ .tr.modifiers .td[stick="false"][modified="1"] {
+ background: white;
+ }
+
+ .tr.modifiers .td[stick="false"][modified="1"] .plus {
+ display: block;
+ }
#controls {
margin-top:50px;
@@ -246,6 +267,12 @@
border: none;
font-size: 24px;
color: #333;
+ float: left;
+ width: 33px;
+ }
+
+ #stop {
+ display: none;
}
#bpm {
View
58 _site/the-unknown-drummer/index.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Str Bts DC Gogo 100 /// The Funklet</title>
+ <link rel="stylesheet" href="/style/style.css"/>
+ </head>
+ <body>
+ <div id="funklet-bar">
+ <a href="/">The Funklet</a>
+</div>
+<div id="header" style="background-image:url(/images/); background-position:200px -200px">
+ <div id="info">
+ <h1 id="name"><span>The Unknown Drummer</span></h1>
+ <div id="song">
+ <h2><span>Str Bts DC Gogo 100</span></h2>
+ <h3><span>n/a</span></h3>
+ <h3><span>n/a</span></h3>
+ </div>
+ </div>
+</div>
+<div id="container">
+ <div id="diagram-container">
+ <div id="diagram">
+ <div id="line"></div>
+ <div id="decoration"></div>
+ <div id="stub-left" class="stub"></div>
+ <div id="stub-right" class="stub"></div>
+ </div>
+ <div id="controls">
+ <form id="bpm-form">
+ <button class="control" id="start">&#9654;</button>
+ <button class="control" id="stop">&#9724;</button>
+ &nbsp;&nbsp;&nbsp;&nbsp;<span>@</span><input id="bpm" type="text" value="110"/><span>BPM</span>
+ </form>
+ </div>
+ </div>
+</div>
+<div id="text">
+ <p>Welcome to the Tomb of the Unknowns.</p>
+<p>I was listening to a friend’s remix and heard a funky drum break. I asked if he knew where the break was from, and he said it was part of a library of loops he bought. He sent me the 1-bar cut.</p>
+<p>I Shazamed it. I played it for some funky friends. No one had any leads.</p>
+<p>Between poor crediting (common during the sixties and seventies) and nameless loop libraries, it has become difficult to identify who played some of the funkiest beats.</p>
+<p>We shall call this beat by its file name: <em>Strt Bts DC Gogo 100.</em></p>
+<script>
+ var mods = [ [2,0], [2,2], [6,0], [6,2] ];
+ var values = [
+ [0, 2, 4, 0, 2, 4, 0, 2, 4, 0, 0, 0, 0, 2, 2, 4, 0, 2, 4, 0, 2, 4, 0, 2, 4, 0, 0, 0, 0, 2, 2, 4],
+ [0, 1, 0, 0, 4, 0, 0, 1, 0, 0, 0, 0, 4, 0, 0, 1, 0, 1, 0, 0, 4, 0, 0, 1, 0, 0, 0, 0, 4, 0, 0, 1],
+ [4, 0, 0, 4, 0, 0, 4, 0, 0, 0, 4, 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 4, 0, 0, 0, 4, 0, 0, 0, 0, 0]
+ ];
+</script>
+</div>
+<script src="/script/cabin.js"></script>
+<script src="/script/functions.js"></script>
+<script src="/script/funklet.js"></script>
+ </body>
+</html>
View
57 _site/use-me/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Use Me /// The Funklet</title>
+ <link rel="stylesheet" href="/style/style.css"/>
+ </head>
+ <body>
+ <div id="funklet-bar">
+ <a href="/">The Funklet</a>
+</div>
+<div id="header" style="background-image:url(/images/); background-position:200px -200px">
+ <div id="info">
+ <h1 id="name"><span>James Gadson</span></h1>
+ <div id="song">
+ <h2><span>Use Me</span></h2>
+ <h3><span>Bill Withers</span></h3>
+ <h3><span>1972</span></h3>
+ </div>
+ </div>
+</div>
+<div id="container">
+ <div id="diagram-container">
+ <div id="diagram">
+ <div id="line"></div>
+ <div id="decoration"></div>
+ <div id="stub-left" class="stub"></div>
+ <div id="stub-right" class="stub"></div>
+ </div>
+ <div id="controls">
+ <form id="bpm-form">
+ <button class="control" id="start">&#9654;</button>
+ <button class="control" id="stop">&#9724;</button>
+ &nbsp;&nbsp;&nbsp;&nbsp;<span>@</span><input id="bpm" type="text" value="100"/><span>BPM</span>
+ </form>
+ </div>
+ </div>
+</div>
+<div id="text">
+ <p>Grooving is a spiritual thing for James Gadson.</p>
+<p>On this track, the band grooved for about ten minutes straight. After that, Bill Withers put down his vocal part and the engineer manufactured a breakdown by soloing vocals and drums for certain sections.</p>
+<p>If you listen closely, you can hear the bass bleeding into the drum mics during the breakdowns.</p>
+<p>I dig this work-flow. When the album version starts, the musicians have already been deep in the groove for a few minutes.</p>
+<script>
+ var mods = [ [6,1], [6,3], [7,1] ];
+ var values = [
+ [4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2, 2, 4, 2, 4, 2, 4, 2, 4],
+ [0, 0, 0, 0, 4, 0, 0, 4, 0, 4, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4],
+ [4, 0, 4, 0, 0, 4, 0, 3, 4, 0, 4, 4, 0, 4, 0, 3, 4, 0, 4, 0, 0, 4, 0, 0, 3, 4, 0, 4, 0, 4, 0, 3]
+ ];
+</script>
+</div>
+<script src="/script/cabin.js"></script>
+<script src="/script/functions.js"></script>
+<script src="/script/funklet.js"></script>
+ </body>
+</html>
View
37 script/functions.js
@@ -68,28 +68,33 @@ var writeValuesIntoTable = function(patterns, div) {
});
};
-var writeModifiersIntoTable = function(length, div) {
+var writeModifiersIntoTable = function(length, div, modifiedValues, hats) {
var tr = cabin("div.tr.modifiers");
var tds = [];
for(var i = 0; i < length; i++) {
- tds.push(writeValueIntoCell(0, tr));
+ var td = writeValueIntoCell(0, tr);
+ td.appendChild(cabin("span.plus", "+"));
+ td.setAttribute("stick", hats[i] > 0);
+ td.setAttribute("modified", modifiedValues[i]);
+ tds.push(td);
}
div.appendChild(tr);
return tds;
};
/* listening for value changes */
-var listenForValuesFromRows = function(rows, values, limit) {
+var listenForValuesFromRows = function(rows, values, limit, modifiers) {
rows.forEach(function(tr, i) {
tr.forEach(function(td, j) {
- var setVolume = function(volume) { td.setAttribute("volume", values[i][j] = volume) };
+ var setVolume = function(volume) {
+ td.setAttribute("volume", values[i][j] = volume);
+ i === 0 && modifiers[j].setAttribute("stick", volume > 0);
+ };
td.addEventListener("mouseup", function(e) {
var v = parseInt(td.getAttribute("volume"));
- setVolume(
- (e.metaKey || v === limit) ? 0
- : (e.altKey) ? limit : v + 1);
+ setVolume((e.metaKey || v === limit) ? 0 : (e.altKey) ? limit : v + 1);
}, true);
td.addEventListener("mouseover", function(e) {
@@ -99,17 +104,15 @@ var listenForValuesFromRows = function(rows, values, limit) {
});
};
-var listenForModifiers = function(modifiers, values) {
+var listenForModifiers = function(modifiers, modifiedValues, values) {
modifiers.forEach(function(modifier, i) {
+ var setValue = function(v) {
+ modifiedValues[i] = v;
+ modifier.setAttribute("modified", v);
+ };
+
modifier.addEventListener("mouseup", function(e) {
- var mod = modifier.getAttribute("modified");
- if (modifier.getAttribute("modified")) {
- modifiedValues[i] = undefined;
- modifier.setAttribute("modified", false);
- } else {
- modifiedValues[i] = true;
- modifier.setAttribute("modified", true);
- }
+ setValue(parseInt(modifier.getAttribute("modified"), 10) > 0 ? 0 : 1);
});
});
};
@@ -124,7 +127,7 @@ var listenForBpmChange = function(bpm, el, form) {
};
el.addEventListener("blur", updateBpm, true);
-
+
form.addEventListener("submit", function(e) {
e.preventDefault();
updateBpm();
View
69 script/funklet.js
@@ -1,5 +1,3 @@
-/* run the program */
-
var originals = copyArray(values);
var length = values[0].length - 1;
@@ -12,23 +10,27 @@ var bpmMeter = getElement("bpm");
var line = getElement("line");
var width = diagram.clientWidth;
+// sample names
var names = ["hat", "snare", "kick"];
-var buildNames = function(a, b) {
- return b.map(function(i) { return a+""+i })
-};
+var buildNames = function(a, b) { return b.map(function(i) { return a+""+i }) };
+
var sampleNames = (["foothat"])
.concat(buildNames("hat", [1,2,3,4]))
.concat(buildNames("ohat", [1,2,3,4]))
.concat(buildNames("snare", [1,2,3,4]))
.concat(buildNames("kick", [1,2,3,4]));
-var modifiers = writeModifiersIntoTable(length+1, diagram);
var modifiedValues = [];
+mods.forEach(function(mod) {
+ console.log(mod);
+ modifiedValues[mod[0]*4 + mod[1]] = 1;
+});
+var modifiers = writeModifiersIntoTable(length+1, diagram, modifiedValues, values[0]);
var rows = writeValuesIntoTable(values, diagram, names);
var bpm = { value: parseInt(bpmMeter.value, 10) };
-listenForModifiers(modifiers, modifiedValues, 4);
-listenForValuesFromRows(rows, values, 4);
+listenForModifiers(modifiers, modifiedValues, values);
+listenForValuesFromRows(rows, values, 4, modifiers);
listenForBpmChange(bpm, bpmMeter, getElement("bpm-form"));
var context = new webkitAudioContext();
@@ -37,7 +39,7 @@ var left = 5;
getBuffersFromSampleNames(sampleNames, context, function(buffers) {
playSampleWithBuffer(context, buffers.kick4, 0, 0); // start the audio context
-
+
var interval;
var i = 0;
@@ -54,32 +56,51 @@ getBuffersFromSampleNames(sampleNames, context, function(buffers) {
rows[j][last].className = "td";
rows[j][i].className = "td current";
var buffer = buffers[prefix+""+volume];
- if (j === 0 && volume !== 0 && outstandingOpen) {
- outstandingOpen.noteOff(0);
- outstandingOpen = null;
- playSampleWithBuffer(context, buffers.foothat, 0, 1);
- }
-
- if (j === 0 && modifiedValues[i] && volume !== 0) {
- buffer = buffers["o"+prefix+""+volume];
- outstandingOpen = playSampleWithBuffer(context, buffer, 0, 0.85);
- } else {
+
+ if (j === 0) { // hat row, more complicated
+ var modified = modifiedValues[i];
+ var modifiedBuffer = buffers["o" + prefix + "" + volume];
+
+ if (outstandingOpen && (volume || modified)) {
+ outstandingOpen.noteOff(0); // kill the ringing hat
+ oustandingOpen = null;
+ }
+
+ if (volume) {
+ if (modified) outstandingOpen = playSampleWithBuffer(context, modifiedBuffer, 0, 0.85);
+ else playSampleWithBuffer(context, buffer, 0, 1);
+ } else if (modified) {
+ playSampleWithBuffer(context, buffers.foothat, 0, 1);
+ }
+ } else { // bass and snare
(volume !== 0) && playSampleWithBuffer(context, buffer, 0, 1);
}
+ // if (j === 0 && volume !== 0 && outstandingOpen) {
+ // outstandingOpen.noteOff(0);
+ // outstandingOpen = null;
+ // playSampleWithBuffer(context, buffers.foothat, 0, 1);
+ // }
+ //
+ // if (j === 0 && modifiedValues[i] && volume !== 0) {
+ // buffer = buffers["o"+prefix+""+volume];
+ // outstandingOpen = playSampleWithBuffer(context, buffer, 0, 0.85);
+ // } else {
+ // (volume !== 0) && playSampleWithBuffer(context, buffer, 0, 1);
+ // }
}, 0);
i = (i === length) ? 0 : (i + 1);
};
- var metronomeGraphicback = function(lag) {
- //line.style.left = left + "px";
- };
-
var start = function() {
- interval = runCallbackWithMetronome(context, bpm, 4, metronomeClickback, metronomeGraphicback);
+ startButton.style.display = "none";
+ stopButton.style.display = "block";
+ interval = runCallbackWithMetronome(context, bpm, 4, metronomeClickback);
};
var stop = function() {
+ stopButton.style.display = "none";
+ startButton.style.display = "block";
clearInterval(interval);
};
View
31 style/style.css
@@ -230,11 +230,32 @@
.tr.modifiers .td-holder {
height: 15px;
border-right-color: white;
+ font-weight: bold;
}
-
- .tr.modifiers .td[modified="true"] {
+
+ .tr.modifiers .td {
+ position: relative;
+ }
+
+ .tr.modifiers .td .plus {
+ position: absolute;
+ top: -9px;
+ left: -1px;
+ font-size: 21px;
+ display: none;
+ }
+
+ .tr.modifiers .td[stick="true"][modified="1"] {
background: #333;
}
+
+ .tr.modifiers .td[stick="false"][modified="1"] {
+ background: white;
+ }
+
+ .tr.modifiers .td[stick="false"][modified="1"] .plus {
+ display: block;
+ }
#controls {
margin-top:50px;
@@ -246,6 +267,12 @@
border: none;
font-size: 24px;
color: #333;
+ float: left;
+ width: 33px;
+ }
+
+ #stop {
+ display: none;
}
#bpm {

0 comments on commit 36d2b16

Please sign in to comment.
Something went wrong with that request. Please try again.