Having trouble calculating mandelbrot set iterations

So I read up this article: http://www.wikihow.com/Plot-the-Mandelbrot-Set-By-Hand But I'm stuck at step 7. I'm drawing the set in javascript canvas.

All I need is basicly the C value I guess.

for (var y = 0; y < ImageHeight; y++) {
    for (var x = 0; x < ImageWidth; x++) {

        // Pixel-Position for ImageObject
        var xy = (x + y * image.width) * 4;

        // Convert Image-Dimension to a radius of 2
        var xi = ((x / ImageWidth) * 4) - 2;
        var yi = ((y / ImageHeight) * 4) - 2;

        for (var n = 0; n < MaxIterations; n++) {

            // Complex number stuff..?
            z = (xi*xi) + (yi*yi) + c;
            c = 0; // Somethig with z ..?

            if (z < 4) {

                image.data[xy] = inner_color[0];
                image.data[xy+1] = inner_color[1];
                image.data[xy+2] = inner_color[2];
                image.data[xy+3] = Math.round(n * cdiff);

            } else {

                image.data[xy] = outer_color[0];
                image.data[xy+1] = outer_color[1];
                image.data[xy+2] = outer_color[2];
                image.data[xy+3] = Math.round(n * cdiff);

                break;
            }
        }
    }
}

I also read up a lot about imaginary numbers and stuff, but I didn't quite understood how to calculate with them. And they seem somehow useless to me because you'd have to convert them back to real numbers anyways to do logic operations in javascript for example.

Here is what it looks like: [removed]
If you remove the 2 at the end of the url, you see another version where I just rewrote a little c++ snippit. But zooming is somehow weird, which is why I want to write it all on my own..

I understood the basic concept of the mandelbrot set creation but as I said the complex part is troubling me. Is there maybe an even simpler explanation out there ?

Solution

You have to understand this first:

z = z^2 + c

Let's break it down.

Both z and c are complex numbers (and a recent question taught me to emphasize this, they have fractional digits, and can look like this: c=-0.70176-0.3842i). Complex numbers can have a part that is 'not real', the proper term is imaginary part, and you write a single complex number in the form:

(a + bi) which is the same as: (a + b*i)

If b is 0, then you have a a + 0i which is simply a so without an imaginary part you have a real number.

Your link does not mention the most important property of a complex number, especially a property of its imaginary part that i == sqrt(-1). On the field of Real numbers there is no such thing as a square root of a negative number and that's where complex numbers come in and allow you to have the square root of -1. Let's raise i to the power of 2: i^2 == -1, magick!

The imaginary part (i) has to be either handled by you (the special square-ing) or the programming language you work with will offer a Complex type which handles it for you.

Now back to expanding z^2:

z == (a+bi), therefore z^2 == (a+bi)^2 so z^2 == (a^2 + bi^2 + 2*a*bi).

Let's break this down as well:

a^2 => this is simple, it is a real number
bi^2 => The tricky part. This is really b^2*i^2. And we got here an i^2, which is -1 and that makes it b^2*-1 or : -b^2. So this is also a real number.
2*a*b*i => this will be the imaginary part

Result: z^2 = (a^2-b^2+2*a*bi)

Example (a bit over-detailed. You can think of it as the first iteration in your loop):

z = (5 + 3i)
z^2 = (5 + 3i)^2
    = (5^2 + 3^2*i^2 + 2*5*3i)
    = (25 + 9i^2 + 30i)
    = (25 + 9*-1 + 30i)
    = (25 - 9 + 30i)
    = (16 + 30i)

Now if you understand the iteration and the multiplication of complex numbers, some words on Mandelbrot (and on the c value):

When you want to create a Mandelbrot set, you are really looking for points on the complex plane, that never goes to infinity if iterated over - say 50 times - with the iteration discussed above. The Mandelbrot set is the black part of the usually seen "Mandelbrot" pictures and not the shiny, colored part.

Mandelbort set, taken from Wikipedia

The usual workflow is this:

choose a point on the complex plane, say (1.01312 + 0.8324i) => this will be the value of c !
iterate over a number of times as stated before => z = z^2 + c. For a starter do this 50 times. This will give you a complex number as result.
if any part of the resulting complex number (either the Real, or the Imaginary) is equal to, or larger than 2, then we assume this point would go to infinity and we consider this point not being part of the Mandelbrot set*. This is the case when you need to color the point (this is the colorful part of the Mandelbrot set). If both part of the complex number are less than 2, we assume the point would never go to infinity (even if iterated over zillion times), and consider this point as part of the Mandelbrot set and its color will be black.
repeat (choose the next point, put its value into c, put zero into z not to mess up the calculation and start iterating again)

*actually, verifying if a point is part of the set is a bit more complicated, but this works well for prototypes