Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tompascall/mandel

This is a basic application for playing with the Mandelbrot set.
https://github.com/tompascall/mandel

Last synced: about 1 month ago
JSON representation

This is a basic application for playing with the Mandelbrot set.

Awesome Lists containing this project

README 

        
This is a basic application for studying the Mandelbrot set. As Wikipedia says "The Mandelbrot set is the set of complex numbers 'c' for which the sequence ( c , c² + c , (c²+c)² + c , ((c²+c)²+c)² + c , (((c²+c)²+c)²+c)² + c , ...) does not approach infinity." So this mathematical operation (we add the square of a complex number to the complex number, than we also do the same with the result of this operation) is iterated on a complex number again and again.
 



The graphical representation of the set is based on the fact, that a complex number can be visually represented as a pair of numbers (a, b) forming a vector. This pair of numbers can be considered as horizontal and vertical coordinates of the complex plane. The complex plane can be paralleled to the canvas, the coordinates of the vector can be paralleled to the coordinates of a point in the canvas.



You have some color schemes to try. These are different kinds of sequences in the RGB color space. You can see the logic of the scheme by the Demo schemes button. This shows that what color belongs to the given iteration (from 1 to max. iteration).



It is quite a paradox, but most of the colored points (more precisely the complex numbers that is represented by the colored points) don't belong to the set. These are the points, that approach infinity, as we apply on them the iteration repeatedly. The color of the point depends on the number of iterations that is necessary to know whether the complex number would approach infinity. If the absolute value of the iterated complex number reaches 2, it means that the iteration would approach infinity. If we reach the maximum iteration but the absolute value doesn't reach 2, we suppose that the point in question belongs to the set, and it has (here) white color.



It is possible to enlarge an area of the set by marking out the area with your mouse. Just push left mouse button on the upper-left corner of the area, then draw a line to the bottom-right corner. The enlargeable area is a square.



When you make a lot of enlargement after each other, you can reach a point where the numbers cannot be represented by standard javascript numbers anymore, because they are too small. The range of the studied numbers is from (-2 + 2i) to (2 - 2i) at the beginning, and it is divided into as many parts as the width and height of the canvas. When you enlarge, this range becomes smaller, so the step between the parts. This step can become so small, that cannot be represented in this app. There are solutions e.g. math.js, that give tools for representing much smaller numbers. If the picture is being deformed or you can see only weird lines, that means you reached the limit of representation.



Update: math.js bignumber has already been used in the app, when the range of the enlarged area approaches a critical value. You are warned before that, because the calculation becomes really slow with big numbers. Wach out that these big numbers also have their limits, but I think when you reach this you will be a few years older.



You can adjust the size of the canvas in pixels. The shape of the canvas is square.



The maximum iteration can be set, too. Take care that a too big number may freeze your browser for a long time. I tested up to 20000, and it worked well.



This is not the app that you can extremly enjoy on a mobile phone. However, you can use it on touchscreen devices limitedly. To enlarge an area, swipe the diagonal of the enlarging area.



The app uses the following libraries:





You can download the project from here.



In my experience it is the best choice to run the app on Firefox. Chrome is really slow, the other browsers are about twice faster. IE is suprisingly fast, but it has the drawback that you cannot save the picture by right clicking on it, while Chrome and Firefox works well as regards saving the canvas. Safari is quite fast too, but you cannot save the picture.



You can try the app here.