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.

This screenshot shows the color gradient from yellow to white inside 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);
  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.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);



One thought on “Week 4: Generative text”

  1. Nice job Susanne. One thing to try is setting the rectMode as CENTER, so the boxes spread out up too. It looks like they only go down currently. That could be a creative decision though, but it should be made consciously and with purpose.

Leave a Reply