# Rotation 3d text

**URL:** <https://discourse.processing.org/t/rotation-3d-text/10213>\
**Category:** Coding Questions\
**Created:** [April 12, 2019, 12:38pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213 "2019-04-12T12:38:57Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 12, 2019, 12:38pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/1 "2019-04-12T12:38:57Z")

</div>

If I want to rotate my text in 360 degrees what parameter can I use?

```auto
 PFont myFont;
 float rotateVal=0.4;
 String s1= ("test");
 float x,y;

 
 float rotateX;
 float rotateY;

int offset =4;
float speed = 0.1;
float radius=20;
 float depth=1000;
 float Angle=0;
  float z = random(-radius, radius);
void setup(){
  background(255);
  size(500,500,P3D);
 myFont = loadFont("Serif-48.vlw");
frameRate(20);
}

void draw(){
  background(255);

 float Angle=atan2(x+80,y+80);
 pointLight(255,0,0,width/2,height/2,200);
  translate(200,200,0);
 rotateY(rotateVal);
 rotateX(x -=0.05);
 rotate(Angle);
 //rotateX(150);
textSize(50);
fill(0,0,0);
text(s1,x,rotateVal);
 Angle=15;
//popMatrix();
z=z+=1;
camera(500,depth,z,0,0,0, 0,1,0);
 }

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2019, 12:48pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/2 "2019-04-12T12:48:52Z")

</div>

rotateY etc. expect the value being in radians (0…TWO\_PI)

you can work with degrees (e.g. 270 degree) and convert from degrees to radians

rotateY ( radians (270) );

see also [https://www.processing.org/tutorials/trig/](https://www.processing.org/tutorials/trig/)

**Please**

- Please have `size()` as the first statement in `setup()` and background() _after_ it

- also prefer to use createFont instead of loadFont

- to use the font you must say `textFont(myFont);` after createFont

- use `camera()` at the _start_ of draw(), not at the end

- You use rotateVal as a y-value in text() which is not a good coding style (bad naming of a variable)

- Use **ctrl-t** in processing for auto-format (indents)

Chrisir

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2019, 12:50pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/3 "2019-04-12T12:50:33Z")

</div>

```auto

PFont myFont;
float rotateVal=0.4;
String s1= ("test");
float x, y;

float rotateX;
float rotateY;

int offset =4;
float speed = 0.1;
float radius=20;
float depth=1000;
float Angle=0;
float z = random(-radius, radius);

void setup() {
  size(500, 500, P3D);
  background(255);
  myFont = createFont("Serif-48.vlw", 76);
  textFont(myFont);
  frameRate(20);
}

void draw() {
  background(255);

  camera(500, depth, z, 
    0, 0, 0, 
    0, 1, 0);

  float Angle=atan2(x+80, y+80);
  // pointLight(255, 0, 0, width/2, height/2, 200);
  translate(200, 200, 0);
  rotateY(rotateVal);
  rotateX(radians(x -= 1));
  rotate(Angle);
  //rotateX(150);
  //textSize(50);
  fill(0, 0, 0);
  text(s1, x, rotateVal);
  Angle=15;
  //popMatrix();
  z=z+=1;
}

```

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 12, 2019, 1:18pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/4 "2019-04-12T13:18:01Z")

</div>

wooow yeah you have right!

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 12, 2019, 1:19pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/5 "2019-04-12T13:19:11Z")

</div>

hahahah, so If I want to rotate this text in ellipse mode 360 degrees the parameter is rotateY and X again?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2019, 1:23pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/6 "2019-04-12T13:23:04Z")

</div>

Move the text in a ellipse?

I think so!!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2019, 1:44pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/7 "2019-04-12T13:44:45Z")

</div>

rotation in a ellipse in 3D around the y-axis

```auto
PFont myFont;
String s1 = "test";
float x, y;

void setup() {
  size(1500, 500, P3D);
  background(255);
  myFont = createFont("Serif-48.vlw", 36);
  textFont(myFont);
  frameRate(20);
  fill(0, 0, 0);
}

void draw() {
  background(255);

  translate(width/2, 200, 0);
  rotateY(radians(x -= 1));

  translate(220, 0, 0);

  text(s1, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 12, 2019, 1:51pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/8 "2019-04-12T13:51:02Z")

</div>

yeah I found the example  
can i do something like that?  
i think it’s about the rotation or not? =/

[https://codepen.io/nxworld/pen/LbKxOJ](https://codepen.io/nxworld/pen/LbKxOJ)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2019, 1:58pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/9 "2019-04-12T13:58:54Z")

</div>

it’s a different kind because you look at it letter by letter

start from here

```auto
int i, cntX, cntY; 
float letterX, letterY;
int radius = 260; 
String quote = "Everything you can imagine is real. | Pablo Pi-casso";
float angleSpeed = TWO_PI/quote.length();

void setup() {
  size(600, 600);
  frameRate(2);
  fill(255, 0, 0);
  textSize(30);
}

void draw() {
  background(150);
  printQuote();
  i++;
  if ( i > quote.length() ) i = 0;
}

void printQuote() { 
  int cntX = width/2, cntY = height/2;
  for (int j = 0; j < i; j++) {
    letterX = cntX + radius * cos(j*angleSpeed);
    letterY = cntY + radius * sin(j*angleSpeed);
    text(quote.charAt(j), letterX, letterY);
  }
}

```

see

> [@Printing characters one by one?](https://discourse.processing.org/t/printing-characters-one-by-one/8952):
>
> Hello, How can I print out string characters one by one? Kind of like how in some RPG games when an NPC is talking the text will print out slowing at a certain speed each letter one by one. However I’m not going left to right, I’m printing them out in a circle which I’ve managed to do; except all the letters end up getting printed out in each space rather than each letter one by one. This is my bit of code that prints out the string in a circle, for(int i = 1; i \<= quote.length(); i++) { …

Chrisir

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 12, 2019, 2:14pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/10 "2019-04-12T14:14:11Z")

</div>

or maybe i can use the PShape parameter?  
or not =/

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2019, 2:19pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/11 "2019-04-12T14:19:19Z")

</div>

No, you can not

…

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2019, 2:22pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/12 "2019-04-12T14:22:36Z")

</div>

I can guide you through

first change size() command to 3D with P3D as third param

then you have the 2 coordinates. Use them in translate as x and z (y just 400 or so)

```auto
  pushMatrix(); 
  translate( ..... , 400, .....); 
  textAlign(CENTER); 
  text( quote.charAt(j) , 0, 0);
  popMatrix();

```

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 12, 2019, 3:02pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/13 "2019-04-12T15:02:20Z")

</div>

maybe i use the map(noise…) in translate?  
pff I don’t know it’s so hard or maybe I don’t understand it!!!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2019, 3:09pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/14 "2019-04-12T15:09:23Z")

