The Letter Forming project displays an algorithm that allows for the distribution of characters using the position of the vectors. The opentype.js library is used to preload the font characters as well as giving the ability to manipulate its points for pathing.
Link to Full Codes
if (!font) return;
translate(width/4.5,height/1.2);
fontPath = font.getPath(text, 0, 0, 400); // text, x offset, y offset, fontsize
path = new g.Path(fontPath.commands);
pathArray = path.commands;
// Taking out resampling will get all z points again
// path = g.resampleByAmount(path, 500); // change amount of pathing points
// path = g.resampleByLength(path, 10); // change amount of pathing points
for (let i = 0; i < pathArray.length; i++) {
if (pathArray[i].type == "Z") {
twoDArr.push(pathArray.slice(startingShape + 1, i)) // slice() = JS array funct. that allows to return the start & end of the objects within the array.
startingShape = i;
}
}
}
for (let i = 0; twoDArr.length; i++) {
beginShape();
for (let j = 0; j < twoDArr[i].length; j++) {
// If no previous shape, do nothing
if (i == 0) {
}
// Else, check if next shape starts further right than last
else if (twoDArr[i][j].x > twoDArr[i - 1][0].x) {
fill(0);
}
if (twoDArr[i][j].type == "L") {
vertex(twoDArr[i][j].x, twoDArr[i][j].y);
} else {
vertex(twoDArr[i][j].x, twoDArr[i][j].y);
}
}
endShape(CLOSE);
}