DarkIfaerie's

setup.js

Defines basic variables

• const character = 40; // radius of single characters
• const lwfactor = 1; // line weight factor

darkifaeriesGlyphs.js

contains the path dictionaries

DarkIfaerie's has a distinct glyph for every latin character. because these glyphs are quite complex making them hard to construct alorithmic, the svg paths are drawn with inkscape. every character has an array of paths for different line weights.

export const dfGlyphs = {
    a: [{
        path: "m 23.8359925,14.03730925 a 10.089424,10.089424 0 0 1 -10.181138,9.996866
               10.089424,10.089424 0 0 1 -9.996869,-10.181136 10.089424,10.089424 0 0 1 ........ z",
        lineweight: 2
    }],
    /* ... */
}

render.js

Recurring Variables Within Global Scope

• width: canvas width
• height: canvas height
• x: current coordinate x
• y: current coordinate y
• glyph: global scope for glyph dimensions
• warning: used if undefined characters are part of the input

Translation

render(input) is the main wrapper for the algorithm and is passed the actual input. It sets up an array of characters by the input-string split by whitespaces to process later. If the circular-display option is selected, the longest word is determined to calculate the maximum word circle size determines the amount of character stacking for the glyphs dimensions and sets the canvas size according to the number of characters/words.

The initial coordinates for the words baseline are set and the general draw object initiated.

Then the array of characters is processed for each word and each group of characters. The current position is caluclated based on the display-option

• linear: current x and y match the center of the character.
• circular: current x and y are the words center, the characters center are calculated relative to that.

the character circle is drawn by the general draw object. the characters special paths are then drawn by the path-recalculation function dfDraw().

Character Drawing (DarkIfaerie's)

dfDraw(ctx, x, y, glyph) recalculates the glyphs path to match the set dimensions. the paths generated by inkscape clearly define coordinates by comma-separated floats so it is easy to get coordinates by a regex-query. the result are recalculated with a path-specific factor determined manually and the first coordinates altered to the current position.

path = p.path.replace(/-{0,1}\d+\.{0,1}\d*,-{0,1}\d+\.{0,1}\d*/g, coords => {
   let c = coords.split(",");
   return (parseFloat(c[0]) * add.scale) + "," + (parseFloat(c[1]) * add.scale);
});

finds and alters following coordinates as an example:

m 23.8359925,14.03730925 a 10.089424,10.089424 0 0 1 -10.181138,9.996866

then the path is drawn

ctx.drawShape('path', p.lineweight * lwfactor, {
    d: path
});