Tinkerbell Map | NegativeSpace.Net

Submitted by michael on Sat, 01/19/2019 - 14:29

Description

The Tinkerbell map is a chaotic dynamical system with an interesting strange attractor. The iterated function is

$$
x_{n+1} = x_n^2 - y_n^2 + a x_n + b y_n
$$

$$
y_{n+1} = 2 x_n y_n + c x_n + d x_n
$$

In this example, the parameters are $a=0.9$, $b=-0.6013$, and $c=2.0$. $d$ is randomly chosen on $(0.35, 0.55)$, and the colour is based on $d$.

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. Restart sets a new random colour and $d$ parameter. The save button will download the image to your computer.

Source Code

let sketch = function(p) {
    /**
     * Initial values for the iteration.
     */
    let a = 0.9;
    let b = -0.6013;
    let c = 2.0;
    let d = 0.5;
    let x = -0.7;
    let y = -0.64;

    /**
     * P5.js canvas.
     */
    let canvas = null;

    /**
     * Horizontal scale function.
     */
    let hscale = null;

    /**
     * Vertical scale function.
     */
    let vscale = null;

    /**
     * Number of points/iterates per call to draw.
     */
    let pointsFrame = 20;

    /**
     * Maximum number of points to draw in a colour.
     * @type {number}
     */
    let pointsParam = 10000;

    /**
     * Point count.
     */
    let points = 0;

    /**
     * Initialize the drawing.
     */
    function initialize() {
        x = -0.7;
        y = -0.64;
        r = p.random();
        d = p.lerp(0.36, 0.55, r);
        p.stroke(r, 100, 100, 0.5);
        $("#output").text("d=" + d);
        points = 0;
    }

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


    /**
     * P5 setup function. Called automatically by P5.
     */
    p.setup = function() {
        canvas = p.createCanvas($('#canvas_container').width(), 610);
        p.colorMode(p.HSB, 1, 100, 100, 1);
        p.strokeWeight(1);
        p.background(0);

        initialize();
        hscale = scaleFn(-2, 2, 0, p.width);
        vscale = scaleFn(-2, 2, 0, p.height);
        buttons();
    };

    /**
     * P5 draw function. Iterates the function and draws pointsFrame points per call.
     */
    p.draw = function() {
        for(i = 0; i < pointsFrame; i++) {
            x1 = x*x-y*y+a*x+b*y;
            y1 = 2*x*y+c*x+d*y;
            x = x1;
            y = y1;
            p.point(hscale(x), vscale(y));
        }
        points += pointsFrame;

        // If the point gets too far away from the origin or there are
        // enough points drawn, start over with a random colour and d.
        if(p.abs(x) > 4 || p.abs(y) > 4 || points > pointsParam) {
            initialize();
        }
    };

    // Everybody likes control.
    $("#start").click(function(e) { p.loop(); });
    $("#stop").click(function(e) { p.noLoop(); });
    $("#step").click(function(e) { p.redraw(); p.noLoop();});
    $("#restart").click(function(e) { initialize(); p.loop(); });
    $("#save").click(function(e) { p.saveCanvas(canvas, 'negativespace.net.png','png'); });
};

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

Gallery