Francois Laberge has a fun demonstration of creating 3d looking effects via lighting and normal mapping on 2d photos.
The demos progressively add features, from left to right lighting, to glow effects, to a multiple colored lighting extravaganza! Very nice work Francois!
Marco Lisci has written a tutorial on creating a black and white image effect using the Canvas tag.
The heart of his tutorial is using getImageData() and looping through the red, green, blue, and alpha values of each pixel to change it’s luminance:
So, what can we use to make an image black and white? The luminance. The luminance is how much a color is luminous to the human eye and it’s used to measure the clipping white in video editing systems, for example. In video editing system a white color that “break” the screen is a white that is too white to be represented on a common TV.
This is important because by calculating the average number between red, green and blue values we could obtain a value for every pixel that represent a static mathematical representation of the color luminance.
But there’s a problem, an human eye see colors dynamically. For example, if we take similar shades of blue and green, our eyes will detect the green color more luminous than the blue. In our algorithm we could use the static average formula, but our image will be too flat, and we’ll lose a lot of color depth.
So, let’s introduce the luminance formula: red x 0.3 + green x 0.59 + blue x 0.11.
This formula calculates the luminance of a color as it’s perceived by the human eye, so the green channel has more importance than the red and the blue. In our Javascript code we calculate for every pixel the grayscale number, by using exactly this formula. Then we assign this value to the red, green and blue channels of our pixel. By doing this for every pixel we are able to get a black and white version of our original image. There are obviously other more complex methods to calculate the correct grayscale value, but they could be too heavy to be used in an HTML5 canvas element, and we can say that for an everyday use, the luminance algorithm is good.
Resulting in code that looks as follows:
It would be cool to see this combined as a kind of filter that can be applied to do black and white roll-over effects of elements, similar to what you can do with SVG filters.
Via Phil Franks comes an interesting HTML5/CSS3 site for There Studio, which is a kind of coworking space in London:
The site itself has a number of circles with information bouncing on the screen that respond to mouse clicks and moves.
Let’s crack the site open using View Source and see how they are doing things. First, they have a repeated background with a little plus symbol with the following style rule on the <body> tag:
The textual content in each of the circles is clean semantic HTML that is search engine friendly:
To turn that into this:
The <h3> is first transformed into having an underline with the padding and margin being on the bottom:
JavaScript creates the circle. The script tags themselves are at the end of the HTML page at the bottom of the <body> tag, a good performance practice in general.
The heart of drawing each circle is in the createBall and createContentBall methods. If a ball will have HTML content, then the createContentBall method is used, otherwise the createBall method is used. Let’s look at the createContentBall method; we’ll break it down:
First, we create an absolutely positioned DIV that will house our Canvas tag:
Then we draw the actual circle itself using the Canvas tag and append it to our container DIV (Note that an SVG circle created programmatically could have also been used here):
Then we create another DIV to house the HTML content itself:
Notice that we are setting content.onSelectStart to null above; this is so that when you run the mouse button over the text it doesn’t select (An alternative way to do this is to use the HTML pointer-events CSS property).
Next comes code to deal with the physics of the circles, which uses Box2D.js, a JavaScript physics engine ported from Flash:
Basically, we define a circle, give it a radius, density, friction, and restitution, and then add it to our collection of shapes with a position and linear velocity. Box2D will then handle the physics and we can just take the values back out to draw things on the screen with a setInterval, which happens in the loop method:
This method gets called with a setInterval periodically. Basically, we apply a delta and a gravity at each time step; see if the mouse is being pressed down (with hooks for touch devices like the iPhone to see if a finger is being pressed down); tell the Box2D World about our gravity and delta and to make an iteration step; and finally use the computed physics values from Box2D to apply CSS3 rotation transforms on our parent DIV and move the element’s CSS top and left values around the screen.
From Hakim El Hattab (who has some very nifty HTML5 experiments up) comes some nice tips on using the Canvas tag:
Jacob Seidelin of nihilogic fame (remember his Super Mario in JavaScript solution) is one of my unsung heroes of JavaScript. His solutions have that Dean Edwards “genius bordering on the bat-sh*t-crazy” touch that make you shake your head in disbelief when they come out but later on become very interesting.
One of his posts from 2008 entitled “Compression using Canvas and PNG-embedded data” had a good idea: if you want to compress JavaScript and CSS you could reverse engineer a packing algorithm in JavaScript or you could use a lossless packing system that is already in use and supported in browsers. In this case the packed format is PNG and the way to unpack it is by using the canvas API’s getImageData() method:
As there are quite some interesting competitions going on that need really small JavaScript solutions Alex Le took up Jacob’s work and wrapped it in a build script that concatenates, packs and converts to a PNG and unpacks it for the 10K competition with a JavaScript. In the process Alex also found some bug in Internet Explorer 9′s canvas implementation as it only reads the first 8192 bytes of a PNG and returns 0 for the others :(.
It is pretty amazing how efficient this way of packing is. What we need to test now is when and if it is worth while to have the unpacking done on the client. Imagine adding your JS and CSS to the end of an image and cropping it in CSS to have all the info you need in an app in a single HTTP request. Let the games begin.
Javascript author extraordinaire David Flanagan released Canto.js recently, a lightweight wrapper API for canvas, introduced here and documented at the top of the source code. Example:
Notice three things:
Instead of setting the ink properties and then painting it, you can do it all in one step:
And plenty more syntactic sugar – check out the API in the source code comments. Sweet!
Thanks @pkeane.
Interest in Canvas, as well as mobile apps, has led to a renaissance of old-school 8-bit graphics. Joe Huckaby of Effect Games has been playing around with color cycling, leading to some stunning effects.
Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory.
There’s a neat optimization going on here too: instead of clearing and redrawing the entire scene with each frame, he only updates the pixels that change:
In order to achieve fast frame rates in the browser, I had to get a little crazy in the engine implementation. Rendering a 640×480 indexed image on a 32-bit RGB canvas means walking through and drawing 307,200 pixels per frame, in JavaScript. That’s a very big array to traverse, and some browsers just couldn’t keep up. To overcome this, I pre-process the images when they are first loaded, and grab the pixels that reference colors which are animated (i.e. are part of cycling sets in the palette). Those pixel X/Y offsets are stored in a separate, smaller array, and thus only the pixels that change are refreshed onscreen. This optimization trick works so well, that the thing actually runs at a pretty decent speed on my iPhone 3GS and iPad!
Greg Murray has an early beta of a fun sample app: HTML5 Fish Tank. The app lets you build out your fishes, and then place them in the tank.
It puts the low level Canvas and CSS3 transitions/transforms to work.
E.g.
The fish animation is driven by code like this:
A fun little way to start your day.
We have learned to touch the DOM as little as possible for performance sakes. Batch up changes, and do one call to innerHTML say. Talk over the evil boundary of the DOM as infrequently as possible.
Well, Selim Arsever has found a similar tip for Canvas that caused a ~40% performance improvement on some of his code. He had an example that did pixel twiddling, looking like:
var pixels = SCREEN_WIDTH*SCREEN_HEIGHT;
while(–pixels){
image.data[4*i+0] = r; // Red value
image.data[4*i+1] = g; // Green value
image.data[4*i+2] = b; // Blue value
image.data[4*i+3] = a; // Alpha value
}
context.putImageData(image, 0, 0);
After listening to Stoyan talk perf, he wondered if there was an issue with the image.data access, and changed the code to:
var pixels = SCREEN_WIDTH*SCREEN_HEIGHT;
var imageData = image.data; // here we detach the pixels array from DOM
while(–pixels){
imageData[4*i+0] = r; // Red value
imageData[4*i+1] = g; // Green value
imageData[4*i+2] = b; // Blue value
imageData[4*i+3] = a; // Alpha value
}
image.data = imageData; // And here we attache it back
context.putImageData(image, 0, 0);
He wrapped this all up in a benchmark that showed the perf diff. It actually really seemed to matter when using closures for namespaces:
There are a few graphing libraries out there. The latest that we have been shown is RGraph by Richard Heyes:
RGraph is a graphing/charting software component for websites. It uses HTML5 technologies (the new Canvas tag) which is already present in most modern web browsers to create and show graphs/charts. The graphs are created inside the web browser, removing the burden from the webserver (just as rendering HTML works) and so it can alleviate some of the burden from a web server.
It supports a wide variety of graph types – from Bar charts, Line charts and Pie charts to Scatter, Rose and Radar charts. In total there’s roughly 15 base chart types available with further variations possible too.
It has interactive features (for example zoom, tooltips and annotations) which can improve the usability of a website/web application. It’s very easy to work with and extend.
We have been reminded of MAX showing Flash CS5 generating basic HTML5 code (Canvas/JS).
That’s right. Adobe is a tools company. Although it helps to own the platform (hence keeping Flash alive and wanting it to win) as the competition to build the best tools is a given, that doesn’t mean that they can’t compete on other platforms. To be frank, it isn’t like the Web has a ton of amazing tools to compete against anyway in fact, so I fully hope that with the success of HTML5 in the coming years, we see great tools from Adobe to help us deliver experiences. Especially for creative designer types… Adobe really gets those chaps (and chapesses).
What tools would you like to see from Adobe? Maybe we can get them to dust off their SVG? ;)
Check out the launch of Creative Suite 5.
We love to recursively implement one technology on top of another. We have had Canvas support added to IE via VML, Flash, and Silverlight. We have had SVG implemented in Flash. Flash implemented in SVG.
The latest experiment is from Gabe Lerner and is CanVG. As you can guess, it renders SVG files via the <canvas> element. All in a few hundred lines of code!.
Check out the test playground to see it in action.
