7. März 2017 // von Russell

Introducing: The Woodpicker

Need some new drum sticks? Try the new Woodpicker app at thomann.de/gb/woodpicker.html. Or try is at thomann.de/gb/woodpicker.html because its more fun choosing Baguettes than Drumsticks :-D

The new Woodpicker is a drumstick finding tool built to help usera quickly compare technical and playing characteristics of all drumsticks used for drumkit playing sold on Thomann.de. This blog post will give a quick overview into some problems drummers face when shopping online for drumsticks and how the Woodpicker attempts to solve these issues.

Built For Drummers

This tool is primarily developed for drummers to use. Because of this, there are a few components (and jokes) that might not be immediately obvious to a non-drummer/non-musician but are really appriciated by the target audience.

There are the practical components for drummers:

And just some drummer inside jokes:

The Woodpicker sets out to optimize a drummers experience while looking for a new stick. In addition to the standard search criteria musicians look for when buying products online such as price and availability, drummers often look for additional musician specific criteria which is often unavailble online. However, we've succeeded in quantizing these specifications with the use of good old fashion prototype inheritance and photo analysis.

"Standard" Drumstick Sizes Suck

Although there are "standard" sizes for drumsticks like 5A or 7A, the physical properties of these sizes actually greatly vary from one manufacturer to another. These "standard" sizes actually have a long history dating back to from the first days of drum manufacturing but no longer strictly apply to every stick by every manufacturer (the "A" apparently stands for Orchestra because Mr. Ludwig thought an "A" looked better than an "O"....that's not confusing at all...)

This lack of standards creates a practical problem for beginner drummers whom have been instructed to "buy a 5A stick" from a teacher who grew up playing music when these standards were set. "Traditions in music need to be followed!" chides the seasoned music teacher. We tend to agree, but what stick should a starting student buy from Thomann that are '5A'? We believe the customers should have freedom of choice in brands while still following music traditions.

Just Generalize "Standard" Characteristics

In the Woodpicker, we solve this by taking the features of a prototypical "standard size" stick and generalizing it accross all of our manufacturers. In this way, we allow for more options when a user desires a '5A' stick.

As you can see from the results, despite there being no search criteria based on title of the drumstick, 33-50% of first page results have the "standard" size in their title. More interesting are the results that do not have the name in the title such as the Dave Weckel Signature stick. It seems his stick is not so different from the default 5A stick!

Most eCommerce shops will list the information that ships with the drumsticks on their website. These are typically price, tip/body material, manufacturer, length, and diameter. After some research, however, we found that there are some characteristics drummers seek when choosing an drumstick that are missing. To read more about what charateristics are imporatant to a drumstick, check out this article from percussionsource.com

Can You Measure Punch?

Punch is one of those qualities you can instantly feel and hear in a drumstick. Put another way, it is the forcefulness with which a stick will naturally fall during a drumstroke. For hard rock and metal, you want a stick with a high punch, but for jazz you probably want a lower punch. Unfortunitely, there is no standard recognized unit for punch (maybe Pascals?) and there is certainly not one provided by the manufacturer. This makes it relatively difficult to compare the punch of one stick to another on an online shop.

But what is punch? At first glance, we may be inclined to say that it is simple the weight of the stick, but it is not as simple as that. To answer this question and explain the solution applied to the Woodpicker, we first need to go over some terms.

Aside: Drumstick Terms: Folcurm, Shoulder, and Punch

A drummer will tell you, there is this sweet spot on a stick where the weight is evenly distributed and you get a nice rebound and overall feel from your drum strokes. This point is commonly known as the Fulcrum point (to find it on a stick, try this video or try finding the point where you can balance your stick on one finger). This point varies from stick to stick and there are many factors that determine where the Fulcrum point is and even once found, it may not be 100% correlated to how much punch a stick has depending on where the drummers chooses to grip the stick.

From a physics standpoint, a perfectly cylindrical stick (without a tip) would have a Fulcrum point directly in the center and the weight on both sides of the Folcrum point would be equal. As the distance of the shoulder from the tip increases, the overall weight of the stick would decrease (fun fact: the volume of a cone is actually 1/3 the volume of a cyclinder...Math). Put another way, the farther the shoulder is from the tip, the lower the overall weight of the stick is and therefore the lower the punch is for that stick compared to a stick of the same weight.



Although punch is to some extent a subjective trait, we've concluded that it is directly related related to the Folcrum point of a stick relative to the sticks entire length and material. For the Woodpicker, can calculated te Folcrum point of a stick using the following information:

  1. Length of stick
  2. Distance of Shoulder from tip
  3. Shoulder Angle
  4. Tip Volume
  5. Tip Material

The Shoulder is the part of the stick where the stick begins to taper or narrow to the tip. The Shoulder Angle is calculated based on the diameter of the stick when the shoulder starts and the diameter of the stick at the tip. Some examples:

So now that we have determined visual way to locate a sticks punch, we are one step closer to calculating this unitless, subjective characteristic.

You Can Measure Punch via Systematic Image Analysis

One thing that Thomann has that many other companies do not have is an awesome team of photographers who have assembled a large corpus of product images in nearly identical positions. This gives us the unique ability to perform reliable photo analysis of one product to another based soley on their photo.

Using a custom photo analysis tool built in Visual Studio, we took tiny horizontal slices of every picture to determine where the shoulder starts, the shoulder angle, and the tip volume of each stick. The weight, tip material and length are given by the manufacturer already, so we didn't have to calculate this. We then took this data along with the overall weight of the stick (given by the manufacturer) to assign each stick a "punch".

Now that we have a punch for each stick, we can rank each stick based on the punch of other sticks and get its percentile from 10 to 100 (cause nobody wants a stick with 0 punch...). Now we have a way to compare a unitless subject term between drumsticks!

So Much Info, Much Little Time...Wow

It's a constant challenge to enable a user to discover similar products on your site to the one they are currently looking at. What is it about the product that they would want in another product? The Woodpicker was built to address this issue by retreiving drumsticks that we match user settings or a "reference stick". However, we don't want to keep the customer in the dark about WHY these results were retrieved.

The target audience of this tool are highly specialized users (insert drummer joke here) and they want more information than the average eCommerce user. They are trying to purchase something that will literally be an extension of themselves when expressing their emotions through music. It's not something we take lightly.

After extensive research (consisting mainly of talking to drummers with our mouths full in the t.kitchen) we concluded that drummer use the following traits most when comparing drumsticks:

  1. Punch
  2. Diameter
  3. Length
  4. Rebound
  5. Weight
  6. Speed

Now we are faced with the classic web developer problem: how to convey extra information about something to a user at easily as possible. We could just write out a bunch of numbers and text in a really small font in each result, but from a UX perspective that would be just aweful. This looks like a job for a graphic!

Solution: Graphic Representation of Quality Percentiles

To compare key qualities of drumsticks sold on Thomann.de relative to other drumsticks, we dynamically generate SVGs based on the 6 characteristics listed above. We rank each quality (10% - 100%) when compared to other drumsticks sold on thomann.de. For example, the "Rohema Start Sticks" have a diameter of 13.5mm and rank 25% in the diameter field. Chances are, a drummer doesn't care about getting a stick with a 13.5mm diameter, but just wants a stick with a diameter like the "Rohema Start Sticks" or just wants a stick as similar to that stick as possible.

When comparing a product with the purpose of buying a similar product, it helps a user more to know how relevant characterstics compare to other similar products than actual mesaurable qualities.

In addition to UX reasons, by limiting scaling and clipping various qualities to percentiles from 10% to 100%, it is significantly easier to make more consistent and instantly understandable graphics than with vastly varying data types. How does a length of 365mm compare to a diameter of 13.50mm? It doesn't really....but comparing a length of 10% and a diameter of 25% is waaaay easier (25 - 10 = 15 | right?). This is a much more consistent way to compare characteristics that would otherwise be nearly impossible to compare.

In the previous Woodpicker, we used an external script to pregenerate all of the hexagons displayed in the results. However, for the new one, we generate them on the fly using SVGs rendered in React. This is a snippet from the code use in the Woodpicker:

class Polygon extends React.Component {    
    //---------------------------------//
    //  generate 'points' using Maths  //
    //---------------------------------//
    return (
            <svg viewBox={`${viewboxMin} ${viewboxMin} ${viewboxMax} ${viewboxMax}`}
                className="polygon" xmlns="http://www.w3.org/2000/svg">
                <polygon className={className} points={points}/>
            </svg>
        )
    }
}

SVG has almost perfect support across browsers and is really elequent when used with React. The <polygon /> component used allows for a wide range of shapes to be rendered. We could, in theory, change it to a pentagon or septagon with relative ease if we choose to add or take away a characterstic. Also, because it is SVG, it can be styled using CSS and animated using JS which enables more 'seperation of concern' approach than would be possible using pure Javascript or an HTML canvas.

Next Post: Tech Specs in Depth

Short teaser for my next blog post where we take a look at how components were built for this tool in React to be highly customized while also maximizing reusability. We'll look at the application layer of the Woodpicker to see how React components are nested in order to localize relavant parts of the global state.

Verwandte Blogposts