Category Archives: Development

sBASSdrum: The Making of a Snare Drum

I will admit: I’m not very good at making snares yet. But perfection can wait for v0.2. 🙂

I’ve been reading over the very excellent Synth Secrets set of articles and learning about all the amazing ways engineers have figured out to make passable drum sounds with electronic equipment. I needed this information because I had never really thought of what a snare drum is and how to recreate one with synthesis. Worse yet, I’m basically working with simplified waveforms and envelopes. So, this insight from Gordon Reid’s writings is really helping.

OK, so what is a snare drum?

It is:

  • A wood shell (blue in the picture)
  • Metal rims
  • A top flexible membrane and a bottom flexible membrane (top head, bottom head)
  • A bunch of snares strapped to the bottom (springs)

How does it work?

  • You hit the top drum head (the “batter” head)
  • The air bounces around and forces the lower drum head
  • The bottom head slaps the snare springs
  • The snares pop off the back and then slap down, each part of the snare wires coming back into contact with the head again at different rates creating thousands of tiny popping sounds

And you know the result: a “tssshhh” snappy sound with possibly a little tone under that sound.

Let’s take a look at some of my favorite snares:

blog_snares_real2_1a

blog_snares_808_1a

blog_snares_real_1a

Simulating this in a drum machine is pretty amazing. If you were to physically model this it would probably take quite the computer to model each of the parts of the springs and the crazy reflections of the tiny snare slaps bouncing off of the sides of the drum head and reflecting back, further rippling back onto the snares themselves, … and so on.

But engineers have figured out a much simpler way of doing this in hardware:

  • The top head and bottom heads can be simulated with just simple triangle waves
  • And a noise generator can be used to take place of the snares

The resulting wave form looks like the typical diminishing funnel shape with a strong carrier tone and some noise throughout.

Then, there’s what I decided to do:
blog_snares_renoise
Breaking this down:

  • The 2 left columns are filtered and shaped white noise
  • The 2 right columns are shaped triangle waves

The first channel is plain white noise with a low-pass that falls off about 8.6KHz so its color is a thick “psshhh”. This is meant to simulate the snares longer ringing against the bottom head. The second channel is also white noise but it is a band-pass that peaks around 2.8KHz and its Q lets in both high frequencies up to maybe 12KHz and down to 300Hz. This one has a much quicker volume decay. The net effect of the two shaped noise waves is there’s a fairly gutteral “kshhh” around 3KHz (which is like the initial slaps of the snares against the bottom head) and has a pretty full frequency range so it sounds crisp. But since the first channel’s noise lasts longer than the second channel’s, it sounds as if someone were slow cranking down a low pass filter over time.

Next, the two triangle waves are tuned similarly to Reid’s tutorial: 180Hz and 330Hz. I make the 330Hz fall of quick and the 180Hz fall off slower. The effect of this that the 330Hz acts like the initial hit of the drum stick against the top head and the 180Hz acts like the main resonant tone of the snare drum.

Let’s check out how this all sounds:

And let’s see how it ended up looking:
blog_snares_mine_1a

sBASSdrum: The Making of a Kick Drum

What’s in a good kick drum? If you ask me, I think it’s:

  • At least 100ms, probably no more than 200ms
  • Light, sharp impact sound on the attack
  • Beefy sustain
  • Lowering of frequency over time

Let’s take a look at the raw waveforms some of my favorite kick drums:

blog_kick_1a

blog_kick_1a3

blog_kick_1a2

So, they all have similar traits. If you look up a spectral graph of one of the kicks it might look like this:

blog_kick_spectral-1a

As you can see, the first 0.05 seconds there’s a lot of business going on in all the frequency ranges. After that it seems to hover around somewhere between 100hz down to 50hz in a slow descent. I think why most people do this is because a natural bass drum works pretty similarly:

  • You step on the pedal
  • The pedal swings and slaps the bass drum head hard
  • You get an audible “smack” as the pedal contacts the head and a lot of energy is transferred into the drum
  • The air bounces around and pushes both the drum head and the drum front back and forth in a big slow oscillation
  • Then over time the energy is lost and the oscillation slows down along with the volume

Even when synthesizing a bass drum manually it just seems more natural to follow these rules.

So here’s how I made my bass drum. First, this is what it sounds like:

Let’s break this down into the components:

  • The click: this is faked out slap of the drum pedal against a drum head. Obviously, synthesizers don’t have a pedal or a drum head, but we’re so used to hearing it that it feels weird without it. Plus, it makes it audible on crappy computer speakers. Here I recorded the sound of me punching (yes) a receipt from Target with my LS-12 field recorder.
  • The initial reverberation: I like to do this with a sine wave that rapidly falls from a high frequency to 0hz. It makes a “pew” sound if it’s slow, or something more like a long “click” if it’s slightly longer. When mixed with the click it makes a nice audible “smack”.
  • The body: Again this uses a sine wave that falls but it does it slowly. I start it around C4 (261Hz) and let it fall down to C2 pretty quick (131Hz) and then trail off from there.

