Week 1 Complex Numbers Exercise: Julia Sets

Chris Tralie

Getting Started

Click here to download the repository of skeleton code for this exercise. You will be editing the file juliaset.js, and you will run juliaset.html to view the results


A fractal is an object which is "self-similar," or made up of smaller copies of itself.

One kind of fractal emerges when we consider the behavior of the following iterative equation over complex variables

\[ z_{n+1} = z_n^2 + c \]

where c is a constant, and we specify some initial z0. For a fixed c, we can try different initial conditions and see how long it takes them to "escape," or move beyond a certain radius from the origin.

Your task will be to implement a program in pure Javascript to draw the Julia Set given different parameters, based on the following variables

  • CRe, CIm: The real and imaginary components of the constant complex number that's added at each iteration.
  • uEscape: The escape radius of the equation. We consider a point escaped when \[ \text{real}^2 + \text{imag}^2 > \text{uEscape}^2 \]
  • MaxIters: This defines how many iterations you should check before giving up and capping the escape number as MaxIters.

Every pixel is a different initial condition. You should color pixels according to how long they take to escape. It's up to you how you color them, but you should use the drawPixel method

this.drawPixel(x, y, R, G, B);

Where R, G, and B are the red, green, and blue components of the color, respectively. See the widget below:

You might want to start with grayscale, but you can make the colors more sophisticated as you go on.

Possible Extensions

  • Add the capability to zoom in or move the center
  • Use a more complicated colormap to make the colors pop