** Warning: Can be CPU intensive. Safari / Chrome for best results. If you do not have a fast CPU, use less effects in the checkbox options.

Check out a video playing with this.

[Music Notes]
After a while, you may find that you’re creating some chinese-like, malay-like or javanese like music.

This is a clone of the fairly expensive electronic but a fairly cheap music instrument call the Tenori-On made by Yamaha.

Anyway, this version is closer’s to Andre’s implementation call ToneMatrix, a flash implementation using notes of a pentatonic scale, which allows you to pleasant sounding music evening if you click on it randomly. Just youtube it, and you can find how many others have created music with the Tonematrix.

[Geeknotes]
First of all my implementation differs with using a HTML 5 Canvas to render the graphics instead of flash.

I use the the Sion Library for the audio, creating a JS to AS bridge to generate sounds. Howeveer, with the still-in-progress Mozilla Audio Data API, one can easily modify this program to run fully in javascript soon.

My initial visual effects was less than satisfactory compared to Andre’s implementation and I got stuck at creating the “ripple effects”. I first tried the ripple algorithm used in my previous experiment, but such animation would be almost usuable and very likely to hang the browser.

After a period of rest, while reading on perlin noise in canvas, I started having some inspirations for this project again.

Its then struck me that I could implement this with a simple particle system with gradients.
I was also inspired by the use of gradients, alpha and composites stumped upon this while looking up collaborative programming.

So right now, although its not all perfect, but its a big improvement from the past.

Go ahead, have fun, create some music, hack the code, or provide some suggestions.

p.s. I found the layout look like an iPad after I used curve borders, not that I wanted to replicate the iP* devices.

Other WIP screenshots here.

(a cross post on my facebook note)

This is a follow up to my previous geek note “Say Hi to Instant Barcodes”. The quick story here: nothing too fanciful, just a simple html 5 mashup for instant qrcodes using javascript, jquery, and Kazuhiko Arase qrcode jscode. See http://jabtunes.com/labs/qrcode.html

The advantage for using QRCode over my previous barcode generator is that this 2d barcode packs more information in it, specifically for this mashup implementation, 119 binary characters with 30% recovery rate (using up to QR Code version 10, can be much more if we can implement till version 40). Think of it as maybe, twitter on a picture!

A picture can tell a hundred words, and this tiny qrcode does store a hundred characters.

Yes, the barcode scanner on android works with 2d barcodes.

And I think this is also a good way to send urls, telephone numbers and other contact to each other. With a lack of a standard vcard or bluetooth protocol, I think qrcodes should work much better!

Feedbacks would be great! and yes, you can download some codes and send me messages in QR Codes! Goodnight!

p.s. Tested on all modern browsers (& ie9 beta) except mobile browsers (pls let me know if it works!).

Think about it, in case you don’t think its cool right now, is that you only need notepad, a recent web browser and a few lines of code to do cool stuff work with 2d graphics without compilation. Take an example, you can create a greyscale image from a color photo into without photoshop or other software as see in pixastic.

In this post, I will outline how easy it is to code with javascript and canvas to simulate water ripples, along with some issues encountered. After I discovered this old water algorithm (during the DOS era I suspect) on creating waves, I thought why not try this with HTML Canvas, and so I did.

STEP 1. Creating a canvas element.
This can created easily with javascript, or just add some html code into the body

<canvas id="jripples"></canvas>

STEP 2. Load an image with JS when document is loaded for which we can use the jquery $(document).ready

$(document).ready(function(){
init(); // Run stuff when document is ready.
});

Here’s the code to load an image


var img = new Image();
img.src = "hello.jpg" // path and filename of image
img.onload = function() {} // run the next portion of code when the image loads


STEP 3. Draw the image onto the canvas


canvas = document.getElementById('jripples');
$('#jripples').width(img.width); // We set the canvas width and height with jquery
$('#jripples').height(img.height);
canvas.style.height = canvas.height = img.height ; // Set the canvas size to the image
canvas.style.width = canvas.width =img.width;

ctx = canvas.getContext("2d"); // Get the 2d drawing context
ctx.clearRect(0,0,canvas.width,canvas.height); // Clear the canvas
ctx.drawImage(img, 0,0,canvas.width,canvas.height); // Draw the image

Just a caveat though, to get or manipulate pixels from an image, the image needs to be loaded from the domain or would result in a browser security violation.

