Data Visualisation in Javascript

Processing.js is quite something. Its a port of the Processing data visualisation programming language into Javascript. A great use of the <canvas> functionality in recent browsers. Because it pushes the browser to it’s maximum, it is recommended you use it only with the latest beta browsers: Firefox 3, WebKit nightlies and Opera 9.5.

If this doesn’t sound impressive to you, check out some of the demos:

There really are all kinds of things from physics to fractals, from clocks to modern art.

What can I say apart from that it’s left me speechless and quite how processing.js can weigh in at over 5000 lines and compresses to under 10kb.

I suppose the sluggish performance in the browsers is the main downside of this but I guess that this will get better in time as I haven’t seen enough intensive <canvas> applications lying about which would warrant browser makers putting time into improving performance.

Encoding Javascript in a PNG through canvas

I think this is a hilarious way to compress and perhaps obfuscate your Javascript code. How does it work? Well, in ASCII text, which is how Javascript is encoded, 8 bits are used to encode a single character (this gives 2^8 combinations or 256 possible characters).

In an 8-bit binary image file, the 8 bits are used to represent a colour. With 8 bits, you can encode 256 different colours all the way from white to black. In colour images, 3 bytes are used for each pixel. It stores the amount of red, green and blue as values from 0 to 255 and then combines them together to give colour.

This script works by encoding the 256 possible characters in an ASCII Javascript file as 256 possible colours in a binary PNG file. <canvas> is used to read the “values” or colours of each pixel, turning it back into the ASCII equivalent. The result is then eval()-ed.

The benefit of this technique is you can then benefit from PNG compression. Of course, most servers will gzip your Javascript files anyway meaning you don’t actually benefit from a reduction in file size.

I got this idea to stuff Javascript in a PNG image and then read it out using the getImageData() method on the canvas element. Unfortunately, for now, that means only Firefox, Opera Beta and the recent WebKit nightlies work. And before anyone else points out how gzip is superior, this is in no way meant as a realistic alternative.

Anyway, since the support for the getImageData method on the canvas element isn’t widely supported yet, I guess this remains a curiosity for now and just another way to use/misuse the canvas. So, this is meant only as thing of interest and is not something you should use in most any real life applications, where something like gzip will outperform this.

This reminds me of steganography and techniques of hiding files inside JPEG images. You could perhaps use this technique to add a digital watermark to an image. Or you could store metadata inside the pixels itself and then use <canvas> to read it out. The advantage of that is your metadata can never get separated from your actual image.

Javascript Image Effects

The Javascript Image Effects script is stunning. It works by using VML filters in Internet Explorer and the <canvas> tag in Firefox and Opera – the same methods used by Reflection.js.

This library tries to enable different client side image effects. IE has long had its filters, which have provided a few basic effects for IE. With canvas, some of these effects can also be achieved in Firefox and Opera.

Safari lacks the getImageData/putImageData methods on the canvas 2d-context, so only the very basic flipping effects will work on this browser. The functions are present in the latest WebKit nightlies, however. Likewise, Opera only supports the get/putImageData methods in the beta version (9.50b), so you need the beta to see most of the effects. Check the compatibility column in the table above.

Among the effects available are blur, sharpen, flip, invert colours, find edges, emboss and brightness/contrast adjustment.

I think it’s fantastic that all of these effects can be achieved using <canvas>. However, it appears that the effects are achieved through the manipulation of individual pixels and unless there are dramatic improvements in performance I don’t think this would be practical as an unobtrusive Javascript. However, it could make a fantastic web-based AJAX image editor which would allow you to tweak an image before submitting it using toDataUrl().

If you use the javascript image effect, be aware of the terms of use which prohibit commercial use without permission.

Pure Javascript/Ajax Video Player

The javascript video player is pretty cool and fun, even if it is as the author describes it, “semi-useless”! See demo.

So how does it work? A script exports every single frame from an MPEG movie into individual JPEG files. These are then collected together, base64 encoded and exported into a JSON file. The script then creates image objects for each frame and shows them all in succession. There is no support for sound.

First strategy was to create an Image object for each frame and render it on a canvas element using drawImage(). That worked fine and performance was nice (although Opera used a lot of CPU), but I figured I’d try just using a regular image tag and just change the src property to another data:uri each frame. The change was barely noticeably in Firefox and Safari and it ran a bit better in Opera, so I lost the canvas and stuck with plain old images.

Now, it seems that Firefox will eat up all the memory in the world if you keep throwing new data:uris at the same image tag, which led to another change, so for each frame a new Image object was created and saved for later and as the video played, the previous frame Image was replaced by the new Image object. That seemed to work, but introduced an annoying delay as all these Image objects were created before playing, so I ended up moving the Image creation to actual render cycle where it simply checks if the frame Image has already been created, and if not, creates it.