</div>

Did you follow the steps I said?

> first change size() command to 3D with P3D as third param
> 
> then you have the 2 coordinates. Use them in translate as x and z (y just 400 or so)

show your attempt !

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 12, 2019, 3:18pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/15 "2019-04-12T15:18:00Z")

</div>

```auto
int i, cntX, cntY; 
float letterX, letterY;
int radius = 260; 
String quote = "Everything you can imagine is real. | Pablo Pi-casso";
float angleSpeed = TWO_PI/quote.length();
float x,y;
void setup() {
  size(500, 500, P3D);
  frameRate(20);
  fill(255, 0, 0);
  textSize(30);
}

void draw() {
  background(150);
  printQuote();
  i++;
  if ( i > quote.length() ) i = 0;
}

void printQuote() { 
    int cntX = width/2, cntY = height/2;
  for (int j = 0; j < i; j++) {
    letterX = cntX + radius * cos(j*angleSpeed);
    letterY = cntY + radius * sin(j*angleSpeed);
  
  pushMatrix();
    translate(PI/2,400,PI);
    textAlign(CENTER);
    text(quote.charAt(j), x,y);
    popMatrix();
  }
}

```

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 12, 2019, 3:20pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/16 "2019-04-12T15:20:03Z")

</div>

I know it’s silly but I am sorry my brain is burning right now, i saw tutorials again and again and I am confused.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2019, 3:26pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/17 "2019-04-12T15:26:02Z")

</div>

> [@Chrisir](#):
>
> the 2 coordinates.

the 2 coordinates I mentioned above are of course letterX and letterY - used as x and z in placing each letter

Here:

```auto
int i, cntX, cntY; 
float letterX, letterY;
int radius = 260; 
String quote = "Everything you can imagine is real. | Pablo Picasso";
float angleSpeed = TWO_PI/quote.length();
float x, y;

void setup() {
  size(1500, 800, P3D);
  frameRate(20);
  fill(255, 0, 0);
  textSize(30);
}

void draw() {
  background(150);
  i = quote.length(); 
  printQuote();
}

void printQuote() { 
  int cntX = width/2, cntY = 0;

  for (int j = 0; j < i; j++) {

    letterX = cntX + radius * cos(j*angleSpeed);
    letterY = cntY + radius * sin(j*angleSpeed);

    pushMatrix();
    translate(letterX, 550, letterY);
    textAlign(CENTER);
    text(quote.charAt(j), 0, 0);
    popMatrix();
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2019, 3:30pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/18 "2019-04-12T15:30:58Z")

</div>

for understanding `cos` and `sin` please check

[https://processing.org/tutorials/trig/](https://processing.org/tutorials/trig/)

Chrisir

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 12, 2019, 4:03pm UTC](https://discourse.processing.org/t/rotation-3d-text/10213/19 "2019-04-12T16:03:35Z")

</div>

oh my god thank you very much yees!!! THANK YOU A LOT