creating interactive type #2 timed 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 »timed type« introduces how to draw shapes in form of letters and how to make the shapes respond to the current time and date. Applications and codes can be viewed and copied from www.StefanieSchwarz-GraphicDesign.de/interactive-type.html
step 1 / drawing letter shapes Letter shapes can be defined as a series of coordinates, called vertices. A vertex is a position defined by an x- and y-coordinate. To create a shape from vertex points, first use the beginShape() function, then specify a series of points with the vertex() function and complete the shape with endShape().
size (240, 240); background (255, 255, 255); // draw letter T beginShape(); // start drawing T shape vertex(50, 50); // define x,y-coordiantes vertex(180, 50); vertex(180, 80); vertex(130, 80); vertex(130, 180); vertex(100, 180); vertex(100, 80); vertex(50, 80); vertex(50, 50); endShape(); // complete T shape
step 2 / timed letter shapes Processing programmes can read the value of the computer’s clock. The current second is read with the second() function, which returns values from 0 to 59. The current minute, hour and day is read with the minute(), hour() and day() function. Including these functions in the above described vertex() function makes the letter shapes responsive to time. This example shows how the shape of the letter »T« is distorted gradually each second, by using the second() function, that relocates the vertices defining the letter’s outline.
void setup() { size (250, 250); } void draw() { background (255, 255, 255); // declare variable, based on seconds int s = second(); // draw letter T beginShape(); vertex(50, 50); vertex(180, 50 - s); // add time vertex(180 + s/2, 80); // add time vertex(130, 80); vertex(130 + s, 180); // add time vertex(100 - s, 180); // add time vertex(100, 80 + s/2); // add time vertex(50 - s, 80); // add time vertex(50, 50); endShape(); }
step 3 / timed word In the following example several letter shapes are drawn to the screen. Each letter is connected to one of the time values: day, hour, minute and second. In order to make the distortion more refined, some extra points/vertices are added along the outlines.
void setup() { size (600, 250); } void draw() { background (255); int int int int
s m h d
= = = =
second(); minute(); hour(); day();
// letter T beginShape(); vertex(50 + d*0.8, 50 + d*0.8); vertex(120 + d*0.8, 50 + d); // add point vertex(180, 50); vertex(180, 80); vertex(130 - d*0.6, 80 + d); vertex(130, 180); vertex(100, 180); vertex(100, 80 + d*0.2); vertex(50, 80 + d*2); vertex(50, 50); endShape(CLOSE); // letter I beginShape(); vertex(200 + h*0.5, 50 + h*2.5);
≼
vertex(230 - h*0.5, 50); vertex(230, 180); vertex(200, 180); vertex(200 + h*0.5, 50 + h*2.5); endShape(CLOSE); // letter M beginShape(); vertex(250 + m*0.2, 50 + m*0.2); vertex(272 + m*0.2, 50 + m*0.5); // add point vertex(280 + m*0.4, 50 + m*0.3); vertex(320, 125); vertex(360 - m*0.4, 50 + m*0.8); vertex(390 - m*0.1, 50 + m*0.4); vertex(390 - m*1.3, 100 - m*0.1); // add p vertex(390 - m*0.5, 180 - m*0.5); vertex(360, 180); vertex(360 - m*0.8, 105 - m*0.3); vertex(320, 180 - m*0.7); vertex(280, 105 - m*0.9); vertex(280, 180); vertex(250 + m*0.3, 180 - m*0.3); vertex(250 + m, 180 - m); // add p vertex(250 + m*0.2, 50 + m*0.2); endShape(CLOSE); // letter E beginShape(); vertex(410 + s, 50 + s); vertex(450, 50 + s*0.5); // add p vertex(490 , 50 + s*0.25); // add p vertex(520 - s, 50 + s*0.3); vertex(520 - s*0.5, 70 - s*0.2); // add p
≼
vertex(520 - s*0.3, 80 - s*0.3); vertex(475, 80); // add p vertex(440, 80); vertex(440, 100); vertex(460 , 100); // add p vertex(490, 100); vertex(490 - s*0.7, 110); // add p vertex(490, 130); vertex(455, 130 - s*0.7); // add p vertex(440, 130); vertex(440 - s*0.3, 145); // add p vertex(440, 150); vertex(520 - s*0.3, 150 - s*0.4); vertex(520 - s*0.1, 180 - s*0.2); vertex(410, 180); vertex(410 + s*0.8, 130); // add p vertex(410, 50); endShape(CLOSE); }
references Reas, C. & Fry, B. (2007) Processing: a programming handbook for visual designers and artists. Cambridge: MIT Press. www.processing.org concept and design Stefanie Schwarz www.stefanieschwarz-graphicdesign.de Central Saint Martins College of Arts and Design London, June 2012