Getting Started with Javascript

• For this project, I would like to create a Newton Fractal
• This fractal is generated using Newton's Method
  • We don't need to "know", this method.
  • But we do need to understand it to generate the fractal.
  • Given a function $f(x)$, the derivative $f'(x)$, and an initial guess, this algorithm will find one of the roots of f(x).
  • This is an iterative method

  • Newton(f, f', guess, MAX_ITERATIONS)
    iterationCount = 0
    
    x = guess
    while (|f(x)| > ε and iterationCount < MAX_ITERATIONS) 
      xOld = x
      x = xOld - f(xOld)/f'(xOld)
      iterations++
    

  • This method approximates the function (f(x)) with the line tangent to the function at a point.
    • We find where the tangent line intercepts the x axis.
    • That should be a better guess for when the function intercepts the x axis.
    • 
  • Remember point slope form for a line $y - y_1 = m(x - x_1)$
    • The slope of a line at a given point $x$ is $m = f'(x)$
    • A point is (guess, f(guess)), or $(x_{o}, f(x_{o}))$
    • So: $$y - f(x_{o}) = f'(x_{o}) (x - x_{o})$$
    • But we want the root, or where y = 0. $$0 - f(x_{o}) = f'(x_{o}) (x - x_{o}) $$
    • Solving for X $$ - f(x_{o}) = f'(x_{o}) (x - x_{o}) \\ - f(x_{o})/f'(x_o) = x - x_{o} \\ x_o - f(x_{o})/f'(x_o) = x \\ x = x_o - \frac{f(x_o)}{f'(x_o)} \\ $$
  • A problem/joy if Newton's Method is that the root found depends on the starting point.
• Newton's methods works with complex numbers!
  • So we will form a Newton Fractal as follows
    • Given an area in the complex plane
      • (a+bi) to (c+di)
      • where a < c and b < d
    • Divide the plane into a regular grid.
    • Use each point in the grid as a starting point for Newton's Method.
    • Color each point
      • Colored based on the root found.
      • Shaded based on the number of iterations it took to find the root.
    • See the Example
      • Just a little variation in the starting point can give a different root.
      • This is the start of Chaos Theory
      • And a great source for pretty pictures.
  • Some notes
    • You don't need to understand Newton's method, just how it is applied.
    • You don't need to understand complex numbers, but we will discuss them further.
    • This is probably not the best application for javascript
      • Computations will take a while.
    • This is a tool we will use to explore
      • Graphics in general
      • HTML
      • Javascript
      • The HTML5 Canvas
    • Once we are finished, I expect you to be able to write programs in javascript, and user interfaces in HTML that interact/draw on the HTML5 canvas.
      • You should study the code given.
      • Ask questions
      • Modify the code