Mozilla

Articles by Gen Kanai

Sort by:

View:

  1. audio data API – audio generation demo

    At BarCamp Bankgkok 4, 16 year-old programmer, Thai Pangsakulyanont, did an awesome presentation (that I now know he hacked together in 2 hours before the presentation) on the Audio Data API in Firefox 4: audio generation demo.

    Simply, the demo uses the mouse button for a crash cymbal, mouse actions as an arpeggiator, and the accelerometer (Orientation events) to apply a low-pass filter. I remember Thai from BarCamp Bangkok 2 where he made a Wiimote demo with Linux (and he was 14 then.)

    If you also have a demo and some code to share, please let us know: @mozhacks (twitter account) or leave us a comment.

  2. making waves with HTML5

    Thomas Saunders of modern-carpentry has a very nice HTML5 demo, making waves with html5, showcasing the power of Canvas as well as Processing.js.

    modern carpentry rides the html5 canvas wave

    Thomas says:

    I was challenged at work to create something that “floats naturally”. After a while of confusion in my pursuit of “natural floating” or whatever, I came up with the idea that I needed a tool to investigate my confusion. This project is a result of my trying to build that tool.

    It was initially built as a Flash/Flex application, which you can see here. Later on, however, I became interested in HTML5 and the Canvas tag and decided to port the application to JavaScript and HTML (with the help of jQuery, and also Processing.js, of course…). The transition went fairly well, and I ended up with a JS/HTML version of the application that I actually think is cooler than the original Flash version.

    In the end, I came up with both something that “floats naturally” and also a serendipitous encounter with the simplicity of working with only HTML and JavaScript, which has been very rewarding.