setup.js

Defines basic variables

• const consonant = 20 // radius of characters

ccGlyphs.js

Contains the construction dictionaries

CC Gallifreyan follows a quite easy pattern consisting of big and small circles, arcs, dots and lines all arranged in a clear fashion following plain rules. Every character has a base design and distinct decorators. Stacking characters simply reduces the radius while staying on the center of the group.

Bases and decorators consist of the list of contained characters and an own draw-method with the translation helpers universal draw methods. To determine the characters base the ccBase-Object has a method to return the correct base.

export class ccBase {
	constructor() {
		this.cctable = {
			/* example: { // name of group
				contains: [...], // array of characters for which the handling and properties apply
				draw: function (ctx,x,y,r,tilt){ // position of items to be placed, radius and tilt of graphics
					SVGRenderingContext-draw instructions...
				}
			}*/
		}
	},
	getBase(char) { // return name of base the given character is assigned to
		let rtrn = false;
		Object.keys(this.cctable).forEach(row => {
			if (includes(this.cctable[row].contains, char)) rtrn = row;
		});
		return rtrn;
	}

}

The decorator object ccDeco has a comparable pattern.

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
• letterwidth: width of letters/groups
• letterheight: height of letters/groups

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, determines the amount of character stacking for the glyphs dimensions 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 word and each group of characters. Grouping of characters makes resizing of the base necessary. The index for the current position within the group is determined and used as a resizing factor and the character is drawn.

Grouping (CCG)

ccGrouped.groups(input) returns a multidimensional array of grouped characters. It initiates the sentence array and loops through the whitespace-splitted input. The word group is initiated. The following loop iterates over each character of the word, sets the current character, occasionally overrides single characters to double ones (th, ng) and corrects the index in this case.

As long as the former group has less items as the set amount characters will be added. Otherwise the current character initiates a new group.

The group is then pushed to the last word.

ccGrouped.resetOffset(stack) resets primarily the resizing factor based on the number of stacked characters. Stacked characters are bigger and will shrink down to default size.

ccGrouped.setOffset() sets the resizing, and positioning offset. It also sets the carriage return to true to have the characters drawn at the same x-position on the canvas.

Character Drawing (CCG)

ccDraw(ctx, letter, grouped) actually draws a character 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.

Since the actual drawing instructions are part of the ccBase- and ccDeco-objects these are simply called by the passed character. Also the tilt-factor is set.

	let tilt = .25 - .0625 * (grouped.offset + 1);
	// draw base
	if (ccBase.getBase(letter)) ccBase.cctable[ccBase.getBase(letter)].draw(x, y, consonant * grouped.resize, tilt);
	// draw decorators
	if (ccDeco.getDeco(letter)) ccDeco.cctable[ccDeco.getDeco(letter)].draw(x, y, consonant * grouped.resize, tilt);

Ez as that.

Finally above the letter/group the respective latin characters are drawn (again with exceptional control character handling).