Julia Set of sin(z) | NegativeSpace.Net

Submitted by michael on Wed, 12/23/2020 - 14:26
Description
This is a rendering of the Julia set for $z' = c \sin(z)$ where $c=1+0.2 i$.
This version includes gamma correction for improved contrast ($\gamma = 0.3$), a linear scaling of the colours from darkest to lightest, and $8x8$ sub-pixel sampling to generate a high-quality antialiased image. It might take a long time to complete rendering.
Source Code
          let sketch = function(p) {
            let canvas = null;

            const S = 4

            const XMIN = -S;
            const XMAX = S;
            const YMIN = -S;
            const YMAX = S;

            const SAMPLES = 4;
            const ITERATIONS = 400;
            const RADIUS = 50;

            const GAMMA = 0.3;
            const COLOR1 = p.color(0, 0, 20);
            const COLOR2 = p.color(200, 255, 200);

            let maxEscape = 1;
            let minEscape = ITERATIONS * SAMPLES * SAMPLES;

            let blockSize = 64;

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

            let y = 0;

            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;}
              ];
            }

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

            function initialize() {
              p.background(0);
              p.noStroke();
              y = 0;
              blockSize = 64;
            }

            function escape(u,v) {
              let cx = 1.0;
              let cy = 0.2;
              for(let n = 0; n < ITERATIONS; n++) {
                if(v > 50) {
                  return n;
                }

                let a = Math.sin(u) * Math.cosh(v);
                let b = Math.cos(u) * Math.sinh(v);

                u = cx * a - cy * b;
                v = cy * a + cx * b;
              }
              return 0;
            }

            function sample(x,y) {
              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);

                  samples += escape(u,v);
                }
              }

              if(samples > maxEscape && blockSize > 1) {
                maxEscape = samples;
                console.log(['maxEscape', maxEscape]);
              }
              if(samples < minEscape && blockSize > 1) {
                minEscape = samples;
                console.log(['minEscape', minEscape]);
              }

              return samples;
            }

            function getColor(n) {
              let s = n;

              if(minEscape < maxEscape) {
                s = (n - minEscape) / (maxEscape - minEscape);
                s = Math.pow(s, GAMMA); // gamma correction
              }
              return p.lerpColor(COLOR1, COLOR2, s);
            }

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

                let n = sample(x,y);
                let c = getColor(n);

                if(blockSize > 1) {
                  p.fill(c);
                  p.rect(x,y,blockSize,blockSize);
                } else {
                  p.stroke(c);
                  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