Archive for the 'Javascript' Category

Data Visualisation in Javascript

May 13th, 2008

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

May 5th, 2008

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

May 2nd, 2008

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

April 21st, 2008

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

March 27th, 2008

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.

Javascript Coverflow & Scroll Wheel Script

March 24th, 2008

Coverflow in Javascript seems to be a big trend at the moment. Raith created an absolutely stunning script which implements not only a coverflow in Javascript complete with angled images and reflections, but a iPod-style scroll wheel in Javascript.

rwmCoverFlow

Raith writes:

Hiya. I’ve worked plenty more on my “CoverFlow” javascript and present the first release here. The CoverFlow and the PodNav items below are 2 entirely separate modules which just happen to work really nicely together. You can happily use either one without the other. The CoverFlow can be as wide as you want and use any size (square) images.

I’m not even entirely sure how the angled images are created in Javascript but it’s certainly not lots of divs and it’s very very fast. Also, the script seems to be surprisingly small in download size. Simply stunning.

ProtoFlow: Coverflow for Javascript

March 17th, 2008

You’ve probably all seen “coverflow” in the new iPhone and iPod Touch. It shows your album covers in a “carousel” kind of format, where you can flick between different albums.

ProtoFlow is a script which implements this on your website using Javascript. It generates the effects and interface using Prototype.js and Scriptaculous, and the image reflections using Reflection.js.

The interface dragging through the different albums is really nice. It doesn’t distort/angle the albums at the side (this could possibly be achieved using Christian Effenberger’s amazing reflex.js , albeit with additional licensing restrictions). It also doesn’t seem to work in IE.

I think it’s a fantastic example of what Reflection.js can do anyway (also notice the reflections of the album covers show through each another). A script to watch!

Dynamic Gradient Background (Canvas)

March 16th, 2008

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.

Reflection.js 1.8

March 7th, 2008

Reflection.js is a cross platform script which allows you to add reflections to images on your web pages.

Reflection.js v1.7

It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.

What’s new? 

There are several improvements especially for Internet Explorer - firstly, reflections now show below the image as they should in IE standards mode. With scaled images in IE, reflections are no longer stretched. As some modern browsers support document.getElementsByClassName out of the box, Reflection.js will no longer overwrite this function. And finally, a copy of reflect-o-matic has been bundled with the download for ease of use.

Demo

See a demo of reflection.js 1.8 in action or try it out with one of your images on the reflect-o-matic.

The reflection.js download includes some more examples of how reflection.js can be used including varying the height, opacity and responding to user actions.

Thanks!

Thanks once again to everyone who has used the script, left feedback and helped to iron out any bugs or issues over the last years! I’m very pleased that the script was downloaded from this website for the 100,000th time this month. If you use the script on one of your site or photo galleries, please leave a comment! It’s really fantastic seeing how people put the script to use!

Reflect-o-matic 2 now works in Opera

March 5th, 2008

For some reason, Opera seems to handle the onload event for images differently from other browsers - I think it called onload() on an image which I had created in the DOM (and hence was already cached) but not yet added to a document. Or it didn’t call onload() on an already loaded image.

Anyway, something along these lines sorted it:

if (window.opera && image.complete) {
image.onload();
}

So Opera fans can now use Reflect-o-matic version 2! There still seems to be some issues with the image search in Opera but thats a minor thing. Now just to get it to work in Internet Exploder…

Next »