I made the sine wave in Adobe Audition (just a pure 261Hz wave) and then set it as instruments in Renoise:

blog_kick_renoise

I know most people can’t read Renoise format, but it goes like this:

  • Each vertical column you can think of as an instrument
  • The left two columns are grouped together
  • The far left is the “click” with a sine wave at C6 (~1Khz) and rapidly falls to 0Hz linearly
  • The middle is the “body” with a sine wave at C4 (~261Hz) and initially falls a bit probably down to about 150Hz then slowly falls after that.
  • The receipt sound is on the 4th track.

The two sine waves’ outputs are further modified by a parametric EQ which tries to accentuate the 100-200Hz range. One thing I’ve learned from testing: you never know what kind of speakers your listener will have and if you have a sine wave that is accentuated in the 60-150Hz range and the frequency is falling through that range, then you’ll most likely get a decent “whomp” out of it. The corollary is that that “click” and “receipt” sounds are much higher in the frequency range (above 300Hz) so on tiny cell phone speakers that have no bass response you will still at least get a small “pop” sound.

Anyways, let’s take a look at the wave form the 3 instruments made together:

blog_kick_2a

Lots of high frequencies in the front, an expanding “whomp” in the middle covering a big spectrum, and most of the energy is out by 0.25 secs.

Progress on the iOS drum app

A follower on Facebook asked how the viz is being done, it’s pretty simple actually, but you have to know about how things flow in the app.

The keys are just controllers. Instead of MIDI notes they fire off messages of “bass1” or “drumPad3”. The routine that handles that has access to the star “size” and bumps it up.

The starfield routine draws the stars with that new size, and over time shrinks the stars back to “normal” size. The stars are randomly added to the starfield and I do some simple trig to figure out what angle from the absolute center they are so as the stars accelerate towards the edges of the screen they at least are coming out radially from the center.

The starfield also clears itself on every frame, except when you push the throttle up. That changes it to darken on every frame by some %. At the top of the throttle it isn’t darkening much so you get to see all the previous frames, hence the zooming look to it.

Speaking of frames, I have a timer that goes off about 20 frames a sec. That timer redraws the starfield. It also tells the scopes to redraw.

The scopes in the left and right are looking at the output buffer for the actual audio being sent out the headphone jack. The left/right scopes are reversed, hence the mirrored pattern. The scopes are 2 separate UIViews and I’ve just told them to draw whatever is in the current audio buffer.

The audio buffer is being handled by Novocaine and I’m currently at about 12 ms, so it’s something like 500 samples.

The center “target” is actually the effects slider and when you drag it around that’s just a button being clipping in a UIView. There’s a permanent low/high-pass filter on the output signal and that effects slider just selects the algorithm and sets the Q and f0 parameters accordingly.

And the volume throttle is a UIView that’s inside another view. I’ve constrained it to only go up/down, so the outer view is working as a track.

Oh, and the whole starship cockpit is one very large PNG with a transparent cutout in the middle for the starfield. The buttons are each a custom UIButton that does things like turn on/off when you press them, or in the case of the upper right drum pad buttons they work as toggles.

PHEW.

Tonight’s small victory: sample conversion to 16-bits

tonights_test

Oy, Objective C is kicking my butt. 🙁 It has been so long since I have had to deal with pointers I am very rusty with pointer arithmetic. But tonight was a victory of sorts.

I loaded up a snare PCM sample I’m using as a test sound for a (hopefully) upcoming iOS app. It is a stereo, 32-bit WAV file, 44.1 KHz, and 94636 bytes. The other night I thought my calculations were slightly off, but that’s just because the first 44 bytes are just a WAV header—I’m sure I knew that at some point. So that means each sample frame (a frame having all the channels’ values at a point in time) is 8 bytes: 4 bytes for the left channel, 4 bytes for the right channel. The challenge was to convert this into a normalized format in the iPad’s memory.

So some light math needed to be applied to allocate 2 buffers: one for data coming off of disk and one for the converted sample. The thing is, AVAssetReader reads in chunks. So it took me a bit of searching to find out how to use NSMutableData. A conversion method steps through each sample in the input buffer and writes it to the output buffer but converted to 16-bits. (Yay, bitshifting!)

I did some calculations in Adobe Audition to see if my numbers were sane: it’s 0:00.268 sec long. Checking: (94636 bytes – 44 bytes)/44100/8 turns out to be 0.268117914. Bingo. So the size of the file and playtime are correct. And, since that’s a 32-bit file and I’m turning it into 16-bit in memory, I should be allocating a buffer that is half of 94592 bytes, and it turns out I do in fact come up with the correct number: 47296.

CSS3 columns demo

The addition to CSS3 removes so much pain from doing multicolumn layouts:

Dynamically deliver vertical action items with interoperable bandwidth. Appropriately drive client-centric systems for real-time process improvements. Proactively engineer client-centric technology and goal-oriented intellectual capital.

