61 lines
1.4 KiB
JavaScript
61 lines
1.4 KiB
JavaScript
'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();
|