Rotate / Pendulum swing array of letters

Processing Coding Questions
1

Hello I am working with superimposed text and trying to create an animate version of this image.
00-jiri.
It is basically two superimposed blocks of letters rotated at their center in opposite directions. I want to get each block of text to pendulum swing back and forth on its center axis in opposite directions simultaneously, but I think its useful to figure out first how to rotate a block of letters.

I have tried working out the motions involved incrementally creating the two block of text using for() with i,j values and overlaying them. See code below;



PFont Lato;

void setup() {
  size(1000, 1000);
  background(255, 255, 255);
  Lato= createFont("Lato-Light.ttf", 40);
  textFont(Lato);
  for (int i=220; i<750; i=i+15)
  {
    for (int j=350; j<450; j=j+10)
    {

      color a = color(200, 10, 60, 120);
      fill(a);
      text("/", i, j);
      color b = color(200, 10, 20, 80);
      fill(b);
      text("t", i, j);
    }
  }
}

I have hit a wall trying to rotate each block of letters as one object. I am thinking perhaps I should have used an array of letters to create each block, but still have the problem of rotating the array as one solid object. In a previous sketch i was able to rotate a series of horizontal lines together like one object but i have been finding it hard to apply this to a block or grid of letters. The letters begin to rotate individually.

1 Like
2

For animation you need a draw function- see examples

You can use ctrl-t in processing to get Auto format

You can use rotate before the entire text and for section (which rotates around the origin, see reference )

You can use text(„gejdjdjfubfnfkfkfk\nbbbbbb“,-33-33);

To get a longer text with artificial line breaks (the \n)

1 Like
3

Hi Keks,

Can you please format your code?

On your previous post, hit the pen icon on the bottom left to edit it.
Then select your code and hit </> in the text editor toolbar.
Be sure to hit ctrl+t in processing to properly indent everything.

Regarding your question, you should have a look at PGraphics. You can draw each block on a PGraphics object and then rotate that object. And you don’t even have to alter your code that much :slight_smile:

1 Like
4

PGraphics is a great way to go, but I want to focus on Chrisir’s suggestion of using primitive rotation and the text command.

The key thing here is that you want to have a single draw object that you rotate from its center, not its upper left corner. Things like text() are normally drawn from the upper left, so they don’t rotate the way that you want – unless you change that using textAlign():

Another key idea is that you want to translate to your rotation point, then rotate the thing around its center. See the 2D tutorial for more details: 2D Transformations / Processing.org

Here is an extremely simple example of the concept:

String txt = "This is text";
float txtRotation = 0;

void setup(){
  textAlign(CENTER,CENTER);
}
void draw(){
  background(0);
  translate(width/2,height/2);
  rotate(txtRotation);
  text(txt, 0, 0);
  txtRotation += 0.01;
}

TextRotation
TextRotation480×524 19.4 KB

5

Formatted my code.Thanks for the tip

6

Thanks a lot that was really helpful! I got the letters to rotate as one block:

String txt = "aaaaaaaa\naaaaaaaa\naaaaaaaa\naaaaaaaa\naaaaaaaa";
float txtRotation = 0;



void setup() {
  size(1000, 1000);
  background(255, 255, 255);
  textAlign(CENTER, CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotate(txtRotation);
  text(txt, 0, 0);
  txtRotation += 0.01;

  translate(width/2, height/2);
  rotate(txtRotation);
  text(txt, 0, 0);
  txtRotation += 0.01;
}

I am just wondering if there is a simpler/neater way of creating the block of letters. Perhaps there’s a way to create an array and then rotate it. The sketch needs a lot letters per line per block, using \n to create line breaks would make String text() really long.

Also the second block which is supposed to be layered right under the first is not positioned anywhere near there and is rotating around the first block somewhere off the page.

7

There are many ways to approach this. If you want to manage your lines individually, you could create a StringList…

…or a String array, or an ArrayList.

Then you will need to loop over the items and draw each one with text(). In order to space them out you will need to move down by the line height between each item. In order to keep them all centered, you will have to shift the whole thing up by half the line height times how many lines you have.

Use pushMatrix() / popMatrix() command before and after your translate() + rotate() groups to isolate them. Otherwise your second translation occurs from the current center-point of your first translation – not from the upper corner of the screen.