This tool came about because I have created a site which users can edit and add tables to through a visual editor. Unfortunately copying and pasting from Excel into this visual editor results in “tag soup”! I needed a solution.

I looked around and found WordOff which cleans up word documents but doesn’t work on tables. I decided to take the code, convert it to PHP and modify it so that it doesn’t get ris of some of the essential stuff for tables. With the help of David Hopkin’s  Strip Attributes Class

Please go to ExcelOff, copy and paste a table from Excel or similar. Click clean up and lines of beautifully formed HTMl code will result!

Hopefully I will be able to incorporate this into a WordPress plugin for all WordPress users to conveniently use. Watch this space.

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.

Knowing about how 3D images are produced I knew that Google couldn’t possibly render whole pages in real 3D. Instead it uses a clever rendering effect to create two identical images of the page and convert one into the red component and the other into the blue and green component.

This doesn’t make the page 3D as such but instead when viewed through cyan and red glasses looks like the page comes out of the computer screen. This isn’t really thrilling and can make your eyes and brain hurt after a short while due to retinal rivalry.

For real anaglyphs you need two images one of the scene viewed from the right and another from the left. Then you can use my anaglyph creator to make your own genuine 3D images. And don’t forget to download your 3D glasses to view them!

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:

For those mathematical boffins the Mandelbrot set can be defined as the set of complex values of c for which the orbit of 0 under iteration of the complex quadratic polynomial z_n+1 = z_n² + c remains bounded. That is, a complex number, c, is in the Mandelbrot set if, when starting with z₀=0 and applying the iteration repeatedly, the absolute value of z_n never exceeds a certain number (that number depends on c) however large n gets.

I decided to create a PHP script which could visualise the Mandelbrot set for me. With a bit of research, I found some basic code which I modified to make the script. You are free to use and distribute it as you wish. The script does work but It is isn’t perfect so use at your own risk.

<?php
class Mandelbrot
{
var $im;
function colour($value){
$value=$value*ceil(1200/$this->its);
if($value<256){
$r=255;
$g=$value;
$b=0;
}elseif($value<512){
$r=511-$value;
$g=255;
$b=0;
}elseif($value<768){
$r=0;
$g=255;
$b=$value-512;
}elseif($value<1024){
$r=0;
$g=1023-$value;
$b=255;
}elseif($value<1280){
$r=$value-1024;
$g=0;
$b=255;
}elseif($value<1536){
$r=255;
$g=0;
$b=1535-$value;
}
return imagecolorallocate($this->im, $r, $g, $b);
}
function Mandelbrot()
{
$this->im = @imagecreatetruecolor(200, 200);
$this->y1=is_numeric($_GET['y'])?$_GET['y']:0;
$this->x1=is_numeric($_GET['x'])?$_GET['x']:0;
$zoom=is_numeric($_GET['zoom'])?100*$_GET['zoom']:100;
$this->its=(is_numeric($_GET['its']) and $_GET['its']<=1200 and $_GET['its']>0)?$_GET['its']:100;
$d1 = microtime(1);
for ($y = -100; $y < 100; $y++) {
for ($x = -100; $x < 100; $x++) {
$val=$this->iterate($y/$zoom,$x/$zoom);
imagesetpixel($this->im, $x+100, $y+100, $this->colour($val));
}
}
$d2 = microtime(1);
$diff = $d2 - $d1;
header("Elapsed: $diff");
header('Content-Type: image/png');
imagepng($this->im);
}
function iterate($x,$y)
{
$cr = $y+$this->y1;
$ci = $x+$this->x1;
$zi = 0.0;
$zr = 0.0;
$i = 0;
while ($i < $this->its and $zi2 + $zr2 < 4) {
$i++;
$temp = $zr * $zi;
$zr2 = $zr * $zr;
$zi2 = $zi * $zi;
$zr = $zr2 - $zi2 + $cr;
$zi = $temp + $temp + $ci;
}
return $i;
}
}
$m = new Mandelbrot();
?>

The script works in a simple way. It creates a blank canvas of 200×200 pixels. For each pixel it uses the escape time algorithm to check if a point is within the set or not. A value is then returned for how long it took a point to reach the escape condition. Some points take millions of cycles to reach the escape condition so we set a maximum iteration limit. This defines how much detail we see in the mandelbrot set.

This value is used to define the colour of the point. Instead of using value to define the brightness of the point I use the value to define the hue of the point as there are many more possible hues than possible greyscale values. To convert a value into an RGB value needed to plot the point I use a special algorithm. The image above roughly shows how the RGB values are worked out.

I have made the script take 4 input parameters, the x and y coordinates the amount of zoom and the maximum number of iterations allowed. By messing around with these paarmeters you can explore the mandelbrot set in stunning detail.

The outputted images are simply amazing. The image to the left is found at a magnification of 200,000. Its a miniature replica of the Mandelbrot set.

To show you just how much magnification you can get watch the following animation. It goes from a magnification of 1 to 1 billion. With a little more processing time you could easily go much deeper to many billions of billions of times magnification!

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

Important Update: You can now explorer the mandelbrot set!

True: This but only displays the red and blue channels and doesn’t preserve any colour. The advantages are no ghosting but it does result in a dark image.

Greyscale: This creates a lighter image than the true anaglyph but results in more ghosting. Again no colour is preserved.

Colour: This preserves most of the colour but causes retinal rivalry. This is the type of anaglyph which I originally offered.

Half Colour: This preserves less of the colour but reduces the retinal rivalry.

Optimised: This uses none of the red channel from the original image so preserves none of the red colours but most of the blue and green. The advantages are almost no retinal rivalry.

I now believe that my anaglyph creator is the most comprehensive anaglyph creator available on the web. Please try it out with your own images and compare the different anaglyph types.

I’ve updated Instant Solve with two new tools. The first is the anaglyph creator which I created a while ago. Please try it out. Some fabulous images have been made with the anaglyph creator.

The second is a translation tool. It relies on the Google languages API. The translation tool is as good as Google translate but offers real time Ajax translation of text. Other features may also be added at a later date. If you do have any ideas or feedback, please leave a comment.

A few more tools are in the pipeline such as a maths tool which can help with solving equations, trigonometry, integration and differentiation. Unfortunately, this tool is proving more difficult than I first thought. Other projects are a kakuro and a griddler solver however since both problems are NP complete the solutions take a large amount of computing power. I have also yet to come up with a meaningful interface which doesn’t heavily rely on javascript.

Instant Quiz is still work in progress so some features haven’t been implemented yet. Quizzes don’t show answers and the quiz UI may change. In the next few weeks I am going to try and hook Instant Quiz up with Facebook so Facebook users can create quizzes for their friends to take.