So this is totally impractical but who cares: it’s cool and a fun experiment. I wish I still had time for experiments like these!

document.getElementsByClassName compatibility

Firefox 3 and Safari 3.1 introduce an important new compatibility problem for many webpages. The problem originates from Prototype.js’s document.getElementsByChildName function which is implemented like this:

if (!document.getElementsByClassName)
document.getElementsByClassName = function(instanceMethods){
// …
};

The problem is that the native browser implementation works differently from Prototype’s function which was created before the document.getElementsByClassName specification was written. The native implementation returns a live nodelist whilst Prototype’s function returned a object array.

This compatibility issue affects websites using versions of Prototype.js older than 1.6 as well as other scripts which have used the document.getElementsByClassName function (including Reflection.js versions 1.8 and older).

Prototype.js users should use $$ or Element#select instead.

For my script, Reflection.js, I have renamed my function to document.myGetElementsByClassName. Sure it’s ugly but it means we preserve compatibility with older browsers which don’t support the new document.getElementsByClassName function natively. Also, we don’t need to test for whether the browser supports the function natively (and use a different codepath depending on whether a nodelist/object is returned). The downsides of course are that we can’t benefit from the faster native implementation.

Anyway, hope this helps someone out there.

Dynamic Gradient Background (Canvas)

A really clever script here which makes use of Javascript and canvas to give dynamic gradient backgrounds.

Here is the problem: when you use the <canvas> tag to manipulate an image or a graphic, it is treated in HTML as an inline object (similar to a super-charged <img>). This means you can’t set a canvas as the background image of a <div> for example.

This script gets around this limitation by using the toDataUrl() function in canvas (supported in Firefox and Opera). toDataUrl() essentially takes the contents of a canvas and turns it into an image, which can then be made into the background of a <div>.

It sounds complicated, check out the JS source if Javascript is your preferred language as opposed to English.

I can see Reflection.js being adapted to work for background images using a similar method, but it’s likely only to work in Firefox and Opera.

Amazing Javascript Image Effects

If you thought reflection.js was cool, you ain’t seem nothing yet! Christian Effenberger has created three amazing image effect scripts.

Corner.js 

 

Corner.js can add rounded corners to your images, as well as shading and shadows around the image.

Glossy.js

Glossy.js can add that wonderful glossy and shiny effect to your images.

Instant.js

 

And my personal favourite. Gives you that instant polaroid look. Configure the tilts, shadows, borders…

I think "wow" summarizes these scripts for me Check out the license though; it’s not the same BSD license reflection.js is licensed under, and you need to obtain a license to use it on commerial websites.

Corner.js

Christian Effenberger created Corner.js which is a really beautiful unobtrusive Javascript to add effects to images in your webpage. It allows you to add corners, shading and drop shadows simply by inserting a small Javascript file into your page and a CSS class.

Christian told me the script was based on Reflection.js. Indeed, the two scripts are very similar: Reflection.js adds a "wet floor" effect typically associated with Web 2.0 whilst Corner.js has some nice image effects which are more "traditional".

Corner.js 

If you’ve used Reflection.js you’ll be right at home with Corner.js – you essentially use it in the same way.

Again, many of the benefits of Reflection.js over server-side processing exist with Corner.js: you can use it with off-site images and forum avatars and you can change the parameters of the corner/shadows by changing just a few numbers rather than having to get Photoshop out.

Kudos to Christian for creating a great script which I’m sure will be another great addition to the toolkit of web designers.

Does anybody else know of any similar scripts which adds effects to images unobtrusively, similar to Reflection.js and Corner.js? 

Ajaxian – Blog of the Week

Ajaxian is a wonderful blog for web developers mainly focusing on new technologies which often come under the banner of "Ajax" or "Web 2.0". It’s updated with several entries daily focusing on cool javascripts which you can use on your webpage, interesting implementations of "Ajax" technologies across the web and news relevant to the industry (browsers, toolkits, etc.)

It really is a must-read for the web developer who wants to keep up to date with developments, innovations and new trends in the web development/javascript field.

Check out Planet Ajaxian for an aggregated feed of related blogs. 

 

24 ways – Blog of the Week

It’s not often that I’ll recommend a blog in this section which is only a day old. Well, kinda. This week’s blog of the week is "24 ways to impress your friends". It’s a web development blog which will run for this December as a bit of an advent calendar for web developers.

It’s December 1st so this year’s posts have only just begun. The first post is a "Tasty Text Trimmer" written in Javascript which, well, trims text. They show you how to use the YUI Slider widget combined with a Javascript text trimmer to make something which behaves a bit like Safari’s RSS "Article Length" tool.

If you want to get a feel for the blog, check out last year’s postings. Each scripts and posts is written by a different web developer, many of which are well known names in the web development community.

  • Topics: Web Development, Javascript
  • Reading since: 12th December 2005
  • URL: http://24ways.org/