String Text match and swap to SVG

Processing Coding Questions
1

Hello there Processing Foundation community.
As with all my past (not a lot) programming adventures, firstly you need an idea and afterwards you gradually figure out how to code it.
The idea is the following:

  • Canvas size has square dimensions.
  • Load a .txt file onto a String Array variable (this file contains 206 lines of different proverbs)
  • Then use the splitTokens function to separate each word onto another String Array variable.
  • It then uses a for loop and several if statements and determines how to subdivide the canvas’ height depending on how many words the proverb has, and the canvas’ width is split to match the number of letters each word has.

So far I have been able to generate a PDF file with all the 206 proverbs on a different page and they are all displaying the desired layout.

Yet, the final result I am looking for is to stretch each letter to the total width occupying each letter slot.
To do this, the solution may beSVGs, because using text() doesn’t allow to change the width of letters, and with the shape function it is possible. I have not used the Geomerative library - trying to do it only with what there is already built on Processing.

But I have not been able to code this, I need the program to go through each line selected, split the words, then write a function that determines if this word has “which letter” replace for its corresponding svg letter, display it in the desired position and stretch it to the max width. I need a sort of alphabet program. Don’t really know how to solve this yet.

Thanks in advance for any ideas, solutions or suggestions…
link to the text file and whole sketch here if anybody wants to try out the code below.

import processing.pdf.*;

String[] r, rg, rg2;
String s;
PShape l;
int t = 0;

void setup() {
  size(500, 500, PDF, "test.pdf");
  surface.setLocation(0, 0);
  r = loadStrings("refranes_01.txt");
  //rr = new ArrayList<String>();
  background(0);
  fill(255, 120);
  s = join(r, " ");
  rg = splitTokens(r[t], " ");
  textAlign(LEFT);
  for (int j = 1; j <= rg.length; j++) {
    int wl = rg[j-1].length();
    float hm = height/rg.length;
    textSize(height/rg.length*1.4);
    if (wl == 1) {
      noFill();
      stroke(255, 50);
      rect(0, hm*j, width-1, -hm);
      fill(255, 200);
      text(rg[j-1], width/2, hm*j);
    } else if (wl == 2) {
      for (int i = 0; i < 2; i++) {
        fill(20*(i+1), 30*(i+1), 80*(i+1), 100);
        stroke(255, 50);
        rect(i*width/2, hm*j, width/2, -hm);
        fill(40*(i+1), 60*(i+1), 80*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/2, hm*j);
      }
    } else if (wl == 3) {
      for (int i = 0; i < 3; i++) {
        fill(30*(i+1), 60*(i+1), 40*(i+1), 100);
        stroke(255, 50);
        rect(i*width/3, hm*j, width/3, -hm);
        fill(20*(i+1), 60*(i+1), 40*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/3, hm*j);
      }
    } else if (wl == 4) {
      for (int i = 0; i < 4; i++) {
        fill(40*(i+1), 20*(i+1), 10*(i+1), 100);
        stroke(255, 50);
        rect(i*width/4, hm*j, width/4, -hm);
        fill(10*(i+1), 20*(i+1), 40*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/4, hm*j);
      }
    } else if (wl == 5) {
      for (int i = 0; i < 5; i++) {
        fill(50*(i+1), 20*(i+1), 10*(i+1), 100);
        stroke(255, 50);
        rect(i*width/5, hm*j, width/5, -hm);
        fill(50*(i+1), 40*(i+1), 30*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/5, hm*j);
      }
    } else if (wl == 6) {
      for (int i = 0; i < 6; i++) {
        fill(60*(i+1), 30*(i+1), 15*(i+1), 100);
        stroke(255, 50);
        rect(i*width/6, hm*j, width/6, -hm);
        fill(60*(i+1), 30*(i+1), 15*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/6, hm*j);
      }
    } else if (wl == 7) {
      for (int i = 0; i < 7; i++) {
        fill(35*(i+1), 17*(i+1), 23*(i+1), 100);
        stroke(255, 50);
        rect(i*width/7, hm*j, width/7, -hm);
        fill(35*(i+1), 17*(i+1), 23*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/7, hm*j);
      }
    } else if (wl == 8) {
      for (int i = 0; i < 8; i++) {
        fill(80*(i+1), 40*(i+1), 20*(i+1), 100);
        stroke(255, 50);
        rect(i*width/8, hm*j, width/8, -hm);
        fill(80*(i+1), 40*(i+1), 20*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/8, hm*j);
      }
    } else if (wl == 9) {
      for (int i = 0; i < 9; i++) {
        fill(45*(i+1), 90*(i+1), 30*(i+1), 100);
        stroke(255, 50);
        rect(i*width/9, hm*j, width/9, -hm);
        fill(45*(i+1), 90*(i+1), 30*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/9, hm*j);
      }
    } else if (wl == 10) {
      for (int i = 0; i < 10; i++) {
        fill(50*(i+1), 25*(i+1), 55*(i+1), 100);
        stroke(255, 50);
        rect(i*width/10, hm*j, width/10, -hm);
        fill(50*(i+1), 35*(i+1), 65*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/10, hm*j);
      }
    } else if (wl == 11) {
      for (int i = 0; i < 11; i++) {
        fill(55*(i+1), 15*(i+1), 50*(i+1), 100);
        stroke(255, 50);
        rect(i*width/11, hm*j, width/11, -hm);
        fill(75*(i+1), 25*(i+1), 60*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/11, hm*j);
      }
    } else if (wl == 12) {
      for (int i = 0; i < 12; i++) {
        fill(12*(i+1), 24*(i+1), 48*(i+1), 100);
        stroke(255, 50);
        rect(i*width/12, hm*j, width/12, -hm);
        fill(24*(i+1), 12*(i+1), 48*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/12, hm*j);
      }
    } else if (wl == 13) {
      for (int i = 0; i < 13; i++) {
        fill(13*(i+1), 26*(i+1), 72*(i+1), 100);
        stroke(255, 50);
        rect(i*width/13, hm*j, width/13, -hm);
        fill(26*(i+1), 13*(i+1), 72*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/13, hm*j);
      }
    } else if (wl == 14) {
      for (int i = 0; i < 14; i++) {
        fill(14*(i+1), 28*(i+1), 56*(i+1), 100);
        stroke(255, 50);
        rect(i*width/14, hm*j, width/14, -hm);
        fill(14*(i+1), 28*(i+1), 56*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/14, hm*j);
      }
    }
  }
}

