DotScript

render.js

Since this is a very simple writing system / font, there is no need to split it into modules.

Character Setup

This is really easy and consists only of the selected drawing instructions for the geometric shapes and the respective properties for each character. The only peculiarity for this translation module is the alignment of characters overlapping, therefore needing to draw a background-colored filled circle before drawing lines and shapes.

let characters = {
	form: {
		circle: function (x, y, size) { ctx.drawShape(...); },
		doublecircle: function (x, y, size) { draw.drawShape(...) },
		divotcircle: function (x, y, size) { draw.drawShape(...) },
		spiral: function (x, y, size) { draw.drawShape(...) },
		dot: function (x, y, size) { draw.drawShape(...) },
		z: function (x, y, size) { draw.drawShape(...) }
	},
	characters: {
		a: {
			form: "circle", // referring to the used form
			float: -2, // -times consonant radius as yOffset
			size: .5 // -times consonant radius
		},
		b: {
			form: "circle",
			float: -1.25,
			size: 1
		},
		/*...*/
	}
}

Translation / Drawing

Since this writing style is just a linear stringed representation of shapes instead of latin characters there is no need for grouping like for any other style. render(input) resizes the canvas according to number of the inputs characters and just iterates through the input string. There is not much of magic happening. Only setting the pointer to the next characters position depends on whether the character is a consonant or vowel for a slightly grouped appearance. The base line is drawn for the next character for not interfering with the former. This occasionally leads to weird results on linebreaks with this module.