creating interactive type #5 outline-generated type
This issue is part of the series: creating interactive type #1 interactive type light #2 timed type #3 evolving type #4 3-dimensional type #5 outline-generated type
introduction The booklet series »creating interactive type« introduces how to design interactive and responsive type. Visual attributes of typefaces, like style, colour or size, have always given an additional meaning to the text’s content. Interactivity can take this formaspect to another level. By adding behaviour, letter shapes are able to respond to time and usage and make this process part of the given information. The described interactive type applications are built with the opensource programming language Processing, that was in particular developed for designers and artists. Because of its clear structure, it is quite accessible to the ones with no or only little programming skills. Beginners are able to write their own programmes after only a few minutes of instructions. This issue »outline-generated type« introduces how to use the Geomerative Library in Processing that supports graphical extensions for fonts. Applications and codes can be viewed and copied from www.StefanieSchwarz-GraphicDesign.de/interactive-type.html
step 1 / using the geomerative library Geomerative is a library for Processing that enables to access the outlines of a TrueType font. By importing the library, elements, like points and circles, can be placed along a font outline. The library can be downloaded from www.ricardmarxer.com/ geomerative and needs to be placed on your computer in Documents/Processing /libraries. To load the font for the Processing sketch, its ttf file must be placed in the data folder of the sketch.
step 2 / generating interactive font outlines The function RG.init() initialises the Geomerative Library, while the RCommand functions define how certain elements are set along the font outlines. The functions RGroup, toGroup and getPoints group these elements and assign them to the text’s outlines. Inside the draw() block the translate() function declares the text’s position. Within the for structure (for structures are generally used for repetitions) the graphic element, that is placed along the font outline, in this example an ellipse, is defined. The size of the ellipses is determined by the postition of the mouse, using the variable mouseX.
import geomerative.*; // declare objects RFont font; String SampleText = "PROGRESS"; RPoint[] pnts; void setup() { size(1200, 500); // initialise library and generate font RG.init(this); font = new RFont("ModuleRegular.ttf", 230, RFont.CENTER); // define points along font outline RCommand.setSegmentLength(10); RCommand.setSegmentator(RCommand.UNIFORMLENGTH); if (SampleText.length() > 0) { // generate a group of graphic elements RGroup grp; // and assign to text grp = font.toGroup(SampleText); // get points along font outline pnts = grp.getPoints(); }
≼
} void draw() { background(255); translate(width/2, 300); // textâ&#x20AC;&#x2DC;s position for (int i=0; i<pnts.length; i++) { //draw ellipses along the font outlines noStroke(); fill(0, 80); ellipse(pnts[i].x, pnts[i].y, mouseX, mouseX); } }
step 3 / generating interactive and random font outlines In the following example the position of the ellipses is relocated by the random() function that is additionally influenced by the position of the mouse, using the variable mouseY. The higher the value of mouseY, the higher the random number that shifts the position. The ellipsesâ&#x20AC;&#x2122; size is determined by the mouse, as well, by using the variable mouseX.
import geomerative.*; RFont font; String SampleText = "I N P U T"; RPoint[] pnts; void setup() { frameRate(14); size(1300, 800); // initialise library and generate font RG.init(this); font = new RFont("ModuleTextRegular.ttf", 290, RFont.CENTER); // define points along font outline RCommand.setSegmentLength(13); RCommand.setSegmentator(RCommand.UNIFORMLENGTH); if (SampleText.length() > 0) { // generate a group of graphics RGroup grp; // and assign to text grp = font.toGroup(SampleText); // get points along font outline pnts = grp.getPoints(); }
â&#x2030;Ľ
} void draw() { background(255); translate(600, 400); for (int i=0; i<pnts.length; i++) { //draw ellipses along font outline noFill(); ellipse(pnts[i].x + random(mouseY/10), pnts[i].y + random(mouseY/10), 12 + mouseX/6, 12 + mouseX/6); } }
references Reas, C. & Fry, B. (2007) Processing: a programming handbook for visual designers and artists. Cambridge: MIT Press. www.processing.org www.ricardmarxer.com/geomerative www.lernprocessing.wordpress.com/ 2011/11/15/geomerative-library concept and design Stefanie Schwarz www.stefanieschwarz-graphicdesign.de Central Saint Martins College of Arts and Design London, June 2012