JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id="main"></canvas>

CSS

body{
    margin: 0;
    overflow: hidden;
}

JavaScript

let canvas = document.getElementById('main');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let ctx = canvas.getContext('2d');


function P(x, y) {
	return {x: x/2, y: y/2};
}

let letterPositions = [
	P(0, 0.0), P(1, 0.0), P(2, 0.0), //  0  1  2
	P(0, 0.5), P(1, 0.5), P(2, 0.5), //  3  4  5
	P(0, 1.0), P(1, 1.0), P(2, 1.0), //  6  7  8
	P(0, 1.5), P(1, 1.5), P(2, 1.5), //  9 10 11
	P(0, 2.0), P(1, 2.0), P(2, 2.0), // 12 13 14
];

let letterParts = [
    // vertical lines
	[[0, 6], [6, 12]],
	[[2, 8], [8, 14]],
    // angles
    [[0, 4], [1, 3]],
    [[3, 7], [4, 6]],
    [[6, 10], [7, 9]],
    [[9, 13], [10, 12]],
    [[1, 5], [2, 4]],
    [[4, 8], [5, 7]],
    [[7, 11], [8, 10]],
    [[10, 14], [11, 13]],
];

const makeLetter = (chance) => {
	return [
    	... _.shuffle(letterParts)
        /* .filter(_ => Math.random() < chance) */
    	.map(sectionChoices => 
        	sectionChoices[Math.floor(Math.random() * sectionChoices.length)]
            .map(i => letterPositions[i])
        )
        .slice(0, Math.floor(Math.random() * 4 + 2)),
        [1, 13].map(i => letterPositions[i])
    ];
};

function renderLetter(x, y, size, letter) {
	ctx.beginPath();
	letter.forEach(line => line.forEach((p, i) => {
    	ctx[i ? 'lineTo' : 'moveTo'](x + p.x*size*0.5, y + p.y*size);
    }))
    ctx.stroke();
}


for(let x = 10.5; x < 500; x += 40) {
	for(let y = 10.5; y < 800; y += 50) {
    	renderLetter(x, y, 40, makeLetter(0.5));
    }
}