setup.js

Defines basic variables

• const glyphSize = 100; // radius of glyphs
• const cbConsonants = new cbConsonant(); // initates consonant class
• const cbVowels = new cbVowel(); // initates vowel class

function cbKeyboard(appendTo, writeTo, keys) creates an onscreen keyboard to type supported characters. arguments are the elements where to display the keyboard, the element where typed characters should be inserted and the keys as an two-dimensional array of rows and columns.

function createKeyboard() will be called to initate the creation of the keyboard with consonants and vowels separately.

cbettenbendersGlyphs.js

Contains the construction dictionaries

unlike other styles cBettenbender's doesn't have a tabular structure of characters but instead respective characters are dependent of shape and placement within the syllable circle. reading/writing-direction is more important than e.g. with Shermans where only the order of characters would be mixed up by starting on a false position. on the coding side this makes things a bit easier because the drawing instructions for soft, hard and combined consonants, as well as the different vowels are the same and the position is just a fraction of 2 pi.

export class cbConsonants {
    constructor() {
        this.base = {
            soft: { // name of group
                contains: [...], // array of characters for which the handling and properties apply
                rad: funtion(char){ // where on the circle the character has to be placed
                    let rad = 1.5 + 2 / this.contains.length * this.contains.indexOf(char);
                    if (rad > 2) rad -= 2; // sanitize radiant
                    return rad;
                }
                property: function (char) {...}, // array of relative positions and radii in relation to the syllable circle
                draw: function (ctx, x, y, r, char, repeat, initial){
                    if (repeat) {
                        draw three dots with SVGRenderingContext-draw instructions...
                    } else {
                        draw character with SVGRenderingContext-draw instructions, filled if first character...
                    }
                }
            }
	}
    }
    getBase(char) { // return name of base the given character is assigned to
        let rtrn = false;
        Object.keys(this.base).forEach(row => {
            if (includes(this.base[row].contains, char)) rtrn = row;
        });
        return rtrn;
    }
    keyCollection() { // return rows and columns of virtual keyboard
        let rows = [];
        Object.keys(this.base).forEach(row => {
            let columns = [];
            Object.keys(this.base[row].contains).forEach(key => {
                columns.push([this.base[row].contains[key], this.base[row].contains[key]]);
            });
            rows.push(columns);
        });
        return rows;
    }
}

class cotVowels { } is like consonants

since cBettenbender's has all characters always in the same position there has to be added some context to give hints about reading order, even if it is sometimes a matter of general context. but initial consonants have two lines attached, there is a indicator if the vowel makes the start and connected consonants are marked as well - depending if they're read before or after the vowel. reused consonants are marked with three dots like described above. cbContext adds the needed arcs.

the constructor creates all possible connection points on the syllable circle that will be deleted later on if applicable.

startCon(ctx, x, y, r, char) creates two arcs starting from the initial consonant and attaching to two different random connector points in the biggest available section.

startVow(ctx, x, y, r , char) creates two parallel arcs between two random connector points in the biggest available section.

connectCon(ctx, x ,y, r, char1, char2, bent) creates an arc either bent inwards (connected consonants read after vowel) from one to the other consonant, or outwards (read before the vowel) trough the consonants with an offset of the consonants radiants for a smooth curve.

drawCurve(x, y, r, rad1, rad2, offset, inverse, ctx) returns an svg path with a cubic bezier curve. this is used for all kind of complex curves. these are typically bent inwards; the inverse-flag is exclusively for connected consonants (see above). if the ctx-object is passed the control points are marked. once this module does it's job this is deprecated but quite interesting if you mess around.

chunkPoints() returns an two-dimensional array of available connected connector points in descending order.

delPoints(character) deletes connector points according to the radiant placement of the passed character. points to both sides are deleted as well for a clearer appearance.

showPoints(ctx, x, ,y ,r) is deprecated but interesting like the ctx-parameter for the drawCurve()-method.

render.js

Recurring Variables Within Global Scope

• width: width of the output canvas
• height: height of the output canvas
• x: current x coordinate for drawing, representing the groups center coordinate
• y: current y coordinate for drawing, representing the words baseline
• glyph: glyph dimensions-object
• groupedInput: global variable for input to be updated

Translation

render(input) is the main wrapper for the algorithm and is passed the actual input. It sets up an array of characters to process later and sets the canvas size according to the number of (grouped) characters.

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

Then the array of characters is processed for each syllable and the character is drawn.

Grouping (cBettenbender's)

cbettenbendersGrouped.groups(input) returns a multidimensional array of grouped characters. It initiates the sentence array and loops through the whitespace-splitted input.

Character Drawing (cBettenbender's)

cbDraw(ctx, syllable) actually draws a syllable to the canvas. X and y coordiantes are set. If not grouped the x-"pointer" is set to the next characters position, if the end of the viewport is reached the next line is set.

the syllable circle and the contextual lines are drawn. then the cbConsonant- and cbVowel-objects are called by passing the character.

finally above the letter/group the respective typed characters are drawn.