Rotation 3d text

Processing Coding Questions
1

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

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

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/

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

3 

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

wooow yeah you have right!

5

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

6

Move the text in a ellipse?

I think so!!

7

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

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

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

9

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

start from here

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

Chrisir

10

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

11

No, you can not

…

12

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)

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

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

14

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 !

15 
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();
  }
}
16

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.

17

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

Here:

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

for understanding cos and sin please check

https://processing.org/tutorials/trig/

Chrisir

19

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

1 Like