Week 4: Generative text

For this weeks exercise, I liked the ‘Word made of Circles’ example that we looked at in class so I tried out what it could look like with a rectangle instead of ellipses, and to enhance that ‘edgy’ look, I imported a new font with letter composed of little squares. For the colors, I gave the little rectangles that compose the letters a white outline and a yellow, slightly transparent fill that matches the yellow of the background. This creates somewhat of a gradient from the yellow inside of the letters to the white edge that only becomes  visible when hovering over the letters.

Take a look at the processing code below adapted from the class example.

import geomerative.*;
RFont font;
String phrase = "susanne";
float xOffset = 0;

RPoint[] pnts;

void setup() {
  size(800, 800);
  RG.init(this);
  font = new RFont("PressStart2P-Regular.ttf", 100, RFont.LEFT);

  // load the phrase into geomerative
  // the first line sets how much distance should there by between each point 
  RCommand.setSegmentLength(1);
  //RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH );
  RGroup grp;
  grp = font.toGroup(phrase);
  grp = grp.toPolygonGroup();
  pnts = grp.getPoints();

  // to set the word in the middle of the screen
  // get the size of the phrase subtracted from the width of the screen
  // this is the amount left over
  xOffset = width - grp.getBottomRight().x - grp.getBottomLeft().x;
  // divide that by two to center it
  xOffset = xOffset/2;

  fill(251, 252, 163, 5);
  stroke(255, 255, 255, 40);
}

void draw() {
  background(226, 227, 172);

  for (int i=0; i< pnts.length; i++) {
    float moveIt = (noise(frameCount*.01+i*.01)-.5)*10;
    float x = pnts[i].x + moveIt + xOffset;
    float y = pnts[i].y + moveIt + height/2;

    // dividing makes it invert it's action
    float diam = 2500/dist(x, y, mouseX, mouseY);
    diam = constrain(diam, 7, 70);

    rect(x, y, diam, diam);
  }
}