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

2

There are lots of resources here:
https://processing.org/

I suggest you peruse the examples, references and tutorials first.

Solving problems is about mastering basic coding first, understanding Processing, and integrating its building blocks (functions and libraries) to create animations or static works of art!

Start simple and build on that. Rome was not built in a day. :)

This is in “static” mode and runs once:

size(200, 400);
background(0);

String s = "ABCDEFGHIJKLMNOPQRSTUVWZYZ";

for(int i = 0; i<10; i++) // later!       
  {
  for(int c = 0; c<s.length(); c++)
    {
    char ch = s.charAt(c);   
    println(ch);
    
    // plot on screen from top to bottom
    int xsp = 15;
    int ysp = 15;
    //textSize();
    //textAlign();
    // fill()
    text(ch, i*xsp, c*ysp);
    
    // modulate xsp 
    float xspmod = 20*sin(c*(TWO_PI/s.length()));
    text(ch, xspmod+ width/2 + i*10, c*ysp);     
    }
  }

image
image202×432 8.4 KB

The very simple and incomplete example above can later be integrated in “active” mode with a setup() and draw() to create elaborate animations.

I always generate a quick rough cut of code off the top of head to test out some ideas and that is what I shared… a very simple proof of concept to build on.

The above is Processing Java code. You can certainly do this also with p5.js.

Have fun!

References:
How to achieve this style of visual? - #5 by glv
I have asked a lot of people but no one knows this effect

The references are examples of what can be done and you can replace shapes with text.

My recommendation is to write your own code first.
You can always glean insight from examining and dissecting examples once you have experience.
Sometimes it is a bit of back and forth but the experience is necessary to master coding.

You can change the category to p5.js if that is your focus. I will leave that with you as part of your journey.

The exploration is the fun part. :slight_smile:

This was one one of the cool effects adding phase shifts in the loops:

text

Have fun!

:)

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);
    }
  }
}