The Mandelbrot Set

In my last post about the mandelbrot set I said:

I would put the Mandelbrot explorer script online however it is very computationally intense. It takes around 5 seconds to generate 1 image.

Now I have created a new explorer which you can use.

I tried to find a way of replicating my original PHP script in JavaScript. That way the processing is all done on the client computer and not my server. For a while I didn’t think it was possible until today I came across pixel manipulation using the Canvas element. Internet Explorer users will be disappointed to know that the Canvas element doesn’t work on their browser and this therefore won’t work.

The code is almost the same as the PHP code except that it uses the
getImageData and putImageData() functions. These functions extract the pixel data from the image and allow it to be manipulated before being saved again, extremely useful.

Why not explore the Mandelbrot Set!

It simply loads the two images into two canvas elements and extracts the red channel from one of them and inserts that red channel into the other canvas. Hey presto you get a simple anaglyph. This method has another flaw. Modifying an images data channels can only be done from an image on the same domain to obey the same domain security policy. A small proxy sorts that out but means the solution isn’t all JavaScript.

Here’s the source code for his anaglyph generator:

<script type="text/javascript">
<!--
Anaglyph = {
imgLeft : null,
imgRigt : null,
//Load images
load : function(left, right) {
//console.log('Load');
Anaglyph.imgLeft = document.createElement('img');
Anaglyph.imgLeft.src = left;
Anaglyph.imgRight = document.createElement('img');
Anaglyph.imgRight.src = right;
Anaglyph.wait();
},
//Wait for images to load
wait: function() {
if (Anaglyph.imgLeft.complete && Anaglyph.imgRight.complete) {
Anaglyph.make();
} else {
setTimeout('Anaglyph.wait()', 100);
}
},
//Actually make the anaglyph with some canvas magic
make: function() {
//console.log('Make');
var w = 640;
var h = 480;
var canvas = document.getElementsByTagName('canvas')[0];
try {
//Left image in temporary canvas
var canvasLeft = document.createElement('canvas');
canvasLeft.width = w;
canvasLeft.height = h;
var ctxLeft = canvasLeft.getContext('2d');
ctxLeft.drawImage(Anaglyph.imgLeft, 0, 0, w, h);
var dataLeft = ctxLeft.getImageData(0,0, w, h);
//Right image in result canvas
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(Anaglyph.imgRight, 0, 0, w, h);
var data = ctx.getImageData(0,0, w, h);
for (var i=0,l=dataLeft.data.length/4; i<l; i++) {
data.data[i * 4 + 0] = dataLeft.data[i * 4 + 0];
}
ctx.putImageData(data, 0, 0);
//console.log('Done!');
} catch (e) {
//console.log('FAIL!')
}
document.getElementById('result').className = '';
}
}
function getQueryParameter(name) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null ) {
return "";
} else {
return results[1];
}
}
window.onload = function() {
if ('' != getQueryParameter('left') && '' != getQueryParameter('right')) {
var left = getQueryParameter('left');
var right = getQueryParameter('right');
document.getElementById('result').className = 'loading';
Anaglyph.load(
'image.php?url='+left,
'image.php?url='+right
);
}
}
-->
</script>

The canvas element can do so many things and my guess is we’ll be seeing it even more in the next few years.

Instant Star Rating allows you to create 5 star ratings in several different styles to go on your website. Unlike other star raters it doesn’t use Ajax. This is because Ajax doesn’t work across domains. Instead it uses the dynamic script method. When the user clicks on a star it loads a new script from the server.

The tool actually gave me some grief since I checked it worked in Firefox and failed to check in IE presuming that it would work in IE too. This was not to be, the rating javascript failed in IE due to an obscure DOM issue. IE doesn’t support innerHTML on style elements. So I tried to look for an alternative. IE has a property called styleSheet which isn’t supported by other browsers. CSS can be written to this using the cssText method. An interesting find!

I therefore used the following method to add dynamic CSS:

IR1_h=document.getElementsByTagName("head")[0]
IR1_l=document.createElement("style")
IR1_l.type='text/css'
IR1_h.appendChild(IR1_l)
if(IR1_l.styleSheet){
IR1_l.styleSheet.cssText='#rate1{padding:10px 0}'
}else{
IR1_l.innerHTML='#rate1{padding:10px 0}'
}


Please try out instant star rating, it is completely free and should work on almost any website. Check out the example below: