Text-morphing with geomerative

edited May 2016 in Share Your Work

I'm working on a sketch to take a text String and draw each glyph to the screen through points, "morphing" from one glyph to the next. I'm using the geomerative library to extract the points from the glyphs then lerp() to find the morphs before combining it all in a 2D array of RPoints. I've got it working as best I know how, but I feel it's a bit long-winded. I'm a beginner - any pointers on how to optimise my code? Thanks all!

import geomerative.*;

String title = "1 2 3 4 5 6 *";
String[] t;              // the array of individual character Strings title is split into
RFont text;
RShape[] shp;
int splitGlyph = 100;    // this is how many points from each glyph
int inc = 40;             // this is the number of morphs each character goes through before it is the "next" character

RPoint[][] pnts1;         // 2D array [individual_glyphs][splitpoints]
RPoint[][] pnts2;        // 2D array [individual_glyphs][splitpoints]

float[][] shiftPntX;    // 2D array [iterations][splitpoints]
float[][] shiftPntY;    // 2D array [iterations][splitpoints]

int morph = 0;
boolean run = false;

void setup() {
  size(1280, 800);
  background(255);
  smooth();
  t = splitTokens(title);

  float frac = (1.0/splitGlyph); // need a float between 0 and 1, the fraction at which splitter splits at
  shp = new RShape[t.length];
  pnts1 = new RPoint[t.length][splitGlyph];
  pnts2 = new RPoint[(t.length-1)*inc][splitGlyph];

  shiftPntX = new float[inc][splitGlyph]; 
  shiftPntY = new float[inc][splitGlyph]; 

  RG.init(this);      // initiate geomerative
  text = new RFont("Blackout Midnight.ttf", 300, CENTER); // set the font

  for (int i = 0; i < t.length; i++) {        // run through strings
    shp[i] = text.toShape(t[i]);              // convert each character to RShape
    for (int j = 0; j < splitGlyph; j++) {    // run through split increments
      pnts1[i][j] = shp[i].getPoint(j*frac);   // make new RPoints along the RShape
    }
  }

  for (int i = 0; i < (t.length-1); i++) {    // look at each individual character string
    for (int k = 0; k < inc; k++) {           // look at each iteration
      for (int j = 0; j < splitGlyph; j++) {  // look at each split point
        if (i < t.length-2) {
          shiftPntX[k][j] = lerp( pnts1[i][j].x, pnts1[i+1][j].x, k * (1.0/inc));    // find morphs
          shiftPntY[k][j] = lerp( pnts1[i][j].y, pnts1[i+1][j].y, k * (1.0/inc));    // find morphs
          pnts2[morph][j] = new RPoint(shiftPntX[k][j], shiftPntY[k][j]);              // assign morphs to pnts2
        } else {
          shiftPntX[k][j] = lerp( pnts1[i][j].x, pnts1[0][j].x, k * (1.0/inc));    // find morphs
          shiftPntY[k][j] = lerp( pnts1[i][j].y, pnts1[0][j].y, k * (1.0/inc));    // find morphs
          pnts2[morph][j] = new RPoint(shiftPntX[k][j], shiftPntY[k][j]);              // assign morphs to pnts2
        }
      }
      morph++;
    }
  }
  morph = (t.length-1)*inc - inc/2;  //start a little bit back, so we see the first character properly
}

void draw() {
  strokeWeight(2);
  background(255);
  translate(mouseX, mouseY);

  if (run) {
  for (int j = 0; j < splitGlyph; j++) {
      point( pnts2[morph][j].x, pnts2[morph][j].y);
    }
    morph++;
    if (morph == (t.length-1)*inc) {
      morph = 0;
    }
  }
}

void mousePressed() {  //click to start the morphing
  run = !run;
}

Comments

  • I know this is really far in time but, hey, I think your sketch is really nice. I'd like to learn from it for my own project.

    Surprised nobody even answered to you did you get your answers else where ?

    cheers

Sign In or Register to comment.