STEP 4. Build the data structures behind the wave
orginalData = ctx.getImageData(0,0,canvas.width,canvas.height).data; // The array of pixels for the image
myImageData = ctx.getImageData(0,0,canvas.width,canvas.height); // Modifications of pixels
buffer1 = []; // Create new array for the image buffer
buffer2 = [];
// orginal data length is 4 times the pixel dimensions since they store RGBA (red,green, blue, alpha)
for (var i=0; i buffer1[i] = 0;
buffer2[i] = 0;
}

STEP 5. Creating ripples (the wave algorithm) function

function processWater(source, dest) {
for (var i=imagewidth; i< source.length-imagewidth; i++)
{
// check for bounds
var xi = i % imagewidth;
if ((xi==0) || (xi==imagewidth-1)) continue;

}
}

while the original article explains how this works, this article explains it in another simpler manner

Two height maps are used to store the current and previous states of the water.
Each frame you will toggle between state maps.
For each array element in the current state array:-
Look at the neighbouring pixels from the previous state, i.e. above, below, left and right. Take the sum and divide by 2. Because we are dividing by 2 a right-shift will work beautifully.
Now subtract the value in the current state map.
If we left it like that the ripples would never subside so we need to diminish the strength of the ripple every pass. The most realistic way of doing this is to reduce the resulting height by a fraction of itself. Once again we can use right-shift to optimise this.

Note that I ensured the loops avoid any edge bound pixel to prevent wrap arounds.

