Sunday, October 16, 2011

Red Black Tree Visualization using HTML5 Canvas and GWT

I created a sample app, which demonstrates HTML5 Canvas usage from Java through GWT. I think GWT is a great tool for migrating desktop apps into Web nowadays, especially for Java developers. So it's worth to give it a try.

Google has made great progress on migrating desktop apps into Web during last year. They propagated trend for HTML5 support and Javascript JIT compilers among modern browsers. So it's possible to run Quake 2 or CAD software directly in browser at decent speed.

Red Black Tree is a balanced BST tree. Details are described on Wikipedia.
You can run this sample app directly on appspot (it works on iPhone too :-) )
Sample code can be found here: Browse on GitHub.


Let's start from initialization.
First, we need to create Canvas element and add it to HTML. getContext2D is called to obtain drawing context.
We register a timer to redraw frames frequently:

So doUpdate is called every 50 ms and whenever redrawFrame is set to true, it redraws Canvas contents.
In autoplay mode, we call processFrame in while loop. So whenever redraw procedure takes too long, we will process frames without redrawing them. This won't slow down animation on low resources.

Then, we need to draw a tree. We use drawTree procedure, which is recursive and draws nodes along with contents and connections between them:

The best part is that we can do regular Java unit tests on Red Black tree to verify correctness of implementation:

6 comments:

  1. I just searching this kind of things in search engines. My searching was ending here. Keep up your good work. I bookmarked it for general updates.
    html5 player| html5 video player

    ReplyDelete
  2. Usually I never comment on blogs but your article is so convincing that I never stop myself to say something about it. You’re doing a great job Man,Keep it up


    online idea lab

    ReplyDelete
  3. مدونة رائعة ، أحب هذا الموضوع. أحب أن هذا النوع من المنصات يسمح بنشر مثل هذه المدونات المتعلمة. لقد ناشدتك لنشر مدونة عن اريكه كنب حتى تزداد معرفة الآخرين.
    شكرا مع اطيب التحيات

    ReplyDelete
  4. That's a sure stuff but even you we had a chance to read some blog thingy, I have a recommendation for you all and it's Importance of SEO in Web Design. I believe you guys will fall for it totally.

    ReplyDelete
  5. Nice blog and informative, If you are looking for remote job and you have a skill in graphic designing, Development and Product Management you can check out TechKluster. You can also check out blog Agile Release Plan

    ReplyDelete