H
creating interactive type #1 interactive type light
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 »interactive type light« introduces some basics for building interactive type applications. Applications and codes can be viewed and copied from www.StefanieSchwarz-GraphicDesign.de/interactive-type.html
anatomy of a programme The code on the right is already an interactive programme that draws points along the positions of the cursor. The code inside the setup() block is run once when the programme starts. For instance, the function size(), that defines the size of the display window, only needs to be run once at the beginning. The code inside the draw() block is run continuously until the programme is stopped. This continuation is necessary for all interactive programmes that respond to live information. Input can be given, for example, with the mouse, using the variables mouseX and mouseY.
void setup () { size(1000, 700); } void draw () { point(mouseX, mouseY); }
step 1 / converting fonts Before letters of a certain font can be displayed on the screen, this font must be converted into the VLW format. To convert a font, select Tools > Create Font from the menu. A window opens and displays the fonts installed on your computer that can be converted. The selected font is generated and copied into the current Processing sketch’s data folder.
step 2 / loading fonts In order to use a font in a programme, it must be loaded and set as the current font. Processing has a unique data type called PFont to store font data. Make a new variable of the type PFont and use the loadFont() function to load the font. The textFont() function must be used to set the current font.
void setup () { // define size of display window size(1300, 705); // declare font variable PFont font; // load font font = loadFont("Module-Regular.vlw"); // set current font textFont(font); } ...
step 3 / defining colour The background() function sets the colour of the display window. The fill() function defines the colour of a font or other shapes. For specifying a certain colour, the functions refer to the RBG values, which set the amount of red, green and blue.
void setup () { // define size of display window size(1300, 705); // declare font variable PFont font; // load font font = loadFont("Module-Regular.vlw"); // set current font textFont(font); } void draw () { // background colour background(255, 255, 255); // font colour fill(0, 0, 0); ...
step 4 / interactive text size The textSize() function sets the current font size. And because it does not use a fixed value here but instead refers to the position of the mouse, with the mouseX variable, that stores the x-coordinate of the cursor, this application becomes interactive. The text() function is used to draw characters to the screen and define their location referring to the x- and y-coordinates.
void setup () { // define size of display window size(1300, 705); // declare font variable PFont font; // load font font = loadFont("Module-Regular.vlw"); // set current font textFont(font); } void draw () { // background colour background(255, 255, 255); // font colour fill(0, 0, 0); // set font size textSize(mouseX); // write "..." at coordinate x,y text("HELLO", 100, 450) ; }
HELL
O
H mouseX = 80
H
mouseX = 100
H mouseX = 200
H
H mouseX = 360
H
H
mouseX = 670
step 5 / interactive text – advanced To use the mouseX variable is one of the easiest things to make something interactive. Instead of referring to the mouse input, the font size can also be determined by other actions, like movement or sound. The following code changes the font size according to sound input. This is enabled by the audio library Minim that needs to be imported at the beginning of the code. The functions Minim(this) and minim.getLineIn() initiate the connection to the audio input, like the microphone. In the draw() block the function in.mix.get() gets the microphone input which is then used to define the font size inside the textSize() function.
// import audio library import ddf.minim.*; Minim minim; AudioInput in; void setup() { size(1200, 750); PFont font; // initiate and connect to audio input minim = new Minim(this); minim.debugOn(); in = minim.getLineIn(Minim.STEREO, 100); font = loadFont("Module-Regular.vlw"); textFont(font); // decelerate frames with smaller numbers frameRate(9); } void draw() { background(255); // declare variable called soundlevel float soundlevel;
≼
// get microphone input soundlevel = in.mix.get(0); textSize(50 + soundlevel * 5000); fill(0); text("HELLO", 100, 450); }
H
H
H
H
H
references Reas, C. & Fry, B. (2007) Processing: a programming handbook for visual designers and artists. Cambridge: MIT Press. www.processing.org www.creativecoding.org/lesson/ topics/audio/sound-in-processing www.code.compartmental.net/ tools/minim/manual-minim concept and design Stefanie Schwarz www.stefanieschwarz-graphicdesign.de Central Saint Martins College of Arts and Design London, June 2012
O