var maxIter = 100;

​

var minSlider, maxSlider;

​

var counter = 0;

var size = 400;

​

function setup() {

  createCanvas(400, 400);

  pixelDensity(1);

  colorMode(HSB);

  minSlider = createSlider(-2, 0, -0.516, 0.01);

  maxSlider = createSlider(0, 2, 2, 0.01);

​

  background(0);

}

​

function mouseReleased() {

  counter = 0;

  loop();

}

​

function draw() {

  loadPixels();

  for (var y = 0; y < height; y++) {

    var a = map(counter, 0, size, minSlider.value(), maxSlider.value());

    var b = map(y, 0, size, minSlider.value(), maxSlider.value());

    var originA = a;

    var originB = b;

​

    var n = 0;

    for (; n < maxIter; n++) {

      var nextA = a * a - b * b;

      var nextB = 2 * a * b;

      a = nextA + originA;

      b = nextB + originB;

      if (abs(a + b) > 16) {

        break;

      }

    }

    var bright;

    bright = map(n, 0, maxIter, 0, 1);

    bright = map(sqrt(bright), 0, 1, 0, 255);

    if (maxIter == n) {

      bright = 0;

    }

​

    var pos = (counter + y * width) * 4;

    pixels[pos + 0] = min(bright - 20, 255);

    pixels[pos + 1] = bright;

    pixels[pos + 2] = 0;

    pixels[pos + 3] = 255;

  }

​

​

  updatePixels();

​

  counter++;

  if (counter >= width) {

    counter = 0

    size *=10;

  }

​

}