# Rotate / Pendulum swing array of letters
**URL:** https://discourse.processing.org/t/rotate-pendulum-swing-array-of-letters/3759
**Category:** Coding Questions
**Created:** [September 23, 2018, 1:40pm UTC](https://discourse.processing.org/t/rotate-pendulum-swing-array-of-letters/3759 "2018-09-23T13:40:22Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@Keks](https://discourse.processing.org/u/Keks)
#### Post date: [September 23, 2018, 1:40pm UTC](https://discourse.processing.org/t/rotate-pendulum-swing-array-of-letters/3759/1 "2018-09-23T13:40:22Z")
Hello I am working with superimposed text and trying to create an animate version of this image.
.
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;
```auto
```
```auto
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);
}
}
}
```
```auto
```
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.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [September 23, 2018, 3:13pm UTC](https://discourse.processing.org/t/rotate-pendulum-swing-array-of-letters/3759/2 "2018-09-23T15:13:22Z")
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)
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 23, 2018, 6:11pm UTC](https://discourse.processing.org/t/rotate-pendulum-swing-array-of-letters/3759/3 "2018-09-23T18:11:44Z")
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](https://processing.org/reference/PGraphics.html). 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 🙂
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [September 25, 2018, 5:08pm UTC](https://discourse.processing.org/t/rotate-pendulum-swing-array-of-letters/3759/4 "2018-09-25T17:08:47Z")
> [@Keks](#):
>
> I have hit a wall trying to rotate each block of letters as one object.
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()`:
- [textAlign() / Reference / Processing.org](https://processing.org/reference/textAlign_.html)
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](https://processing.org/tutorials/transform2d/)
Here is an extremely simple example of the concept:
```auto
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;
}
```
---
### Author:  [@Keks](https://discourse.processing.org/u/Keks)
#### Post date: [September 26, 2018, 8:22am UTC](https://discourse.processing.org/t/rotate-pendulum-swing-array-of-letters/3759/5 "2018-09-26T08:22:29Z")
Formatted my code.Thanks for the tip
---
### Author:  [@Keks](https://discourse.processing.org/u/Keks)
#### Post date: [September 26, 2018, 4:24pm UTC](https://discourse.processing.org/t/rotate-pendulum-swing-array-of-letters/3759/6 "2018-09-26T16:24:12Z")
Thanks a lot that was really helpful! I got the letters to rotate as one block:
```auto
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.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [September 26, 2018, 5:24pm UTC](https://discourse.processing.org/t/rotate-pendulum-swing-array-of-letters/3759/7 "2018-09-26T17:24:24Z")
> [@Keks](#):
>
> 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.
There are many ways to approach this. If you want to manage your lines individually, you could create a StringList…
- [StringList / Reference / Processing.org](https://processing.org/reference/StringList.html)
…or a String array, or an ArrayList.
- [Array / Reference / Processing.org](https://processing.org/reference/Array.html)
- [[] (array access) / Reference / Processing.org](https://processing.org/reference/arrayaccess.html)
- [ArrayList / Reference / Processing.org](https://processing.org/reference/ArrayList.html)
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.
> [@Keks](#):
>
> 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.
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.
- [pushMatrix() / Reference / Processing.org](https://processing.org/reference/pushMatrix_.html)