HTML5 Wordle Tag Cloud

This is a direct port of my AS3 Wordle Tag Cloud to HTML5. Please read my old blog post for some background.

Some technical notes:

• Thanks to Canvas' RenderingContext2D.measureText(), I can calculate size of the words off browser's stage.
• Initially, I was using Canvas as rendering stage for the tag cloud. However, it demands extra work to make the words interactive. So I decided to use normal block text with CSS3's transform/rotate. The result is texts are searchable and out-of-the-box hyperlinks.
• The position checking process may cause browser hang momentarily if run through all of the words. I have split the process of each word into each RequestAnimationFrame to avoid the script hang.

However, there is still room to improve, for example, enhancing the intersection check and using any angle rotation...

There you go! Check out the live demo and source code.

Fish Boids - Three.js Demo

This is my adaptation from the Three.js Birds Demo which was featured in the famous HTML5 Music Interactive Film The Wilderness Downtown.

The original birds demo was done by Mr.Doob based on the boids simulation. You can read more about behind the scene of The Wilderness Downtown and the flocks of birds simulation from his blog here. (Thank Mr. Doob for your awesome Three.js library and the nice bird demo.)

The significant adaptations that I made to this school of fishes simulation are: the fish objects are PlaneGeometry with bitmap texture; some tweaks to the boids' speed and movement to make them more fish-like; and making the fish wiggle its tail instead of bird wings' flapping.

This fish and the bird demos are used in my side-project for my friend's HTML5 portfolio.

Now, go see the demo. The source code can be found on Github.

A Cave, 3D Stereo Images & 2-State Looping Animation

When I visited this cave during the trip to the central provinces of Viet Nam. I wanted to capture it magnificence and beauty but the cave's texture was too complex to visualize its depth and space on 2D photos. I recalled this 3D photography technique and tried to take some stereo photos of the scenes (take 2 photos of the same scene from 2 slightly different position) and made them into 3D stereo animation when I get back.

Traditionally, these 3D stereo images are presented by a 2-frame animated GIF. But GIF images are not efficient for live photographs and they normally take up more bytes than JPG for large pictures so I decided to use CSS and JavaScript to reproduce the animation with JPG photos.

Basically, the JPG is set as background of a div which has dimensions of half of the image. JS will shift the background-position at intervals revealing half of the background one at a time. And here's the results.

During the making of the effect, I also explored its possibility with CSS3 animation and steps() function. The result is the same without any coding. But for the sake of compatibility for the audience, the said demo still use JS. I put the CSS3 solution on Dabblet for later reference of similar 2-state animation. Check it out.

Geany: open-source SublimeText for front-end developer

When I started doing JavaScript, I kept searching for an ideal JS code editor that is free, lightweight and fast just like FlashDevelop, my favorite ActionScript counter part. (In case you're wondering, I have made a Wine mod of FD4 and been able to run it on Linux). Most JS editors I tried were Java-based, heavy and code assistance is as not good as I expected.

Then I discovered SublimeText 2 and Geany. The former is commercial and the latter is opensource. Both of them are cross platform, lightweight, fast and has syntax highlighting for quite a number languages. For JavaScript and front-end stuff in particular, they both have some support for code hinting and auto completion but fairly limited.

Geany interface

Case Study: WebGL 360° Panorama

A 360° walk-through of my office. This is a case study with the ThreeJS 3D engine for HTML5 Canvas and WebGL. I have adapted the ThreeJS WebGL equirectangular panorama demo, making it fall back to Canvas renderer when browser doesn't support WebGL. The overlaying markers are DOM objects. There's some coordinates conversion between ThreeJS 3D world and 2D DOM. In this adaptation, there are 2 spherical panoramas so users can navigate and see more corners of the office. Just for fun and experimental purpose, some snowing effect added on the occasion of Christmas 2011.

Components used:
- ThreeJS WebGL equirectangular panorama demo
- Snowing effect by Seb Lee-Delisle

Finally, check out the demo and grab the source code.

Case Study: In2 Profile

This is a case study that my team set out to explore HTML5 / CSS3 but it is also served as pitch deck for my company's profile presentation. This one-page parallax scrolling website is inspired by the one of the 2010 buzzing HTML5 experiences, nikebetterworld.com. Everything was coded from scratch.

We developed 2 versions. The first version features usual parallax scrolling with arrow drawing effect using canvas. The second version is a revamped one with additional animation on the illustrating graphics. I also experimented CSS3 transitions effect on the menu and some buttons.

My role: JavaScript + HTML Developer, Technical Researcher

Technical features:

• jQuery (library)
• HTML5 Boilerplate (library)
• HTML5 Canvas
• CSS3 transitions