Pixelfont drawer 📄

Drawing some custom pixelart text ¯\_(ツ)_/¯

twitter.com/mknol


Log in to post a comment.

const turtle = new Turtle();

const text = "turtletoy";
const letters = { 't':'111010010', 'u':'101101111', 'r':'111100100', 'l':'100100111', 'e':'111110111', 'o': '111101111', 'y':'101010010'}
const word = text.split("").map(x => letters[x]);

// The walk function will be called until it returns false.
const w = 3;
const s = Math.pow(w, 2);
const blockSize = { w: 9, h: 15 };
const breakAt = 6;
const startAt = { x: -93, y: -45 }
const letterSpace = 0.5;

function walk(i) {
	var charIdx = (i / s) | 0;
	const char = word[charIdx];
	const offset = {
		x: startAt.x + (charIdx % breakAt) * (w + letterSpace) * blockSize.w, 
		y: startAt.y + ((charIdx / breakAt) | 0) * (w + letterSpace) * blockSize.h,
	};
	const idx = i % s;
	if (char.charAt(idx) == "1") {
		const x = (idx % w);
		const y = (idx / w) | 0;
		// draw block of char
		infiniteRect(offset.x + x * blockSize.w, offset.y + y * blockSize.h, blockSize.w, blockSize.h);
	}

	if (i == 0) {
		// random decoration
		horizontalLine(startAt.x + blockSize.w / 2, startAt.y - blockSize.h * 2, ((breakAt * (w + letterSpace)) - 1), 2);
        horizontalLine(startAt.x + blockSize.w / 2, startAt.y - blockSize.h * 3, ((breakAt * (w + letterSpace)) - 1), .75);
        horizontalLine(startAt.x + blockSize.w / 2, startAt.y + ((w + letterSpace) * 2) * blockSize.h, ((breakAt * (w + letterSpace)) -1), 2);
        horizontalLine(startAt.x + blockSize.w / 2, startAt.y + ((w + letterSpace) * 2) * blockSize.h +  blockSize.h, ((breakAt * (w + letterSpace)) -1), .75);
	}
	return i + 1 < word.length * s;
}

function horizontalLine(x, y, total, d) {
	for (let i = 0; i < total * d; i++) {
		infiniteRect(x + i * blockSize.w / d, y, blockSize.w / d, blockSize.h);
	}
}

function infiniteRect(x, y, w, h) {
	if (w <= 1 || h <= 1) return;
	let t = 2;
	for (let i = 0; i < t; i++) {
		weirdRect(x + i, y + i, w - i * 2, h - i * 2);
	}
	let i = t;
	infiniteRect(x + i, y + i, w - i * 2, h / 2 - i * 2);
	i = t++;
	infiniteRect(x + i, h / 2 +  y + i, w - i * 2, h / 2 - i * 2);
	infiniteRect(x + i, h / 4 +  y + i, w - i * 2, h / 2 - i * 2);
}

function weirdRect(x, y, w, h) {
    // well uhm.. some sort of rect
	const corner = 0.75 + Math.sin(x+y)/3;
	turtle.penup();
	turtle.goto(x + corner,y);
	turtle.pendown();
	turtle.goto(x + w - corner, y);
	turtle.circle(Math.PI, corner);
	turtle.goto(x + w, y + h - corner);
	turtle.goto(x - corner, y + h);
	turtle.circle(Math.PI, corner* 2);
	turtle.goto(x, y - corner);
}