Processing.js :: drawing glyphs

sketch code additionnal Glyph methods

var fonts = [ "data/verdana.svg", "data/automat.svg" ];
int curfont = 0;


void setup() 
{
    size( 800, 400);

    // set the default glyph size
    mouseY = 64;
    
	// loading SVG fonts definition
    loadGlyphs( fonts[0] );
    loadGlyphs( fonts[1] );

}


void draw() 
{
    background(51);
    
	float size	  = mouseY;
    float ascent  = glyphAscent(fonts[curfont])*size;
    float descent = glyphDescent(fonts[curfont])*size;
    float middle  = (height/2) + ((ascent+descent)/2) - descent;
    
    // draw usage
    fill( #666666 );
    text( "click to change font and move along y-axis to scale glyphs", 10, 20 );
   
   	// draw glyphs
    noStroke();
    fill( #FFFFFF );
    glyph( "Lorem Ipsum", width/2, middle, size, CENTER, fonts[curfont] );
    
    // draw glyphs ascent, descent and base lines
    stroke( #666666 );
    line( 0, middle-ascent, width, middle-ascent );
    line( 0, middle+descent, width, middle+descent );
    line( 0, middle, width, middle );

}

void mouseReleased()
{
	curfont = int(!curfont);
}

	

// The TrueType Font to SVG convertor (batik-ttf2svg) can be downloaded for free at
// http://xmlgraphics.apache.org/batik/download.cgi
//
// run the above command line to create your SVG font definition
// java -jar batik-ttf2svg.jar verdana.ttf -o verdana.svg




/**
 * Draws glyph to the screen. Displays the information specified in the str parameters on 
 * the screen in the position specified by the x and y parameters and the optional s parameter. 
 * An SVG font definition must be set with the loadGlyphs() or loadFont() function before glyph() 
 * may be called. The align parameter is optional which gives the option to draw to the left, right,
 * and center of the coordinates. The tablename parameter is also optional which gives the option to
 * select the font definition used to draw the text. By default, this method use the first glyph 
 * table available in list. Change the color of the text with the fill() function. Change the borders
 * color around text with the stroke() function.
 *
 * based on Processing.js 1.3 text() method.
 *
 *
 * @param str		String, letters to be displayed
 * @param x			int or float: x-coordinate of text
 * @param y			int or float: y-coordinate of text
 * @param s			int or float: the scale value of text or font size
 * @param align		[ horizontal alignment, either LEFT, CENTER, or RIGHT ]
 * @param tablename	[ the glyph table name ]
 *
 */
void glyph( str, x, y, s, align, tablename ) {

	var name = tablename || glyphCurrentTableName();
    var text_width = 0, x_offset = 0;
    var glyphs = glyphTable[ name ];

	
    if ( !glyphs ) return;

    // translate
    if ( align==RIGHT || align==CENTER ) {
        text_width = glyphWidth(str,name)*s;
        if ( align==RIGHT ) x_offset = -text_width;
        else x_offset = -text_width / 2;
    }
    pushMatrix();
    translate( x+x_offset, y );

    // scale
    s /= glyphs.units_per_em;
    scale( s, s );

    // draw
    for( var i=0, len=str.length; i<len; i++ ) try {
    	glyphLook( glyphs, str[i] ).draw();
    } catch(e) {}// Processing.debug(e); }
    popMatrix();
}



/**
 * Calculates and returns the width of any character or text string.The tablename parameter is 
 * optional which gives the option to select the font definition used to draw the text. By default, 
 * this method use the first glyph table available in list. 
 *
 * based on Processing.js 1.3 loadFont() method.
 *
 * @param str		char or String
 * @param tablename	[ the glyph table name ]
 * @return Float
 */
void glyphWidth( str, tablename ) {
    var w = 0;
    var name = tablename || glyphCurrentTableName();
    if ( !glyphTable[name] ) return 0;
    for( var i=0, len=str.length; i<len; i++ ) try {
        w += parseFloat( glyphLook( glyphTable[name], str[i] ).horiz_adv_x );
    } catch(e) {}// Processing.debug(e); }
    return w / glyphTable[ name ].units_per_em;
}


/**
 * Returns ascent of the current glyph  at its original size.The tablename parameter is optional which
 * gives the option to select the font definition used to draw the text. By default, this method use
 * the first glyph table available in list. 
 *
 * 
 * @param tablename	[ the glyph table name ]
 * @return Float
 */
void glyphAscent( tablename ) {
    var name = tablename || glyphCurrentTableName();
    if ( !glyphTable[name] ) return 0;
    return glyphTable[name].ascent / glyphTable[name].units_per_em - glyphDescent(name);
}

/**
 * Returns descent of the current glyph at its original size.The tablename parameter is optional which
 * gives the option to select the font definition used to draw the text. By default, this method use
 * the first glyph table available in list. 
 *
 * 
 * @param tablename	[ the glyph table name ]
 * @return Float
 */
void glyphDescent( tablename ) {
    var name = tablename || glyphCurrentTableName();
    if ( !glyphTable[name] ) return 0;
    return -glyphTable[name].descent / glyphTable[name].units_per_em;
}


/**
 * Returns the first glyph table available in list. 
 * @return String
 */
void glyphCurrentTableName() {
    for( var s in glyphTable ) return s;
}