RosettaCodeData/Task/Pythagoras-tree/JavaScript/pythagoras-tree-2.js

22 lines
1.2 KiB
JavaScript

let base = [[[-200, 0], [200, 0]]];
const doc = [...Array(12)].reduce((doc_a, _, lvl) => {
const rg = step => `0${((80 + (lvl - 2) * step) % 256).toString(16)}`.slice(-2);
return doc_a + base.splice(0).reduce((ga, [a, b]) => {
const v = [b[0] - a[0], b[1] - a[1]];
const [c, d, w] = [a, b, v].map(p => [p[0] + v[1], p[1] - v[0]]);
const e = [c[0] + w[0] / 2, c[1] + w[1] / 2];
base.push([c, e], [e, d]);
return ga + '\n' + `<polygon points="${[a, c, e, d, c, d, b]}"/>`;
}, `<g fill="#${rg(20)}${rg(30)}18">`) + '\n</g>\n';
}, '<svg xmlns="http://www.w3.org/2000/svg" width="1200" stroke="white">\n') + '</svg>';
const [x, y] = base.reduce(([xa, ya], [[x, y],]) => [Math.min(xa, x), Math.min(ya, y)], [0, 0]);
const svg = doc.replace('<svg ', `<svg viewBox="${[x, y, -x - x, -y]}" `);
if (globalThis.global) { // if the script is run from node.js - save the svg to a file
require('node:fs').writeFileSync('Pythagor_tree.svg', svg);
} else { // if is run from the browser console or from the <script> tag of an html document
// - display svg in the browser window
document.documentElement.innerHTML = svg, '';
}