Thursday, September 11, 2008

A Simple Wave Generator In Silverlight

[ Updated for Silverlight 2 ]

I was building a simple waveform generator that will generate waveform for an equation containing sin, cos and tan. It will choose random color when drawing the curve and can draw one curve over another. The application in run looks like the following.

I cannot put it here as it wont fit in this width. See it here.

What is going inside......

The curve is actually a collection of ellipses of height and width 5. You can see it better if you draw a curve like tan() x sin().

I am trying to explain it from a top level (less detail) it step by step

1. We will have a stack named EqunList that will put the equation in string elements. For example it will store " sin" if you click sin button and then if you click + it will push "+" in the stack above sin.

2. Now when we click draw button the equation list will be converted from infix to postfix notation so that it eliminates the brackets and let us calculate the values of the equation easily.

3. It then chooses a random color for drawing the curve. Then it starts a timer that will put one ellipse every 15 milliseconds so that it seems the curve is been drawn slowly. We will talk about setting x and y coordinates (Canvas.Left and Canvas.Top respectively) of the ellipses shortly.

4. There will be a counter that will be incremented and after reaching a certain value (width of the drawing plane in pixels) will stop the timer.

5. Now the x value of the ellipse (Canvas.Left) will be incremented by 1 in each timer tick (It can be made higher but then the curve might not look very good). The Y value of the ellipse will be determined by evaluating the equation for an angle that will vary from 0 to 2*PI. Here the angle will be increased by 2 * Math.PI / 200 each time. ( It will actually creates a complete cycle in 200 pixels. Also the resultant value will be multiplied by 100. The reason of the multiplier is because otherwise the curve will have height of only 2 pixel in case of a sine wave. The curve will be drawn not from the top but from the middle of the canvas to take account the negetive values as well as positive values.

There are some minor tasks like disabling the buttons while one curve is drawn or clearing the equation after the curve is been drawn.

Here is the complete source code for it.

Please leave a comment if you have any doubt and also how to improve it. I am still inexperienced in programming field and have lots to know from you...

PS: BTW if you love music check out Madonna's new album Hard Candy. I am listening to the songs right now and they are excellent :)


Libu said...

Your last post about Chrome is wonderful and so is this post about the awesome SL app you have developed.

But the irony is that I can't run the app properly on Chrome. SL is not ready for Chrome yet it seems.
But your app rocks on IE.Cheers!!

Tanmoy Rajguru (Code name MRGNI) said...

Yh. It is not running in Chrome :(. But Chrome has already gain a fair percentage of browser market share and MSFT will be giving it support I hope. :)