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);
                        }