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.

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.

If you’ve not heard of XAMPP it stands for

• X (meaning cross-platform)
• Apache
• MySQL
• PHP
• Perl

It is a portable application which will work on a Mac PC or Linux. It comes bundled with pretty much everything you need to dive straight in. About a year ago I installed my own Apache, PHP and MySQL stack however it took me ages to install correctly, the MySQL stopped working and the installation was a pain to start and stop. On the contrary XAMPP is a breeze to install and comes with a control panel.

There are a few pitfalls to developing code for an online site on a home computer. Firstly the functions available to you online will vary from those on your home computer because the software works slightly differently on different operating systems. The other pitfall is to develop some code and then have to rename all the links when you deploy it.

This is where building a virtual host comes in. Say I want to make a cheese identifying application (I don’t) and I have purchased the domain name whatcheese.com. When developing my code on XAMPP I can set up a virtual host which means that when I go to whatcheese.com I am redirected to my localhost.

In XAMPP with Windows this is a matter of changing two files. They may not be exactly the same files though on other operating systems. Firstly go to your xampp installation and go to Apache > Conf > Extra and open up httpd-vhosts.conf. In this file we can reference all the virtual hosts we want to create. Add the following to the file.

NameVirtualHost *:80
<virtualhost *:80>
ServerAdmin sampe@mysample.com
DocumentRoot "C:/Program Files/xampp/htdocs" #existing document root
ServerName localhost #if you type localhost in your browser you will get this virtual host
</virtualhost>
<virtualhost *:80>
ServerAdmin webmaster@mywordprees.com
DocumentRoot "C:/whatcheese" #your new document root
ServerName www.whatcheese.com #your virtual domain name
ServerAlias whatcheese.com #your virtual domain name alias
<directory "C:/whatcheese"> #your new document root again
AllowOverride FileInfo AuthConfig Limit Indexes #set folder options
Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
<limit GET POST OPTIONS>
Order allow,deny
Allow from all
</limit>
<limitexcept GET POST OPTIONS>
Order deny,allow
Deny from all
</limitexcept>
</directory>
</virtualhost>

This basically sets up a new virtual host in apache. If you go to whatcheese.com now you will be directed to the real online site whatcheese.com and if this doesn’t exist you will get an error like “server not found”. We need to tell our operating system to redirect to 127.0.0.1 (our computers local IP address).

On Windows you need to go to C:\WINDOWS\system32\drivers\etc\hosts Open up the file with a text editor and add the following lines to the bottom of the file:
127.0.0.1 www.whatcheese.com
127.0.0.1 whatcheese.com
This tells your browsers to go to 127.0.0.1 when they meet the domain name whatcheese.com as opposed to consulting a DNS server for the IP address.

That’s all there is too it. Restart apache and go to whatcheese.com and you will see whatever files you put in the C:/whatcheese directory. How cool! Now when you have finished developing your code on your home computer you can deploy it to your server without any problems. Just remember to remove the lines you wrote in the hosts file so you get sent to the online site.

Having detailed how to create a script using the GD image library to create anaglyphs, I decided to create a webpage for those people not lucky enough to have their own web hosting. The page is very simple and it works similarly to the previous script.

Any online tool is vulnerable to abuse but their are a number of precautions I needed to take. Firstly I needed to make the script secure. I don’t want people hacking my site through a little script I wrote just because I couldn’t be bothered to make it secure. On the contrary to what most people think, making file uploads safe isn’t too difficult. Firstly I make sure tat the user has uploaded to files and no upload errors occurred using the following if statement.

