How did I make “Music Can Be Fun”? Part 1

Thanks to Microsoft for holding this HTML5 contest, it encouraged me to come out of my comfort zone from Flash into HTML5.  I guess there are a lot of Web/Flash developers are struggling to try HTML5 like I was. So, I would like to share my experience of building my first HTML5 app here as a former Flash developer and hope that it helps someone who really wants to learn it.


Get the best IDE you like

To get started with HTML5, I needed to find the best free IDE that suits me well. I tried different IDEs and I end up using Visual Studio 2010 express. Using VS to write javascript seems a bit heavy compares with other code editor like Notepad++ but I personally really like its excellent Intelligence (code hints) supports. It is all up to you to choose the IDE you feel comfortable with and I am not going to write an article on “Eclipse vs Visual Studio vs Aptana” here. Just try them all and pick the one you like.

Your own library

I guess every web developers use jQuery and to be honest, I just tried it after I completed my app and it is amazingly convenient for JS development and I should use it in my app to save up some time. But anyway, I used my own library for my app and it suits me just fine. Well, I am not a JS hero who can give a lecture to someone but if you are a beginner developer and want to improve your skills and become an amazing developer, one thing you really need to learn – to build your own library. Because when you build your own library, you will know what is it going on behind the mask. Just get started with building a loader or a tweener is always a good idea.



When I started thinking about the idea of the app, I immediately thought of using an ink effect I did in Flash but which is not the one you saw in the final “Music Can Be Fun”. It used Perlin Noise + Blur effect + Displacement effect to achieve some realistic ink effect. Then I began searching the functions or libraries I need online and I found a library - BitmapData.js by Peter Nitsch and a class – StackBoxBlur by Mario Klingemann. Then I modified their codes and create my own displacement class, it works just great but the performance is just too slow because it takes time to draw large imageData on the canvas. I got less than 10 fps on a fix 720 x 480 size canvas. Then I decided to give it up but just using a simple ink effect which you can see on “Music Can Be Fun”.


Drawing a line with dynamic width

In order to make the realistic ink effect, I need to draw a line with dynamic width according to the mouse movement. As you all might know that, you can’t really draw a line from point A with 10px width to point B with 15px width using the native canvas function. So…. What is the solution?

1. You can get the points by tracking the mouse positions P2>P1>P0 and draw a line like in picture 1.

2. By angle P0P1P1b = angle P2P1P1b, you can easily find the positions of P1a and P1b. But you may notice that in order to find the angle P0P1P1b, you need P0, which means you can’t draw the point P0a and P0b until you track a new mouse position. So you can use the function Math.atan(P2y-P1y, P2x -P1x) to get an estimated angle before that.

3. As all you may know that, there are 2 kind of curves in HTML5  - Bezier and Quadratic. I use quadratic curve in my app because it only requires one control point to draw a curve which is easier and faster. To find the positions of those control points of p1b, you need to get the angle of P0b to P2b:

var distance =Math.sqrt((_p0ax - _p1ax)*(_p0ax - _p1ax) + (_p0ay - _p1ay)*(_p0ay - _p1ay));
var angle = Math.atan2(_p0ay - _p2ay, _p0ax - _p2ax);
_p1cax = _p2ax + Math.cos(angle) * distance;
_p1cay = _p2ay + Math.sin(angle) * distance;

In the Part 2, I will talk about the interface and the other visual effects I used on “Music Can Be Fun”.

{ 1 comment to read ... please submit second! }

  1. Your source code and your work are very inspirational.
    Thank you for sharing this!

{ 0 Pingbacks/Trackbacks }

Leave a Reply

Your email address will not be published. Required fields are marked *

9 + three =

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>