Geometry

by Yaroslav Samardak

HTML

<textarea id="input">
f0,0,3:0,10;90,15;90,6;90,4;90,2;-90,4;90,1;-90,3;-90,7;90,4
r6,0.1,1.7,o_,0.2,1.5,1
</textarea>
<canvas id="canvas"></canvas>

CSS

body {
	margin: 0;
	height: 100vh;
}

textarea {
	border: none;
	width: 100%;
	height: 120px;
	outline: none;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
}

canvas {
	width: 100%;
	height: calc(100% - 120px)
}

JavaScript

document.getElementById('input').onchange = () => {

}

const dpr = window.devicepixelratio || 2
const m = 12 * dpr

const c = document.getElementById("canvas");
const ctx = c.getContext("2d");

c.width = 487 * dpr
c.height = 544 * dpr

const moveAround = (fromX, fromY, toX, toY, angle) => {
	const a = angle * (Math.PI / 180)

	return {
		x: fromX + (toX - fromX) * Math.cos(a) - (toY - fromY) * Math.sin(a),
		y: fromY + (toY - fromY) * Math.cos(a) + (toX - fromX) * Math.sin(a),
	}
}

const drawFrame = (x, y, weight, lines) => {
	ctx.beginPath()
	ctx.lineWidth = weight * dpr
	ctx.strokeStyle = "#666666"
	ctx.moveTo(x * dpr * m, y * dpr * m);

	let angle = 0
	for (let i = 0; i < lines.length; i += 2) {
		angle += lines[i]
		const size = lines[i + 1]
		const coords = moveAround(x, y, x + size, y, angle)

		x = coords.x
		y = coords.y

		ctx.lineTo(x * dpr * m, y * dpr * m);
	}

	ctx.stroke()
}

const repeatIt = (count, startValue, step, fn) => {
	for (let i = 0; i < count; i++) fn(startValue + i * step)
}

const shape = (x, y, width, height, strokeWidth, stroke, fill) => {
	ctx.lineWidth = strokeWidth * dpr
	ctx.strokeStyle = stroke
	ctx.fillStyle = fill
	ctx.strokeRect(x * dpr * m, y * dpr * m, width * dpr * m, height * dpr * m)
	ctx.fillRect(x * dpr * m, y * dpr * m, width * dpr * m, height * dpr * m)
}

const workspace = (x, y, width, height, number, status, operator) => {
	shape(x, y, width, height, 1, '#333', '#EAEAEA')
}

const xWorkspace = (y, width, height) => (x) => workspace(x, y, width, height)
const yWorkspace = (x, width, height) => (y) => workspace(x, y, width, height)





drawFrame(3, 4.5, 3, [
	270, 1.5,
	90,10,
	90,15,
	90,6,
	90,1.5,
	-27, 1
])

drawFrame(7, 15.5, 3, [
	270,1.5,
	90,2,
	-90,4,
	90,1,
	-90,3,
	-90,7,
	90,1.5,
	-27, 1
])

repeatIt(6, 3.125, 1.65, xWorkspace(3.125, 1.5, 1))
repeatIt(4, 3.125, 1.65, xWorkspace(5.875, 1.5, 1))
repeatIt(8, 4.235, 1.72, yWorkspace(11.875, 1, 1.6))