STEP 6. Render the new image with waves.
function texture(buffer) {
var xoffset, yoffset;
for (var i=imagewidth; i {
// check for bounds
var xi = i % imagewidth;
if ((xi==0) || (xi==imagewidth-1)) continue;

}

This estimates the pixel offset due to refraction of water (read more on Transparent Surface Ray-Tracing) based on height of the wave and copies the pixels from the orginal array into the new imagearray object. This imagedata is returned to the 2d object using putImageData to be drawn.

STEP 7. Call the rippling function in a timer
rippling = setInterval(ripple, 50); // This calls the ripple function every 20 times a second

STEP 8
We can calling another timer to add rain
raining = setInterval(function() { // random rain
var randomX = Math.round(Math.random() * canvas.width);
var randomY = Math.round(Math.random() * canvas.height);
buffer1[randomY*imagewidth+randomX] += Math.round( Math.random()*-500);
},300);

STEP 9. Add more raindrops/ripples reactivity to mouse clicks. We use jquery to add mouse listeners quickly.
$(canvas).mousedown(function(e) {
var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top ;

}).

STEP 10. Provides FPS(Frames per second)
setInterval(function() {
$('#jdebug').html(fpsCount + " fps");
fpsCount= 0; // recent
},1000);

This isn’t the most accurate way to calculate FPS, since the callback may not be accurate in itself. Rather, one should try getting the actual time subtracted from the last elapsed time to calculate the fps.

Enjoy. Here’s the link to javascript ripples demo
Remember that you may need to upload your html and images to a webserver to test (or change your browser security settings).

Other Considerations.
This run on all modern browsers (Firefox, Safari, Chrome, Opera) except IE due to the lack of support with Canvas. While the Excanvas provides some compatibility, it does not provides get/putImageData calls. Until IE9 releases, flashcanvas pro may solve this compatibility issue.

From my observations, the bottleneck seems to be when the browser render the image after the putImageData javascript. Right now firefox seems to be able to render 2x faster than chrome, and the self proclaimed fastest browser on earth, Opera, seems to renders about 3 times faster than chrome (to 100fps on small images).

While this wave algorithm may be efficient when there are many waves, this method may not be as efficient when there are few waves on large images/canvases. Even a image of 640 pixels can hang the browser (be warned).

One simple way to speed up the waves is scale down the image. If putImageData is the bottleneck, then we can hope that the browser would optimize these soon. (with Direct2D just implemented for firefox nighties, maybe soon will be soon!) Other interesting alternatives would be to implement WEBGL or O3D which uses the C++ stack or GPU to speed up the rendering, although these are not widely supported right now. The better idea, I imagine, is to implement another algorithm which renders the ripples from its wave source, which would probably run faster on large images with few waves.

Finally, creating ripples seems to be a classic challenge and if you were to do a simple search, would be able to find implementations for DOS graphics, OpenGL or other 3d Programming, Java graphics, and for the most recent implementations, Processing applet and Flash/AS3. One can even find this effect on desktops with dreamrender or beryl/compiz fuzion. Still this seems to be the first implementation with javascript/canvas other than one other on the net have seem to created a “ripple effect” with canvas, which is not really similar.

School work along other commitments is keeping me really busy, besides this is not even part of any computer graphics classes I required to take. So while there are perhaps more enhancements and optimizations that can be done, I’ll be leaving that up to you readers

The long story: I went up to the piano with one day without anything in mind but started playing some tunes when i least expected it. I quickly grab a pen and paper to jot down some notes in case I forgot them and recorded this song on my netbook, everything done almost in a sitting.

Of course writing it down and typesetting it actually takes a lot more time. typed the piece of music using the software MuseScore 1.9.6 beta, a great free music notation software. I later save it as a lilypond format which was more familiar with me for tweaking the nice finishing touches for music scores layouts with the help of jedit lilypondtool.

Like several of my songs, I think it sounds a little nostalgia (like “Who am I” which Reuben Kee arranged and used for his musical). Then again, I wasn’t really expecting to compose any thing on the piano that day which prompted me to title it “Huh?”.

I got a mixed bag of reactions to the piece. Some say its sounds classical, some says pop, some says a mixed. Some thinks it from Chopin Ballet, or Granados Spanish dance - Andaluza, or a little Japanese, Korean, Amelie soundtrack sounding, some feels its too happy, too sad, etc. You get the idea. I think much would be coincidental and subjective to the listeners.

Some suggestions by my friend Gerald - playing the harmony with broken chord pattern instead of the oom-pah bass will make it sound “more fluid”, and “less static”. He also suggest arranging the melody on the flute with a harp accompaniment in broken chords, in which after I just found out from my harp friends its difficult for lever harps to play keys with 5 flats.

Have fun trying out this piece out and let me know if you have other comments.

p.s. Since I’m on the topic of music, do let me know if you want to attend the nusso concert on 19 march friday evening 2010 at VCH. Details here and here.

update: the audio generated by musescore can be heard here. http://soundcloud.com/zz85nus/huh-1
or http://soundcloud.com/zz85nus/huh-recording for the original recording.

To try it, click on the screenshot above. Wait for files to be completed loaded before clicking and dragging to write a chinese character in correct stroke order (top left to bottom right, outer to enclosed), and the suggested words would appear in the right box. Right now the recognition algorithm is pretty rigid, you need to have the exact amount of strokes in an almost perfect sequence and writing to get the correct recognition. As mentioned, its pretty experimental, but it shows how fast javascript can be, character lookups are usually within 1 second, often below 100ms. The biggest bottleneck right now is parsing of the huge data files (usually the case for javascript engines these days), which may be solved with an ajax call to the server instead of caching all locally. Okay, I’m going into more implementation details so non-technical readers can do some skipping.

So basically this application is a modified and really simplified port of Kiang’s Hanzi Lookup Java Application to Javascript.
For example, I used my javascript port of shortstraw (shortstrawJs) for substroke recognition. This works well in many situations and badly for many (when strokes are short, etc). There ought to be better input filtering, and better matching against the database. Right now, all the substrokes are flatten, ignoring the exact strokes the user make. There’s currently isn’t fuzzy matching, or partial matches which gives lots of room for improvements. Of course, if you are able to, you can be grab the code by viewing source and trying making changes.

Some traditional words supported. This is the traditional character for my middle character of my chinese name.

If I have the time, there are a few features I like to have in the future.
- One is creating a bookmarklet, for which this input method would work with any site - like my virtual keyboard bookmarklet released previously. The advantages that bookmarklets have over browsers addon is that the browser like firefox does not need to be restarted, making it a very useful tool for non-home computers. (Gangwen, if you are still finding a online IME, you may like to try Sogou’s Cloud Pinyin/启用搜狗云输入法 bookmarklet).
- Another is tying this input to a chinese dictionary, making it a valuable tool for chinese beginners.
- I also hope to implement custom font rendering (For example using 漢鼎繁舒體) rendered on canvas for computers without these custom chinese fonts installed. Currently this is another of my javascript experiments - I have managed to render a couple of characters, but have yet to figure out the Adobe’s CID implementation and quirk character mapping that
ttf2pt1 gives me.
- Another idea is hooking this up to a DIY Multi-touch pad if I get to built one.

And so I wonder if there’s a need for this application.
- I heard that Macs already have this input method using their touchpads built into the OS. Windows 7 seems to have pretty good chinese recognition with their stylus input as seen from their blog
- Newer HTC phones running Android have a HTC custom native input method called Touch Input. See HTC_CIME HTC的官方手写输入法. It doesn’t come with my HTC Magic, and requires some rooting or hacking - something I don’t have time for now, otherwise I could try writing android applications too.

Some friends may think that I started this experimented because of my inability to read chinese and maybe its true, or indeed its true my chinese language (similar my other verbals and written languages) is pretty weak! So maybe someone might still find this useful. Again, the source code is available for anyone to modify it.

Lastly for those still celebrating the launar new year, happy new year!

p.s. I created an easter egg in view of the chinese new year. Double clicking on a suggestion turn the word upside down. Some homes turn their words upside down to symbolize prosperity falling to their homes. This animation is done using Css3 transform properties (supported by the new firefox, opera and webkits- safari, chrome browsers).

Basically what’s a virtual keyboard is that its simply an input without a physcial keyboard.
If you add this as a Keyboard Bookmarklet (Firefox recommended - drag this to your toolbar), you may use this keyboard on various websites buy clicking on your bookmark which launch as translucent, mac like, on screen keyboard.

If you are thinking of projection keyboards, sorry, it isn’t as cool as that, yet.

However, you can use this keyboard to enter text into textareas and input field by using your mouse, stylus or touchscreen. If you decide to use your physical keyboard, the virtual keyboard gets “lighted up”.

Some have asked me the purpose of this project anyway. Some sites like this would say there’s enhanced security particular from keyloggers. Of course, this isn’t really true since virtual keyboards may be backdoors themselves so please do not use this or any other bookmarklet, greasemonkey, addons etc you do not trust for sensitive information.

Yes, one reason is that I’m having playing around with html canvas again. Another is that I have always been interested to with multiple inputs/users. Creating custom interfaces with canvas could create the possibility of interfacing 2 users in a browser - imagine 2 users surfing the net together by sharing a wide browser screen on a pc. Fifa 95 (thats over a decade ago!) allowed 2 users to play with or against each other - one with the keyboard, another with the mouse, and this would be possible with a virtual keyboard (for the 2nd user). Whether this is another lame project, or whether there are possible great ideas, I’ll leave it up to your imagination.

Before ending with the tons of technical details, try out the demo and let me know of your comments, if any

More details of this release
+ Uses jQuery 1.4.1 (Loads dynamically in bookmarklet)
+ Virtual Keyboard - Drawned with Javascript and HTML Canvas Element
+ The Mac lookalike Design of the keyboard inspired from this NetTuts tutorial which used html, jquery and css instead.
+ Autofire keys & work around for text selection when autofiring in Chrome.
+ Onscreen Keypresses Feedback as you typed - Keybindings aided with plugin jHotKeys
+ Onscreen Key Highlighting Disabled for Password fields
+ Keyboard is draggable around the screen
+ Works with Textarea and Input fields.
+ Demonstrates a simple drawing framework with JSON
+ Uses TextCanvas for canvas rendering of text
+ Bookmarklet - see this interesting jQuery Bookmarklet boot code

See here for source code, and here for YUI compressed version.

Future improvements I would love to see.
+ 100% Bugs Free
+ IE compatibility
+ Docking
+ API
+ Stay tuned

ShortStraw presents a simple yet accurate algorithm described in a recent (2008) paper for detecting corners.

To summarize this paper briefly from my understanding, ShortStraw takes in points of a stroke, resamples them, uses distances of points to determinate whether the points are from straight lines or corners.

I learnt about this a method when after stumbling on Felix Raab’s blog post, who created flex example of the ShortStraw algorithm implemented in actionscript.

This makes implementing a javascript version much easier, since most of the code can be derived heavily from the AS3 implementation. So here’s an example and the source code to my shortstraw.js implementation.

As usual, the demo uses html 5 canvas for drawing (sorry IE users, but any other modern browser like firefox, chrome or safari would work), jquery for simple event handling, and of course the shortstraw javascript file for corner detection.

For the daring, you may want to look at the paper Revisiting ShortStraw which describes iStraw, a technique which attempts to address the shortcomings of shortstraw, mainly in the area of curved lines.

p.s. The screenshot is in contrast with Steve Hanov’s html 5 canvas Web draw, which creates “wavy lines” while Shortstraw helps to “straighten” hand drawn lines.

All the great things about it- simplicity, leanness, exactly what xml wasn’t but ought to be.

Soon I reasoned that the json format can be persisted in storage in its own form. One can build a simple, portable database using json records with minimal code.

“Why hasn’t anyone else built it?” I thought.

(sketch from couchdb’s site)

Well, now we have CouchDB, a document based storage project by apache and Cloudant, for your couchdb cloud needs.