Clifford Attractor | NegativeSpace.Net

Submitted by michael on Sun, 01/27/2019 - 15:43

Description

Clifford Attractors are attributed to Clifford Pickover. They're reminiscent of smoke gently wafting in still air. paulbourke.net has some more images, and generates colour in a different way.

The formula has four parameters, each chosen randomly on $[-2,2]$. Not all random combinations generate a strange attractor. In some they fall into a fixed cycle or even a single fixed point. If that happens click the Restart button to get a new set of parameters.

$$ x_{n+1} = sin(a y_n) + c cos(a x_n) $$

$$ y_{n+1} = sin(b x_n) + d cos(b y_n) $$

In the rendition below, the hue of a pixel is determined by how far $(x_{n+1},y_{n+1})$ is from $(x_n, y_n)$. I should figure out a way to animate one of the parameters and maybe make some gifs.

Controls

The buttons below the image control the generation. The step button will stop the generation and compute and draw the next point in the iteration. Clear will blank the drawing area. Restart will set new parameters for $a$, $b$, $c$, and $d$, without clearing the canvas. Save will download the canvas as a PNG image.

Source Code

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

    let A = 0;
    let B = 0;
    let C = 0;
    let D = 0;

    let x = 0;
    let y = 0;

    let hscale = null;
    let vscale = null;

    function scaleFn(smin, smax, dmin, dmax) {
      let k = (dmax - dmin) / (smax - smin);
      let p = smin * k + dmin;
      return function(v) { return v * k - p; }
    }

    function initialize() {
      var r = p.random();
      p.stroke(r, 100, 100, 0.2);
      p.noFill();
      A = p.random(-2,2);
      B = p.random(-2,2);
      C = p.random(-2,2);
      D = p.random(-2,2);
      $("#output").text("A=" + A + " B="+B+" C=" + C + " D=" + D);
      x = 0;
      y = 0;
    }

    function buttons() {
      $("<button>Start</button>").click(function(){p.loop();}).appendTo("#controls");
      $("<button id='stop'>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");
    }

    p.setup = function() {
      canvas = p.createCanvas($('#canvas_container').width(), 610);
      hscale = scaleFn(-4, 4, 0, p.width);
      vscale = scaleFn(-4, 4, 0, p.height);

      p.colorMode(p.HSB, 1, 100, 100, 1);
      p.strokeWeight(1);
      p.background(0);

      initialize();
      buttons();
      p.loop();
    };

    p.draw = function() {
      for(var i = 0; i < 200; i++) {
        let xn = Math.sin(A * y) + C * Math.cos(A * x);
        let yn = Math.sin(B * x) + D * Math.cos(B * y);
        d = p.dist(x,y,xn,yn) / 4;
        p.stroke(d, 100, 100, 0.2);
        p.point(hscale(xn), vscale(yn));
        x = xn;
        y = yn;
      }
    };

  };

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

Gallery