March 15, 2016

Lorenz Attractor

It's unfortunate that I haven't been able to keep up with graphics much lately.  Before I left for China I'd been dabbling a little bit with WebGL, as I find it easier to set up and less error prone than OpenGL on Visual Studio.

I was reading the Black Swan (not the ballerina movie) and I got pretty happy when I saw the author start talking about fractals.  He mentioned the Lorenz system as well so I looked it up.

The Lorenz system, when plotted, looks like a butterfly or a figure eight.  I'm not sure but this might be where the "butterfly effect" comes from, because it looks like a butterfly and it basically illustrates how, if you slightly change the input parameters to the system of differential equations that make up the Lorenz system, you get a very different plot.  Other websites do a much better job of explaining than I do, I just wanted to show off my picture:


Without all the shader and WebGL code, here is the main logic to plotting this system:

  var sigma =  10.0;
  var rho = 28.0;
  var beta = 8.0/3.0;
  var x = 1.0, y = 1.0, z = 1.0;

  var colors = [];
  var verts = [];

  var I = 100000;
  for (var i = 0; i < I; i++) {
    var xnew = sigma*(y - x);
    var ynew = x*(rho - z) - y;
    var znew = x*y - beta*z;
   
    x = x + xnew*0.001;
    y = y + ynew*0.001;
    z = z + znew*0.001;
   
    var r = 0.5 - ((i/I) * 0.3);
    var g = 0.0;
    var b = r - 0.05;
    colors.push(r, g, b);
    var scale = 0.25;
    verts.push(x*scale, y*scale, z*scale);
  }

The parameters sigma, rho, and beta are the things you can change to make the plot different: values of sigma = 10, rho = 28, beta = 8/3 give the prettiest picture.

In the live version the system turns different colors of reds and purples and fades ever so slightly only to burn bright again.  Next I want to have the camera rotate around the system which I completely forget how to do, time to pull up old rendering notes from three years ago.