JSFiddle - React, Tailwind, and code Playground

by Georg Mierau

HTML

<html><canvas id="a" width="640" height="320"></canvas><script>
</script></html>

JavaScript

var canvas = document.getElementById("a");
var b = canvas.getContext("2d");

// начать описание контура
function begin(){b.beginPath();}
// начать линию с точки
function from(p) {b.moveTo(s[8] + p[0], s[9] - p[1]);}
// привести линию к точке
function to(p){b.lineTo(s[8] + p[0], s[9] - p[1]);} 
// привести линию к начальной точке, не требуется если выполняется только заливка
function close(){b.closePath();}
// заливка
function fill(color){b.fillStyle = color; b.fill();}
// обводка контура линией
function line(){b.strokeStyle = "#444"; b.lineWidth = 0.5; b.stroke();}
function line_white(){b.strokeStyle = "#fff"; b.lineWidth = 1; b.stroke();}
function line_black(){b.strokeStyle = "#444"; b.lineWidth = 1.5; b.stroke();}

var s;
function prepare()
{
    var sqrt = Math.sqrt;
    var fi = (sqrt(5) - 1) / 2;
    var fb = (sqrt(5) + 1) / 2;
    var f3 = sqrt(3 + fi);
    var f2 = sqrt(2 - fi);
    //координаты базовых векторов для всех десяти направлений
    var vt = [[ 2, 0, 0, 0], [ 1, 1, 0, 1], [ 0, 1, 1, 0], [ 0,-1, 1, 0], [-1,-1, 0, 1],
              [-2, 0, 0, 0], [-1,-1, 0,-1], [ 0,-1,-1, 0], [ 0, 1,-1, 0], [ 1, 1, 0,-1]];
    // Константы множители координат
    var c = [1/2, fi/2, f3/2, f2/2]
    // Общий массив констант
    // нулевой элемент для контекста
    // седьмой для дополнительных данных рисования.
    // восьмой и девятый для указания центра рисования
    // десятый для размера шага.
    var s = [0, vt, c, fi, f3, f2, 0, 0, 0, 0];
    return s;
}

s = prepare();
s[0] = b; 
s[7] = 1;      // доля последнего уровня
s[8] = 500/2; // сдвих координаты x
s[9] = 320/2;  // сдвиг координаты y

var f = []; // слои разбиения.
f[0] = [];
f[0].push([0,[ 0, 0, 0, 0],0]); 
f[0].push([1,[ 0, 0, 0, 0],0]);
f[0].push([2,[ 0, 0, 0, 0],3]);
f[0].push([3,[ 0, 0, 0, 0],3]);
f[0].push([2,[ 0, 0, 0, 0],7]);
f[0].push([3,[ 0, 0, 0, 0],7]);

fi = s[3]; // берем из констант коэффициент
var levels = 3; // количество расчетных уровней
s[7] = 0.1 * 10; // степень проявления...