It’s been a while now since i wrote something here now, thinking about it I kind of never got really started anyways :P. So now might be a good time to continue with some writing…
One idea I had been thinking about was reimplementing some old graphics effects from back in the days in the browser, those kind of effects that was hard to do efficiently on early PC hardware like an Intel 486 with VGA. You might ask why and the simple answer to that is that I had fun doing that back in the days, so why not now?
The Plasma effect
// Get hold of the image data var w = ctx.canvas.width; var h = ctx.canvas.height; var imageData = ctx.getImageData(0, 0, w, h); var data = imageData.data; // Manipulate it data = 127; // Draw it back on the screen ctx.putImageData(imageData, 0, 0);
After a bit of coding I was able to hack together something looking like this:
Click on the image to se the effect in action. Source Code
It was a bit of a struggle to make it run at least decently smooth on my machine and while trying to optimize the code quite a bit there’s surely room for more optimization.
I do like the end result though by the looks of it!
The Starfield effect
Next effect I did was a twist of one of my favourites back then, the Starfield effect: Click on the image to se the effect in action. Source Code
This one was a bit easier to make perform since it didn’t require pixel manipulation. It did prove a bit difficult though when I added the motion blur effect where I initially got some weird trails after the stars. These were a bit hard to get rid of entirely and varied depending on browser. After a bit of Googling I found out that they are caused by how transparency is calculated in the browser implementation. In the end I got it to work fine, at least in Chrome by setting the background color on the canvas element to black using CSS.
The Fire effect
Next effect was something with another favourite, the Fire effect: Click on the image to se the effect in action. Source Code
This one proved quite challenging too since there is no indexed color support in canvas using a palette like there was back then in VGA. In the end I had to implement support for indexed colors using a palette on my own by transforming the image data pixel by pixel using a palette.
In the end I had developed a generic little library for handling the different difficulties I came across and other things related to canvas and animations in the browser. Code for that one can be viewed and borrowed from here: canvas-helpers.js
All in all it was really fun doing these things which reminded me of the good old C++ days when one was having fun with such things. It’s also a bit interesting that although all hardware speedups it proved at least as challenging to do these graphics effect at a decent framerate as back then with an i486 running DOS. Thinking about it actually even more.