Thorn Fractal | NegativeSpace.Net

Submitted by michael on Wed, 08/05/2020 - 13:09

Description

Paul Bourke has some images and explanation of the thorn fractal. This implementation features over sampling, gamma correction, iterative improvement, and it's open source.

The Julia set version of this fractal is generated by computing the escape time for the functions

$$ x_{n+1} = \frac{x_n}{\cos(y_n)} + c_x $$

$$ y_{n+1} = \frac{y_n}{\sin(x_n)}+ c_y $$

I look forward to trying a Mandelbrot version of the fractal soon.

Source Code

      let sketch = function(p) {
        let canvas = null;

        // http://paulbourke.net/fractals/thorn

        const RADIUS = 1e10;
        const ITER = 512;

        const C = 10;

        const XMIN = -1 * Math.PI;
        const XMAX = 1 * Math.PI;
        const YMIN = -1 * Math.PI;
        const YMAX = 1 * Math.PI;

        let hScale = null;
        let vScale = null;
        let ihScale = null;
        let ivScale = null;

        let cx = C;
        let cy = -C;

        let blockSize = 64;
        let y = 0;

        function initialize() {
          p.background(0);
          y = 0;
          blockSize = 16;
          cx = p.random(-C, C);
          cy = p.random(-C, C);
        }

        function buttons() {
          $("<button>Start</button>").click(function(){p.loop();}).appendTo("#controls");
          $("<button>Stop</button>").click(function(){p.noLoop();}).appendTo("#controls");
          $("<button>Step</button>").click(function(e) { p.redraw(); p.noLoop();}).appendTo("#controls");
          $("<button>Clear</button>").click(function(e) { p.background(0); }).appendTo("#controls");
          $("<button>Restart</button>").click(function(e) { initialize(); p.loop(); }).appendTo("#controls");
          $("<button>Save</button>").click(function(e) { p.saveCanvas(canvas, 'negativespace.net.png','png'); }).appendTo("#controls");
        }

        function scaleFn(xa, xb, ya, yb, ha, hb, va, vb) {
          let xs = (hb - ha) / (xb - xa);
          let ys = (vb - va) / (yb - ya);
          let scale = Math.min(xs, ys);

          let px = xa * xs - ha;
          let py = ya * ys - va;

          return [
            function(u) { return u * scale - px;},
            function(u) { return u * scale - py;},
            function(v) { return (v + px) / scale;},
            function(v) { return (v + py) / scale;}
          ];
        }

        function escape(x0, y0, cx, cy) {
          let x = x0;
          let y = y0;

          for(let n = 0; n < ITER; n++) {
            if(x * x + y * y >= RADIUS) {
              return [n, Math.atan2(y, x)];
            }
            let x0 = x / Math.cos(y) + cx;
            let y0 = y / Math.sin(x) + cy;
            x = x0;
            y = y0;
          }
          return -1;
        }

        p.setup = function() {
          canvas = p.createCanvas($('#canvas_container').width(), 610);
          [hScale, vScale, ihScale, ivScale] = scaleFn(XMIN, XMAX, YMIN, YMAX, 0, p.width, 0, p.height);
          p.colorMode(p.RGB, 255);
          p.background(0);
          initialize();
          buttons();
          p.loop();
        };

        let maxEscape = 1;
        let minEscape = ITER;

        const from = p.color(0,0,20);
        const to = p.color(200,255,250);

        function getColor(n) {
          let s = n;
          if(minEscape < maxEscape) {
            s = (n - minEscape) / (maxEscape - minEscape);
            s = Math.pow(s, 1.5); // gamma correction
          }
          return p.lerpColor(from, to, s);
        }

        const SAMPLES = 10;

        p.draw = function() {
          $("#output").text(blockSize + "x" + blockSize + ": " + y + " of " + p.height);
          for(let x = 0; x < p.width; x+=blockSize) {

            let samples = 0;
            for(let p = 0; p < SAMPLES; p++) {
              for(let q = 0; q < SAMPLES; q++) {
                let u = ihScale(x + p * blockSize / SAMPLES);
                let v = ivScale(y + q * blockSize / SAMPLES);

                let [n,t] = escape(u,v, cx, cy);
                if(n > 0) {
                  samples += n;
                }
              }
            }

            if(samples > maxEscape && blockSize > 1) {
              maxEscape = samples;
            }
            if(samples < minEscape && blockSize > 1) {
              minEscape = samples;
            }

            if(samples >= 0) {
              let c = getColor(samples);
              p.fill(c);
              p.stroke(c);
            } else {
              p.stroke(0);
              p.fill(0);
            }
            if(blockSize > 1) {
              p.rect(x,y,blockSize,blockSize);
            } else {
              p.point(x, y);
            }
          }
          y += blockSize;
          if(y >= p.height) {
            blockSize = blockSize / 2;
            y = 0;
          }
          if(blockSize < 1) {
            $("#output").text("Done");
            p.noLoop();
          }
        };
      };

      let myp5 = new p5(sketch, 'canvas_container');

Gallery