Erratic triangle wave text

Another text experiment in Processing using a monospace typeface that makes modulated typography a bit simpler to get your head around.

Processing (and programming generally) hasn’t really stuck before now because I didn’t have a clear idea of what I was learning all this stuff for. Without having a concept or project in mind, there was no reason to learn.

Lately, though, I’ve been learning a bit about music and, in particular, analogue synthesis. I’m interested in the idea of modulating type in the same way that oscillators, filters and LFOs affect sound.

Experimenting with these building blocks is allowing me to get my head around variables, loops and conditionals which perhaps are the functional equivalents of the things I just mentioned. 

This was an attempt to create the equivalent of a triangle wave, much in the same manner as my earlier experiments with sine wave text.

Example of a triangle wave, image taken from Wikipedia
Example of a triangle wave, image taken from Wikipedia

Of course, experimentation being what it is, I didn’t produce the nice regular triangles I had envisaged. Instead, the lines of text veered away from the central path. The technique I used was to switch between the up and down stroke whenever there was a space. In using this technique, I hadn’t taken into account the fact that each word was a different length.

It led to something a bit different, but not intrinsically bad. The example here varies the angle at which the text angles up and down. It’s still hand-coded rather than programmatical, but it feels like the start of a direction I want to go in, which is doing systematic processing of text by code, rather than by hand.

Source code:

// erratic triangle wave text, tomalexander, 16/8/15
PFont lettGothic;
boolean direction = false;
int incre = 3;


void setup(){
lettGothic = createFont("LetterGothicStd-Bold.otf", 12);
textFont(lettGothic);
size(800, 800);
background(255);
fill(0);
smooth();

// The function is done on a line by line basis
// with parameters tacked on the end

triwavetext("The words came out of his mouth in ways he did not fully understand,", 5, 300, 15.0, 345.0, true);
triwavetext("flying this way and that to form collisions of ideas that made", 5, 350, 45.0, 315.0, true);
triwavetext("no sense to anyone but him (and even he couldn't follow most of them.)", 5, 400, 35.0, 325.0, true);
triwavetext("Still, people would sit and listen because there was something about it...", 5, 450, 25.0, 310.0, true);
triwavetext("...something they hadn't heard before. Sometimes that was enough.", 5, 500, 37.0, 323.0, false);
save("triwavetext.png");
}


// The function itself
void triwavetext(String s, int xpos, int ypos, float upangle, float downangle, boolean direction) {

// setting length of string and resetting position to zero
int len = (s.length());
int spos = 0;
float angle = 0.0;

// transformation
pushMatrix();
translate(xpos, ypos);

// main loop
for (int x = 0; x < (len * incre) ; x += incre) {
if ((s.charAt(spos % len)) == ' ') {// check if space
direction = !direction;
if (direction) {
angle = upangle ;
} else {
angle = downangle;
}
translate ((xpos+incre), 0); // move along one character
rotate (radians(angle));
 text((s.charAt(spos % len)), 0, 0 );
} else {
translate ((xpos+incre), 0);
text((s.charAt(spos % len)), 0, 0);
}
spos++;

}
popMatrix();

}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s