Comments
Silverlight 4 Guitar Tuner
One of the cool new features of Silverlight 4 is raw access to the camera and microphone. This opens up a whole bunch of cool possibilities for software development. One of them which we explored was creating an online guitar tuner.
Microsoft unveiled a beta version of Silverlight 4 at PDC, you can grab it here if you don’t have it installed
I remember looking for something like this a few years ago when I couldn’t find my real guitar tuner. All I found were a bunch of tools which simply played back the right pitch, they would not analyze the actual recorded pitch from your guitar, which is what I was used to using. I found some shareware tools that would do this but I really wanted something quick that I could just browse to and tune my guitar, and not risk downloading some viruses or waste time installing something only to realize it doesn’t do exactly what I wanted.
With Silverlight 4, we can now do this. We simply calculate the spectogram of the frequencies comprising a short period of time (currently half a second) to find the fundamental frequency of the sampled sound.
My favorite tuner lately has been the one on my POD XT Pro, so we designed this to look like that.
To speed things up, we used a good FFT implementation found on CodeProject and simply adapted it to work with Silverlight.
We also added a little bit of silence detection which helps the Tuner show when there’s no input, ideally you’d have some settings for this and some more input feedback with something like a volume meter. This is disabled in the demo above, you can enable it at compile time. Grab the source here, and feel free to implement these things yourself!
Bump Mapping with Silverlight 3
Silverlight 3’s new pixel shaders feature allows writing full HLSL pixel shader effects which can be applied to any UIElement in the visual hierarchy. This allows for some of the usual UI effects like blurring and drop shadows but also opens up a lot of possibilities for creative uses.
We’ve implemented basic normal mapping and added a few other things which shows some of the cool new capabilities exposed by this new functionality including the ability to databind to ui components, use multiple brushes as inputs, and create some really interesting blending effects which are not natively available.
If you’re interested in how normal mapping works, read below for the specifics. Get the source here. Feel free to use it or modify it, please let us know if you do!
Grab the light icon on the top right and move it around to see how it affects the surface below. Use the sliders to change the lighting parameters.
Normal (or bump) mapping is a technique used to give a very detailed lighting effect on an otherwise flat image. The effect works by calculating the amount of light reflected at each pixel of the image. This value is then modulated (via simple multiplication) with the original color. This darkens the original pixel value in direct relation to how the light would reflect off the surface at that pixel. In order to understand how the light reflects off of a single pixel in the image we need to know the shape of the surface at that pixel. This is done by storing the normal vector for each pixel in another image. The normal vector is a unit vector (length of 1) pointing in the direction the surface faces at that pixel. The normal vector is three dimensional. This can be easily stored in an RGB image by simply compressing the three dimensions into each of the 8 bit channels. This image is called the normal map.
In order to calculate how the light reflects off a surface we use a mathematical operation called a dot product. The dot takes two vectors as input and returns a single value that describes how these vectors are aligned in relation to each other. This can be used for other useful things like calculating the angle between the vectors. In this case we’re just interested in this scalar value, it approaches 0 as the normals move close to 90 degrees apart. When the vectors have less than 90 degrees between them the value will be between 0 and 1, past 90 the values are between 0 and -1. When the vectors point at each other the value is 1, when they point away from each other it’s -1. This is perfect for describing the light reflected. We clamp the range at 0 since the negative values don’t really mean anything to us as any value of 0 or less just means that no light is reflected.
We use the surface normal as the first vector and the vector describing the direction from the light to the pixel as the second vector. We can calculate the direction of the light to the pixel by simple geometric point subtraction (the pixel’s point minus the light’s point). That’s basically all you need to do normal mapping. We’ve taken this example a little further by adding in some other parameters like attenuation for the light source, bumpiness, and over exposure which simulates a very bright light source.
For any inquiries feel free to
.
