Trying to understand how to make this kinetic type grid

Processing Project Guidance
1

Hello! I am pretty new to processing, but I have some coding experience and some motion experience. I am desperately trying to make something like this: https://www.pinterest.com/pin/3588874698075965/

But I can only find cavalry tutorials and nothing for creative code - cavalry does export some JS, but I am not sure of the quality of this.. Does anyone know any tutorials or resources that could help me solve this?

Best,
Elise

3

To keep the text clean and readable, you’ll want to split it into characters and keep track of their widths, positioning the letters so that you’re only varying the spacing between them.

Here, I’m varying the inter-character spacing by the sum of two sine waves with different periods.

float sn( float x ) { return sin( TAU * x ); }
float snn( float x ) { return 0.5+0.5*sin(TAU*x); }

String s = "Typography in motion";
char[] c;
int nc;
float[] cw;
float spacing;

void setup() {
  size( 800, 800 );
  textSize( 24 );
  c = s.toCharArray();
  nc = c.length;
  cw = new float[nc];
  float totw = 0;
  for( int i=0; i<nc; i++ )
    cw[i] = textWidth(c[i])/width;
  for( int i=0; i<nc-1; i++ )
    totw += cw[i];
  spacing = (1-totw)/(nc-1);
}

void draw() {
  float t = frameCount/240.0;
  background(0);
  fill(255);
  int rows = height/25;
  for( int j=0; j<rows; j++ ) {
    float v = 1.0*j/rows;
    float x = 0;
    for( int i=0; i<nc; i++ ) {
      text( c[i], 12+(width-36)*x, 36+j*24 );
      float u = 1.0*i/(nc-1);
      x += cw[i] + spacing * (1 + sn(u+1.5*v+2*t)/3 + sn(2*u-0.8*v-t)/2);
    }
  }
}