​

const source = `

  precision highp float;

  varying vec2 vTexCoord;

  uniform vec2 c;

  uniform vec2 z;

  uniform float scale;

  void main() {

    float a = c.x;

    float b = c.y;

    float x = 0.0;

    float y = 0.0;

    float da = z.x;

    float db = z.y;

    float dx = 0.0;

    float dy = 0.0;

    vec2 v = vTexCoord - 0.5;

    float vxx = v.x * v.x;

    float vxy = v.x * v.y;

    float vyy = v.y * v.y;

    float dda = scale * (vxx - vyy);

    float ddb = scale * (vxy + vxy);

    float ddx = 0.0;

    float ddy = 0.0;

    // double perterbation - for maximum accuracy, but why does it suddenly stop??

    for (int i = -1; i <= ${iterations}; i++) {

      float xx = x * x;

      float yy = y * y;

      float p = x + x + dx;

      float q = y + y + dy;

      float px = p * dx;

      float qy = q * dy;

      float pp = p + dx + ddx;

      float qq = q + dy + ddy;

      float ppx = pp * ddx;

      float qqy = qq * ddy;

      if (xx + yy + px + qy + ppx + qqy > 4.0) {

        gl_FragColor = vec4(abs(sin(vec3(i) / vec3(17, 13, 11))), 1.0);

        return;

      }

      float xy = x * y;

      x = xx - yy + a;

      y = xy + xy + b;

      float py = p * dy;

      float qx = q * dx;

      dx = px - qy + da;

      dy = py + qx + db;

      // this damned generation is probably

      // having a field day with this one...

      float ppy = pp * ddy;

      float qqx = qq * ddx;

      ddx = ppx - qqy + dda;

      ddy = ppy + qqx + ddb;

    }

    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);

  }

`;

​

var fs;

​

function setup() {

  createCanvas(512, 512, WEBGL);

  fs = createFilterShader(source);

  rectMode(CENTER);

}

​

function draw() {

  fs.setUniform("c", [0.25, 0.4]);

  fs.setUniform("z", [0, 0]);

  fs.setUniform("scale", exp(3 - 0.001 * millis()));

  rect(0, 0, width, height);

  shader(fs);

}