Assignment 10: T.Y.P.O.

This week, we created TYPO (Text Your Patterns Out):

Shreya’s Reflection:

This week, our prompt was to either create a data visualization or generate a text output. Zbynek and I, after bouncing ideas off each other, decided to go for text piece that would be both interactive and contain a fun twist. We decided to make a keyboard of sorts, where a person can type in anything they want and the resulting text output will have letters made out of smaller letters.

We set about working on the code. After getting one letter, “A”, to display on the screen as we pressed the key “A”, we moved on to accommodating all the other letters of the alphabet. After that, we started working the patterns of smaller letters that would comprise the patterns in the larger. Initially, they were simple patterns of two or three letters — such as “aa” or “bbb” — and we used these to sort out issues in spacing and width. Finally, we began work on the patterns themselves, first making a grid on paper, and then trying to see how many small letters per row would fit in that grid to make the shape of its corresponding alphabet.

It was a great experience for me to work with Zbynek, who, as a CS major, was able to explain a lot of the logic and math behind the code that we were writing. Understanding the complexity of some of the formulae we used for solving issues of spacing between the letters was probably the biggest challenge for me this week, but I am glad that I have come out of it still able to understand the basic logic underlying it.

Zbynek’s Reflection:

I do not usually enjoy working in groups on programming projects, but it was a great to have Shreya as a sounding board to bounce my ideas off of. Even though I myself did not know how to make the positioning of letters work, she was extremely enthusiastic about getting into the code and really trying to understand the logic. In retrospect, I think we should have gone for an object-oriented approach, encapsulating the math for each element, and working with that, but seeing that we already worked out the positions in the for-loops, the trouble would not have been worth it. Oh well.

I am happy we got to use the function keys in our app, which is something I have not known how to do before. I also enjoyed drawing out the patterns for the keys (although transferring them from paper into the program was a pain). Also, originally, we did not have a way to type a space, but some tweaks to the for-loops took care of that. Now, people can type their names! Like, Shreya, I like the fact that our capital letters are made out of small letters.

If we had more time to do this, we would have supported writing multiple lines of text, and added more patterns – small letters (made out of capitals this time?), numbers, and probably some diacritics (!?.,’). But we are satisfied with the result as it is.

Here is the code:

String [][] alphabetPatterns = {
  {" a "," a a ","a a","aaaaa","a a","a a"}, {"bbbb ","b b","bbbb ","b b","b b","bbbb "}, {" ccc ","c c","c ","c ","c c"," ccc "}, {"ddd ","d d ","d d","d d","d d ","ddd "}, {"eeeee","e ","eee ","e ","e ","eeeee"},
  {"fffff","f ","fff ","f ","f ","f "}, {" ggg ","g g","g ","g ggg","g g"," ggg "}, {"h h","h h","hhhhh","h h","h h","h h"}, {"iiiii"," i "," i "," i "," i ","iiiii"}, {" j"," j"," j"," j","j j"," jjj "},
  {"k k ","k k ","kk ","k k ","k k ","k k"}, {"l ","l ","l ","l ","l ","lllll"}, {"m m","mm mm","m m m","m m","m m","m m"}, {"n n","nn n","n n n","n nn","n n","n n"}, {" ooo ","o o","o o","o o","o o"," ooo "},
  {"pppp ","p p","pppp ","p ","p ","p "}, {" qqq ","q q","q q","q q q","q q "," qq q"}, {"rrrr ","r r","rrrr ","r r ","r r ","r r"}, {" ssss","s "," sss "," s"," s","ssss "}, {"ttttt"," t "," t "," t "," t "," t "},
  {"u u","u u","u u","u u","u u"," uuu "}, {"v v","v v","v v","v v"," v v "," v "}, {"w w","w w","w w","w w w","ww ww","w w"}, {"x x"," x x "," x "," x x ","x x","x x"}, {"y y"," y y "," y "," y "," y "," y "},
  {"zzzzz"," z "," z "," z ","z ","zzzzz"}
PFont font;
String s = "";
boolean startScreen = true;

void setup () {
  font = createFont("courier", 32);

void draw () {
  if (startScreen) {
    textFont(font, 32);
    text("Hi! Press ENTER to start typing.", width/2, height/2);
  else {
    float w = width/2 - (((s.length()-1)*20)/2)*alphabetPatterns[0][0].length() - ((s.length()-1)*20)/2 + 10;
    for (int letter = 0; letter < s.length(); letter++) {
      int letterCode = int(s.charAt(letter));
        if (letterCode == 32) {
          w += 20*alphabetPatterns[0][0].length();
          if (letter != s.length()-1) w += 20;
        else {
          letterCode -= 97;
          float h = height/2 - ((alphabetPatterns[letterCode].length-1)*30)/2;
          for (int row = 0; row < alphabetPatterns[letterCode].length; row++) {
            float cellW = w - 10 - ((alphabetPatterns[letterCode][row].length()-1)*20)/2;
            for (int cell = 0; cell < alphabetPatterns[letterCode][row].length(); cell++) {
            textFont(font, 32);
            text(alphabetPatterns[letterCode][row].charAt(cell), cellW, h);
            cellW += 20;
          h += 30;
        w += 20*alphabetPatterns[0][0].length();
        if (letter != s.length()-1) w += 20;

void keyPressed () {
  if (keyCode == ENTER) startScreen = false;
  if (key == ' ') s += " ";
  if (keyCode == DELETE) s = "";
  if (keyCode == BACKSPACE && s.length() >= 1) s = s.substring(0, s.length()-1);

  if (int(key) >= 65 && int(key) <= 90 || int(key) >= 97 && int(key) <= 122) {
    char letter = key;
    if (int(letter) >= 65 && int(letter) <= 90) letter = char(int(letter) + 32);
    s += letter+"";