ArtByBoredom

render.js

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

Character Setup

this one is tricky. the character class defines the svg-drawing-context instructions. the constructor for every character sets the defaults. if the outer circle is filled, the inverse-flag is set and the color-adjustments for following shapes are geared to that.

unlike many other (circular) writing systems (beside TARDIS Console and Rasilonian Gallifreyan) not all characters are circular geomatric shapes. punctuation characters are a bit more complex and maybe someone was not patient enough to construct these shapes mathematical. the paths werde created with inkscape and pastes into the properties. to resize and reposition these glyphs according to the canvas and context the character-class has a handler to recalculate the coordinates and draw the path accordingly.

characters is an object containing the character-class drawing methods for the respective character.

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.