Triangulated Helvetica

Eperimentation with triangulation and Helvetica. The examples below use processing.js, but the graphics could be rendered using any method.

Download on Github →

Examples:

Randomly coloring triangles

VIEW EXAMPLE

Adding physics with Toxiclibs

VIEW EXAMPLE

Exploding Letters

VIEW EXAMPLE

Usage:

Requires poly2tri.js. Currently only supports captital letters A-Z, support for more characters coming soon.



    <script src="poly2tri.js"></script>
    <script src="TriangulatedHelvetica.js"></script>

    <script>

    //The default font size is 50px,
    //so this number will be a multiple of that.
    var size = 2;

    //The x position of the letter
    var xPosition = 10;

    //The y position of the letter
    var yPosition = 2;

    //Create the letter "A"
    var letterTriangles = TriangulatedHelvetica.A(size, xPosition, yPosition);

    //View console to see returned
    //array of Triangle objects.
    console.log(letterTriangles);

    //To get the width of a letter, get its width
    //using the 'getLetterWidth' method, then multiply
    //that number by the letter size.
    var letterWidth = TriangulatedHelvetica.getLetterWidth('A') * size;

    </script>