if(!empty($_FILES['left']) && !empty($_FILES['right']) && $_FILES['right']['error'] == 0 && $_FILES['left']['error'] == 0) {

Secondly since only images can be uploaded I check they are really images using the getimagesize function. Some people use the files mime type to check whether the file is valid however this is insecure as the user can fake this. Looking at the file extension is a much better option because the Apache web server serves pages based on file extensions. Of course for extra-security checking both is advised to prevent users uploading malicious scripts.

The uploaded files are generally safe until you move them from the temp location to a directory where they can be served over the internet. As the getimagesize is more reliable than either of the other methods I have omitted them but only because I wasn’t going to move the uploaded files to a public area of the server.

There are several ways to fool getimagesize such as hiding PHP in a carefully created but still valid image file and giving the file a .php extension. I should also mention that all file upload names should be changed to prevent XSS attacks. As I mentioned earlier the reason why this amount of security suffices is because only the final image is placed on the public area.

$left_size = @getimagesize($_FILES['left']['tmp_name']);
$right_size = @getimagesize($_FILES['right']['tmp_name']);
if($left_size && $right_size && $left_size[0]==$right_size[0] && $right_size[0]<1025 && $left_size[1]==$right_size[1] && $right_size[1]<1025 && $left_size[2]==$right_size[2])

As you can see I have checked that the two images uploaded are the same size by checking that the height and width are equal and both less than 1025px. The images must be less than 1025px because larger files put too much of a strain on my server and can take over 5 seconds of processing time ouch!! There are other methods I could implement to stop people abusing this service such as allowing them to create only one anaglyph per session.

if(image($left_size)){
$n=rand(1,1000);
echo '<img src="temp.jpg?'.$n.'" alt="Anaglyph">';
}

In this section of code I pass the size of the image to the image function which creates an image and outputs the completed anaglyph as temp.jpg. You may be wondering why I append a random number to the image source. It’s actually to prevent the images being cached incorrectly. The subject of caching is in itself very complex so I ill leave this till another day to explain.

Finally the image function itself.

function image($size){
//loads the files from the temp location
$left = $_FILES['left']['tmp_name'];
$right = $_FILES['right']['tmp_name'];
//finds the type of image
switch($size[2]) {
case IMAGETYPE_GIF:
$src_right = imagecreatefromgif($right);
$src_left = imagecreatefromgif($left);
break;
case IMAGETYPE_JPEG:
$src_right = imagecreatefromjpeg($right);
$src_left = imagecreatefromjpeg($left);
break;
case IMAGETYPE_PNG:
$src_right = imagecreatefrompng($right);
$src_left = imagecreatefrompng($left);
break;
default:
return false;
}
//finds the height and width of the image
list($width, $height) = $size;
//create the canvas
$anaglyph= imagecreatetruecolor($width, $height);
//for each pixel
for ($y=0;$y<$height;$y++){
for ($x=0;$x<$width;$x++){
//find the colour
$rgb_left = imagecolorat($src_left,$x,$y);
//find the rgb value
$cols = imagecolorsforindex($src_left, $rgb_left);
$r = $cols['red'];
$rgb_right = imagecolorat($src_right,$x,$y);
$cols = imagecolorsforindex($src_right, $rgb_right);
$g = $cols['green'];
$b = $cols['blue'];
//set the combined colour
$color = imagecolorallocate($anaglyph,$r,$g,$b);
//set the pixel on our canvas to the colour
imagesetpixel($anaglyph,$x,$y,$color);
}
}
//output the image as a jpeg to temp.jpg quality is 100 (best)
imagejpeg($anaglyph,'temp.jpg',100);
//don't forget to return true!
return true;
}

I’m happy for people to use this code to create their own anaglyph generators or for other projects but if you want to try this script out and create your own anglyphs go to the anaglyph creator.

Having a little experience with PHP, I decided to create a simple script to create anaglyphs. First I needed to plan out how the script was going to work. The GD library has no native image filters except in PHP5. My plan works like so.

Find the size of the image
For every x coordinate
  For every y coordinate
    Get the red value of the left pixel
    Get the green value of the right pixel
    Get the blue value of the right pixel
    Set the result pixel to red + green + blue
Output image

In PHP this results in:

// The file for the left eye
$left = 'left.jpg';
// The file for the right eye
$right = 'right.jpg';
// Get the dimensions
list($width, $height) = getimagesize($left);
// Define our source images
$src_right = imagecreatefromjpeg($right);
$src_left = imagecreatefromjpeg($left);
// Create the canvas
$bwimage= imagecreatetruecolor($width, $height);
//Reads the origonal colors pixel by pixel
for ($y=0;$y<$height;$y++){
for ($x=0;$x<$width;$x++){
$rgb_left = imagecolorat($src_left,$x,$y);
$r = ($rgb_left >> 16) & 0xFF;
$rgb_right = imagecolorat($src_right,$x,$y);
$g = ($rgb_right >> 8) & 0xFF;
$b = $rgb_right & 0xFF;
//This is where we create the color which is a mix of the red, green and blue channels
$color = imagecolorallocate($bwimage,$r,$g,$b);
imagesetpixel($bwimage,$x,$y,$color);
}
}
// This sets it to a .jpg, but you can change this to png or gif if that is what you are working with
header('Content-type: image/jpeg');
imagejpeg($bwimage);
?>

I didn’t think this would work at first because it seems too simple. My tests revealed the images I was outputing were the same as other programmes so it was working. Having said that since I cant find any red and cyan glasses I can’t really test it properly! Can anyone else verify the images below?

Update: If you want to create your own anaglyphs why not use my free anaglyph creator.