void draw() {
  background(0);
  fill(255, 120);
  rg = splitTokens(r[t], " ");
  textAlign(LEFT);
  for (int j = 1; j <= rg.length; j++) {
    int wl = rg[j-1].length();
    float hm = height/rg.length;
    textSize(height/rg.length*1.4);
    if (wl == 1) {
      noFill();
      stroke(255, 50);
      rect(0, hm*j, width-1, -hm);
      fill(255, 200);
      text(rg[j-1], width/2, hm*j);
    } else if (wl == 2) {
      for (int i = 0; i < 2; i++) {
        fill(20*(i+1), 30*(i+1), 80*(i+1), 100);
        stroke(255, 50);
        rect(i*width/2, hm*j, width/2, -hm);
        fill(40*(i+1), 60*(i+1), 80*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/2, hm*j);
      }
    } else if (wl == 3) {
      for (int i = 0; i < 3; i++) {
        fill(30*(i+1), 60*(i+1), 40*(i+1), 100);
        stroke(255, 50);
        rect(i*width/3, hm*j, width/3, -hm);
        fill(20*(i+1), 60*(i+1), 40*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/3, hm*j);
      }
    } else if (wl == 4) {
      for (int i = 0; i < 4; i++) {
        fill(40*(i+1), 20*(i+1), 10*(i+1), 100);
        stroke(255, 50);
        rect(i*width/4, hm*j, width/4, -hm);
        fill(10*(i+1), 20*(i+1), 40*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/4, hm*j);
        fill(30*(i+1), 60*(i+1), 20*(i+1), 100);
        ellipse(i*width/2+hm/2, hm*j-hm/2, hm, hm);
      }
    } else if (wl == 5) {
      for (int i = 0; i < 5; i++) {
        fill(50*(i+1), 20*(i+1), 10*(i+1), 100);
        stroke(255, 50);
        rect(i*width/5, hm*j, width/5, -hm);
        fill(50*(i+1), 40*(i+1), 30*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/5, hm*j);
        ellipse(i*width/5+hm/2, hm*j-hm/2, hm, hm);
      }
    } else if (wl == 6) {
      for (int i = 0; i < 6; i++) {
        fill(60*(i+1), 30*(i+1), 15*(i+1), 100);
        stroke(255, 50);
        rect(i*width/6, hm*j, width/6, -hm);
        fill(60*(i+1), 30*(i+1), 15*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/6, hm*j);
      }
    } else if (wl == 7) {
      for (int i = 0; i < 7; i++) {
        fill(35*(i+1), 17*(i+1), 23*(i+1), 100);
        stroke(255, 50);
        rect(i*width/7, hm*j, width/7, -hm);
        fill(35*(i+1), 17*(i+1), 23*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/7, hm*j);
      }
    } else if (wl == 8) {
      for (int i = 0; i < 8; i++) {
        fill(80*(i+1), 40*(i+1), 20*(i+1), 100);
        stroke(255, 50);
        rect(i*width/8, hm*j, width/8, -hm);
        fill(80*(i+1), 40*(i+1), 20*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/8, hm*j);
      }
    } else if (wl == 9) {
      for (int i = 0; i < 9; i++) {
        fill(45*(i+1), 90*(i+1), 30*(i+1), 100);
        stroke(255, 50);
        rect(i*width/9, hm*j, width/9, -hm);
        fill(45*(i+1), 90*(i+1), 30*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/9, hm*j);
      }
    } else if (wl == 10) {
      for (int i = 0; i < 10; i++) {
        fill(50*(i+1), 25*(i+1), 55*(i+1), 100);
        stroke(255, 50);
        rect(i*width/10, hm*j, width/10, -hm);
        fill(50*(i+1), 35*(i+1), 65*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/10, hm*j);
      }
    } else if (wl == 11) {
      for (int i = 0; i < 11; i++) {
        fill(55*(i+1), 15*(i+1), 50*(i+1), 100);
        stroke(255, 50);
        rect(i*width/11, hm*j, width/11, -hm);
        fill(75*(i+1), 25*(i+1), 60*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/11, hm*j);
      }
    } else if (wl == 12) {
      for (int i = 0; i < 12; i++) {
        fill(12*(i+1), 24*(i+1), 48*(i+1), 100);
        stroke(255, 50);
        rect(i*width/12, hm*j, width/12, -hm);
        fill(24*(i+1), 12*(i+1), 48*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/12, hm*j);
      }
    } else if (wl == 13) {
      for (int i = 0; i < 13; i++) {
        fill(13*(i+1), 26*(i+1), 72*(i+1), 100);
        stroke(255, 50);
        rect(i*width/13, hm*j, width/13, -hm);
        fill(26*(i+1), 13*(i+1), 72*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/13, hm*j);
      }
    } else if (wl == 14) {
      for (int i = 0; i < 14; i++) {
        fill(14*(i+1), 28*(i+1), 56*(i+1), 100);
        stroke(255, 50);
        rect(i*width/14, hm*j, width/14, -hm);
        fill(14*(i+1), 28*(i+1), 56*(i+1), 200);
        text(rg[j-1].charAt(i), i*width/14, hm*j);
        ellipse(width/2, hm*j, hm*2, hm*2);
      }
    }
  }

  PGraphicsPDF pdf = (PGraphicsPDF) g;  // Get the renderer
  // When finished drawing, quit and save the file
  if (frameCount >= 206) {
    exit();
  } else {
    pdf.nextPage();  // Tell it to go to the next page
  }

t++;
}

void mousePressed() {
  if (mouseX > width/2) {
    t = t+1;
  } else if (mouseX < width/2) {
    t = t-1;
  }
}
2 Likes