COSC 231  FAL 2012  Program #6  Fractals and GUIs in Javascript

Distributed: 19 November 2012       Due: 3 December 2012

Note: You will be implementing this GUI and fractal code as a Java applet for your 
final project

Write a GUI that will allow a user to choose a particular fractal to display and set
certain controls of the display.  Use at least two fractals: Sierpinski triangle and 
Mandelbrot set.

User controls:
Clear		- to clear the drawing surface.  If currently drawing, continue drawing from
current calculation

Set Points	- use mouse control to select corner points for fractal

Speed 	- let user choose the speed of the iteraction. The speed can be changed during
fractal generation. Fractal generation will not cease or reset.

Color	- when Sierpinski is selected, user can (and change) color of pen.
		  when mandelbrot is selected, user cannot use color.
		  
Start Sierpinski	- Causes a clearing of drawing surface, then draws the 
			sierpinski from the beginning with the current settings
			
Start Mandelbrot	- Causes a clear of drawing surface, then draws the mandelbrot
			set from the beginning  with current settings.


Sierpinski triangle (gasket)

The Sierpinski triangle generation algorithm is given in Savitch's book (3rd edition) 
on pp 1061-2. That text is reproduced here.

Write a program that draws a Sierpinski gasket. A Sierpinski gasket or triangle is a 
type of fractal. It is an example of how an orderly structure can be created as a 
result of random, chaotic behavior. The creation of a Sierpinski gasket is fairly simple. 
There are three points that form the corners of a triangle. In the figure below, they 
are labeled as A, B, and C.

To draw the Sierpinski gasket follow the algorithm:
1. Randomly pick one of the three corners. Call this the current point. (Alternatively, 
you could also randomly select any point inside the triangle).
2. Randomly pick one of the three corners. Call this the target point.
3. Calculate the midpoint between the current point and the target point.
4. Draw a single pixel at the midpoint.
5. Set the current point to the midpoint.
6. Go back to step 2 and repeat many times (e.g., 500 iterations).

It would seem like you should get a random mess of dots since the algorithm randomly 
picks a target corner each time. Instead, if this process is repeated many times, 
you will get a very orderly picture with a repeating structure: < picture from Savitch 
is not reproduced here>.

  B
  /\
 /  \
A----C



/***********************************************************************************/
Mandelbrot set

There are several explanations of the Mandelbrot set. A simple one, including the 
iterative algorithm for determining if a number is a member of the set, is given at 
http://www.ddewey.net/mandelbrot/

Here is another simple explanation:
http://t16web.lanl.gov/Kawano/gnuplot/fractal/mandelbrot-e.html


Each point, C, in the complex plane is a member of the Mandelbrot set if after 
iterating (forever), the
magnitude of Z (Z = a + i*b, magnitude(Z) = sqrt( a^2 + b^2) is less than 2.


That is, each point C = x + i*y has its own Z value.

Z iterates as follows:
Z(0) = 0.0 + i * 0.0
Z(n+1) = Z(n) * Z(n) + C = ( an + i*bn) * (an + i*bn) + (x + i*y)

Represent a point C = x + iy on the drawing surface as (x, y).


Khan academy on youtube has a nice and sufficient explanation for complex numbers 
that will take a little over 20 minutes to view.
http://www.youtube.com/watch?v=kpywdu1afas Complex numbers (part 1)
http://www.youtube.com/watch?v=EQviquyrDxA&feature=related Complex numbers (part 3
http://www.youtube.com/watch?v=dWjg6fiKNOw&feature=related Complex numbers (part 11)



/*********************************************************/
So, in pseudo-code:
// initialize z
for (int row=0; row <=WIDTH; row++)
  for (int col = 0; col <= HEIGHT; col++) {
    (z[row][col]).real = 0;
    (z[row][col]).img = 0;
    }

// iterate for long enough
for (int t = 0; t < MAX_ITERATION; t++) {
  for (int row=0; row <=WIDTH; row++)
    for (int col = 0; col <= HEIGHT; col++) {
      compute real and imaginary values of z for point (row, col);
        if ( sqrt (( (z[row][col]).real ^2) + ( (z[row][col]).img ^2) ) ) < 2.0) 
        	color (row,col) INSET;
			else color (row, col) OUTSET;
			
		} // for int col
	} // for int t