'use strict';

import { html } from 'the-dom';
import { applyChaos } from './chaos';

const { body } = html(document);

const content = body.find('#content');
const plotting = body.find('#plotting').node;
const ctx = plotting.getContext('2d');

const padding = 40; // padding between the canvas edges and the points
let width, height;

const linearTransform = (a, b, c, d, e, f) => point => [
    a * point[0] + b * point[1] + e,
    c * point[0] + d * point[1] + f
];

/**
 * Re-render the scene from scratch
 *
 * @return {null}
 */
const render = () => {
    plotting.width = width + 2 * padding;
    plotting.height = height + 2 * padding;

    // do not plot (very) small sizes
    if (width < 1) {
        return;
    }

    // do the chaos game
    const image = ctx.getImageData(padding, padding, width, height);

    applyChaos(image, [0, 0], 500000, [
        linearTransform(0, 0, 0, 0.16, 0, 0),
        linearTransform(.85, .04, -.04, .85, 0, 1.6),
        linearTransform(.20, -.26, .23, .22, 0, 1.6),
        linearTransform(-.15, .28, .26, .24, 0, .44)
    ], [.01, .85, .07, .07]);

    ctx.putImageData(image, padding, padding);
};

/**
 * Update the scene when the window has been resized
 *
 * @return {null}
 */
const resize = () => {
    width = content.node.clientWidth - 2 * padding;
    height = content.node.clientHeight - 2 * padding;

    render();
};

window.onresize = resize;
resize();