Having trouble calculating mandelbrot set iterations

2024/2/27 8:36:02

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 ImageObjectvar xy = (x + y * image.width) * 4;// Convert Image-Dimension to a radius of 2var 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 ?


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 !
  • before the first iteration put (0, 0i) into z then iterate over a number of times as stated before => z = z^2 + c. Yes, you are squaring a point and adding that same point to it, this is a very important attribute of the Mandelbrot set. 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 and calculate)

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


Related Q&A

Antd Select Component mode multiple, checkbox styling

Using antd NPM package, select component, in multiple mode, by default checkbox shows up at right. I want to align it to left and style it like tick mark in the box followed by a label. Also, need sear…

Jquery - waiting for user input

im trying to make a popup that comes up to confirm a users action (deleting a row in a table, for example..). aiming at making the popup entirely HTML and Javascript. What i cant get my head around is …

Read email headers in Outlook Web Access (OWA)

I am developing a outlook Web App (Office 365 Developer). Regarding that, is there a way to read the headers of the selected mail which lays on inbox?. I am using Exchange server 2013. I would like to…

I am trying to send text- messages on WhatsApp with javascript?

I am trying to send text messages on whatsapp web version on chrome. (www.web.whatsapp.com)This is the code:document.getElementsByClassName("input")[1].innerHTML="This message was writte…

Ajax functions like .load() strip out comments from the HTML. How can I keep the comments?

For example, $(#some-div).load(http://foo.bar #content) will retrieve #content from http://foo.bar but with all HTML <!--comments--> stripped.How can I retrieve the contents of #content including…

Typescript: object assignment with excess keys seems broken

First variant: I pass object data from the const. Second variant: I pass data directly in the function. Why do I have an error only in the second variant? First: const a = {name: 123,age: 30,excess: […

angularjs Click button to show next / previous div

I have a stack of Divs created with ng-repeat. PlunkerQuick Image:Is it possible to create this stack of div work like a slider? Like: if I press Next button Top div will slide away and 2nd top will s…

Chrome extension to parse google search results

Im trying to make a little extension that checks the google search results for wikipedia articles, and adds a little extra link afterwards. But am having a little trouble parsing the search results. It…

How to access google maps api in China

I am using google maps api to get user location in my IBM Mobilefirst project and it is working fine as expected in all the countries except china.I know this is because china has blocked access to goo…

dijit.form.filteringselect dynamically change options

I have a dijit.form.FilteringSelect component and I want to change the options dynamically. But I get the store from the dijit.form.FilteringSelectwith its store property; there is no setter function i…