Draw fireworks in HTML5 canvas (with sounds!)

I always wondered if we can make cool fireworks animation using a procedural way (in here it simply means not using any image sprites or other things like that). Finally, I successfully learned that from this tutorial and I think it missed something: how can a great graphics like this without sounds? So I added it and show it to you. Hope you can also learned something like me.

Processing images on the web!

Want to add some effects to the images on your own web? Before the era of HTML5, this is only possible with browser-specific extensions (I’m talking about you IE filters & -webkit-filters) and this restricted people to do the processing on the server-side or using Flash.

Now, with the help of new HTML5 APIs called the canvas API, we can draw things like images on a canvas in raster format and do processing. In this post, I’ll talk about the basics of the canvas API and how to process images directly.

The <canvas> tag is supported in:

  1. Chrome
  2. Firefox
  3. IE 9+
  4. Safari
  5. Opera

First, we need to define the canvas that the image is going to be drawn. This can be done by a HTML <canvas> element.

The content inside the <canvas> element will be ignored by a browser that recognizes the tag so we can put a message to show the user that their browser doesn’t support this feature.

Then, we need to get the canvas using the traditional DOM API.

Here’s the most important point: we’re going to get the canvas context that contains several methods that allows us to draw thing on.

You may have a question: why is it be ‘2d’ ? It’s because the canvas API is designed not just for 2d raster drawing but also for 3d drawings and we are not discussing that here.

Then, load the image with new Image() constructor and draw it on the canvas by using the context.drawImage(image,x,y,w,h) method.

After that, you should see the image is drawn to the canvas. Now, I’m going to show you how to get access to the image data and do processing on it. To access the image data, we use the context.getImageData(x,y,w,h) method.

See next page to know how to handle the colour values properly and make some effects!

Multiplayer Piano – a nice website for playing music together

http://www.multiplayerpiano.com/

This website is for people to play songs together. I first discovered this in Chrome Experiments and it looked attractive. I found it good so I’m going to share it.

The user interface of this website is pretty straightforward. It has a piano with all 88 keys and a simple chat interface. You can click on the keys to play, or you can use your keyboard. It also has a cool feature that allows you to plug in your own MIDI keyboard and play the notes directly and that suits me very much as I have a MIDI keyboard.

When using the MIDI keyboard you may get problems with those delayed notes. To solve the problem you just need to minimize the window and it’ll get better soon.

The chat interface are fairly simple: you just need to type in the words and press enter to send. The only thing that hurts is the colour of the text makes checking typing errors difficult.

Overall, it’s a really good website, so definitely worth to be used, before or while looking for best piano keyboard to practice at home.

GLSL fragment shaders in JavaScript!

Recent I see some very nice visual effects done in GLSL fragment shader here. I love them very much and I started learning GLSL fragment shaders afterwards.

I think that they are great but they must run on GPU. Only some browser vendors provide API to access the GPU (Actually, that API is called WebGL) so these visuals can’t run on some browsers that don’t offer the WebGL API.

In order to overcome these, I tried to port GLSL fragment shaders to javascript and draw the result using HTML5 canvas. The canvas API has a much broader browser support (and a flash fallback is available).

The demos I created are un-optimized and maybe a bit slow. After all, GLSL shaders are supposed to run on a GPU. However, it’s still worth to convert some of the GLSL shaders to achieve some nice effect such as post-processing of photos.

Here’s the demo:

  1. http://jsfiddle.net/licson0729/eBjQ8/
  2. http://jsfiddle.net/licson0729/YJqB9/
  3. http://jsfiddle.net/licson0729/7Qe34/
  4. http://jsfiddle.net/licson0729/T3hb7/
  5. http://jsfiddle.net/licson0729/9QVxA/

The techniques I used is to render the pixels one by one, with the render function be the one in the GLSL fragment shader. Also, we need to change the schematics (vec2, vec3, etc.) to its JavaScript equivalent.

Here’s the format of the code:

Hope you like it and encouraged you to start learning about computer graphics.

Brackets – A nice, lightweight code editor for the web by Adobe

Before this, I used Dreamweaver to code. However, I found the CPU usage rises a lot when I use it and it costs me a few hundred megabytes to install. After that, I started to find other code editors that is lightweight and powerful. Finally, Brackets is the one that satisfies my needs so I recommend it to you. Below is some information that I quoted from their websites:

About Brackets

Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.

Guiding Ideas

FOR THE WEB, BY THE WEB

Brackets is built using HTML, CSS and JavaScript. If you can code in Brackets, you can code on Brackets.

OPEN DEVELOPMENT WORKS

Brackets, is a fully open-source, community-driven project. Want to influence its direction? Join the developer list and start contributing.

TOOLS SHOULDN’T GET IN YOUR WAY

Rather than clutter your workspace with floating panels, toolbars and icons, Brackets focuses on providing “Quick Edit” in-line views that provide context-sensitive access to your content, without taking you away from your code.

WORKS WITH YOUR BROWSER

The browser is your design view. Brackets hooks up directly to the browser, allowing you to design and develop in the same environment that you deploy.

Download it here.

My latest survey service – PollEndpoint

I created PollEndpoint originally for my homework assignment because other online survey service doesn’t match my requirements. So I made my own site for making online questionnaires and I found it pretty useful for others so I release it.

It is made with node.js which is pretty fast and stable (it’s been proven by Microsoft). It also has an easy-to-use step-by-step interface to create polls. It also has a nice real-time statistics which is easy to read. (Somehow I feel like advertising my product.)

It has some features that is, unique from other online questionnaire services. Examples are:

  1. Responsive design that fits your screen even if you’re using a mobile phone.
  2. Uses HTML5 Microdata and other tags to increase the view rate and achieve better SEO.
  3. PollEndpoint can be embedded to other webpages/blogs through the embed code.
  4. It contains no ads!

By the way, here’s a demo of the embed code.