Iterated Function Systems | NegativeSpace.Net

Submitted by michael on Sun, 04/05/2020 - 13:00
Description
Randomly choose some affine transformations and apply them randomly to a point. Colour the transformed point based on the selected transfomation.
Source Code
      let sketch = function(p) {
        let canvas = null;

        var F = [];
        var x = 0;
        var y = 0;

        var hScale = null;
        var vScale = null;

        const FN_COUNT = 4;
        const SCALE = 2;

        /**
         * Generate a scale function.
         *
         * @param smin
         * @param smax
         * @param dmin
         * @param dmax
         * @returns {function(*): number}
         */
        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() {
          p.background(0);

          F = [];
          for(i = 0; i < FN_COUNT; i++) {
            F.push({
              a: p.random(-1, 1),
              b: p.random(-1, 1),
              c: p.random(-1, 1),
              d: p.random(-1, 1),
              e: p.random(-1, 1),
              f: p.random(-1, 1),
            });
          }
        }

        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");
        }

        p.setup = function() {
          canvas = p.createCanvas($('#canvas_container').width(), 610);
          initialize();
          buttons();
          hScale = scaleFn(-SCALE, SCALE, 0, p.width);
          vScale = scaleFn(-SCALE, SCALE, 0, p.height);
          p.colorMode(p.HSBA);
          p.loop();
        };

        p.draw = function() {
          for(i = 0; i < 1000; i++) {
            n = Math.floor(p.random(0, FN_COUNT));
            p.stroke('hsba(' + (360 * (n / FN_COUNT)) + ', 100%, 100%, 0.5)');
            f = F[n];
            xn = f.a * x + f.b * y + f.e;
            yn = f.c * x + f.d * y + f.f;
            x = xn;
            y = yn;
            p.point(hScale(x), vScale(y));
          }
        };
      };

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