Competently enable virtual data before corporate initiatives. Authoritatively impact team building leadership skills without best-of-breed total linkage. Collaboratively unleash principle-centered opportunities and sticky e-tailers.

Assertively facilitate market positioning internal or “organic” sources with cross-platform methodologies. Conveniently leverage existing extensible sources after superior best practices. Dramatically empower high standards in interfaces vis-a-vis cross-media methods of empowerment.

Efficiently benchmark an expanded array of portals rather than prospective results. Monotonectally revolutionize interactive web-readiness without pandemic services. Dynamically envisioneer timely resources vis-a-vis cross functional ideas.

Authoritatively e-enable cooperative content whereas just in time relationships. Uniquely fashion low-risk high-yield users without vertical expertise. Dynamically facilitate just in time mindshare with sustainable testing procedures.

Collaboratively envisioneer prospective solutions after 24/7 channels. Rapidiously simplify mission-critical data via leveraged collaboration and idea-sharing. Proactively provide access to timely action items after real-time processes.

Dynamically deliver vertical action items with interoperable bandwidth. Appropriately drive client-centric systems for real-time process improvements. Proactively engineer client-centric technology and goal-oriented intellectual capital.

Competently enable virtual data before corporate initiatives. Authoritatively impact team building leadership skills without best-of-breed total linkage. Collaboratively unleash principle-centered opportunities and sticky e-tailers.

Assertively facilitate market positioning internal or “organic” sources with cross-platform methodologies. Conveniently leverage existing extensible sources after superior best practices. Dramatically empower high standards in interfaces vis-a-vis cross-media methods of empowerment.

Efficiently benchmark an expanded array of portals rather than prospective results. Monotonectally revolutionize interactive web-readiness without pandemic services. Dynamically envisioneer timely resources vis-a-vis cross functional ideas.

Authoritatively e-enable cooperative content whereas just in time relationships. Uniquely fashion low-risk high-yield users without vertical expertise. Dynamically facilitate just in time mindshare with sustainable testing procedures.

Collaboratively envisioneer prospective solutions after 24/7 channels. Rapidiously simplify mission-critical data via leveraged collaboration and idea-sharing. Proactively provide access to timely action items after real-time processes.

A good explanation is in the Mozilla docs. The main thing is this one property:

column-count: 3;

(Vendor prefixes required, unfortunately.)

Solving iPhone rendering issues: stopping scaling, restoring inertial scrolling

There’s nothing like wasting a Sunday morning searching the Internet for solutions to web page rendering issues on mobile devices. 🙁

Stopping an iPhone from resizing web page text

Nothing is more frustrating as a designer/developer to see a neatly laid out web page resize its font size when you don’t expect it. I thought this line of HTML would have solved the problem:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

No. Apparently you have to also add this CSS in:

body { -webkit-text-size-adjust: 100%; }

Adding inertial scrolling back to overflow:auto or overflow:scroll DIVs

It is a weird feeling to have a graceful UI somehow feel “stuck” when inertial scrolling gets disabled. Apparently setting the CSS property overflow to auto, scroll, scroll-x, or scroll-y will turn it off. This is how you put it back:

-webkit-overflow-scrolling: touch;

Ugh.

 

Resizing (to fill) and cropping images with Paperclip :convert_options

It has been quite a while since I’ve used the Paperclip gem by ThoughtBot. I have a very simple model called Photo which has an image attribute acting as the attachment:

class Photo < ActiveRecord::Base
  attr_accessible :image
  has_attached_file :image,
    styles: {
      thumbnail: '200x200^',
      preview: '800x800^'
    },
    convert_options: {
      thumbnail: " -gravity center -crop '200x200+0+0'",
      preview: " -gravity center -crop '800x800+0+0'"
    },
  default_url: "/images/:style/missing.png"
end

For some reason I couldn’t remember how to resize images to fit neatly within a square, but after fiddling around this totally works:

  • 200×200^: This sets the output geometry to 200×200 pixels but the shortest side will be 200 pixels.
  • convert_options: This adds the extra options to:
    • -gravity center: First center the image. It’s important this is first!
    • -crop ‘200×200+0+0’: Then crop the image into a 200×200 square with 0,0 as the offset.

Underscore.js’s debounce() is a great way to kill that double-click

Your mission: make sure your users don’t double-click a form button, but also don’t forever deny them future clicks.

This is a throttling problem really. And recently I was working on a UI element that was just being clicked way too often, my suspicion being the users were double-clicking it. I was going to do what I normally do: set a timeout on the click handler that would prevent more than 1 click being fired during a time period. But that just ends up making me write more code—I’d rather use a library!

Turns out that I’m using Underscore.js a little bit more these days and there is a built-in utility called debounce. It pretty much does exactly what I want it to do. As a comparison, there’s a similar function called throttle, but that still fires at least one more click event. Check this example out: