The Standard Map | NegativeSpace.Net

Submitted by michael on Mon, 02/04/2019 - 17:40

Description

The standard map is the first chaotic thing I remember seeing, probably in an AfterDark screen saver. It has an interesting physical interpretation involved rotors, but that isn't important for the pretty pictures.

$$ x_{n+1} = x_n + K \sin(y_n) \mod 2\pi $$

$$ y_{n+1} = y_n + x_n + K \sin(y_n) \mod 2\pi $$

The result is a bunch of points the unit square scaled up by a factor of $ 2\pi $. $K$ is randomly chosen on $(0, 4)$. Each step of the computation takes 200 points and maps them into 200 other points following the formula above. The colour of each point is set based on its initial $y$ coordinate.

Start and Stop work as indicated. Step draws one round of pixels in the computation. Reseed generates a new set of initial values and continues the computation. Clear blanks the canvas and continues drawing. Restart will clear the canvas, pick a new $k$ and reseed the initial values. Save will download an image to your computer.

Source Code

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

            const TWO_PI = Math.PI * 2;

            let size = 200;
            let points = [];

            let k = 0;

            let hScale = null;
            let vScale = null;

            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 reseed() {
              for(let i = 0; i < size; i++) {
                let t = p.random(0, TWO_PI);
                points[i] = {
                  x: t,
                  y: p.random(0, TWO_PI),
                  c: t / TWO_PI,
                }
              }
            }

            function initialize() {
              k = p.random(0, 4);
              reseed();
              p.background(0);
              $("#output").text(k);
            }

            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>Reseed</button>").click(function(e) { reseed() }).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 mod(x,y) {
              return x - y * Math.floor(x / y);
            }

            p.setup = function() {
              canvas = p.createCanvas(600, 600);
              [hScale, vScale] = scaleFn(0, TWO_PI, 0, TWO_PI, 0, p.width, 0, p.height);
              p.colorMode(p.HSB, 1, 100, 100, 1);
              p.background(0);

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

            p.draw = function() {
              for(let i = 0; i < size; i++) {
                let xn = points[i].x + k * Math.sin(points[i].y);
                let yn = points[i].y + xn;
                points[i].x = mod(xn, TWO_PI);
                points[i].y = mod(yn, TWO_PI);
                p.stroke(points[i].c, 100, 100 , 0.4);
                p.point(vScale(points[i].y), hScale(mod(points[i].x + Math.PI, TWO_PI)));
              }
            };
          };

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

Gallery