Text on a sphere

Hi guys

I would like to know how I wrap text around sphere shape that I can rotate?
I’m asking for a similar look as www.spacetypegenerator.com

If any of you can guide me in the right direction, I would be great full!

Best Regards
Mathias

Hi @MathFinsen,

Your example shows text revolving around a circle, not around a sphere.

Using cylindrical coordinates (vs “polar coordinates” for a sphere) should be appropriate for what you’re trying to achieve.

Example sketch with Python Mode:

strings = 'Around the World '
radius, angle = 300, radians(360) / len(strings)

def setup():
    size(1000, 600, P3D)
    textAlign(CENTER)
    textMode(SHAPE)
    textSize(90)
    smooth(8)
    fill(0)
    
def draw():
    background(255)
    
    translate(width>>1, height>>1)
    rotateX(PI/2.5)
    rotateY(-QUARTER_PI/2)
    rotate(frameCount * .01)
   
    for i in range(len(strings)):
        x = cos(angle * i) * radius 
        y = sin(angle * i) * radius
        
        pushMatrix()
        translate(x, y)
        rotateX(-HALF_PI)
        rotateY(-angle*i + HALF_PI)
        text(strings[-i], 0, 0)
        popMatrix()
3 Likes

That is exactly what I’m looking for!
Thank you very much!

Hello again

How do you get the sentence to go all the way around?

Do you mean (a) how to repeat the sentence or (b) do you want to be able to have multiple lines under each other so that the text is like in a spiral leading downwards?

1 Like

Could you be more specific @MathFinsen ?

It would be easier if you could provide some code as well.

From what I understand you would like your text to make a perfect loop, if so make sure to compute the total length of all you text and update the angle variable accordingly :

words = 'Around the World '
strings = ' '.join([words for i in range(14)])
angle = radians(360) / len(strings)

def setup():
    size(1000, 600, P3D)
    textAlign(CENTER)
    textMode(SHAPE)
    textSize(90)
    smooth(8)
    fill(0)
    
    global radius
    radius = textWidth(words) * 2
    

    
def draw():
    background(255)
    
    translate(width>>1, height>>1)
    rotateX(PI/2.5)
    rotateY(-QUARTER_PI/2)
    rotate(frameCount * .01)
   
    for i in range(len(strings)):
        x = cos(angle * i) * radius 
        y = sin(angle * i) * radius
        
        pushMatrix()
        translate(x, y)
        rotateX(-HALF_PI)
        rotateY(-angle*i + HALF_PI)
        text(strings[-i], 0, 0)
        popMatrix()
1 Like

I now have a perfekt loop, only with the one sentence. The trouble was in the translate section.
Now I want a function where I can adjust how many many stacks of of text I want, like the picture below:

String ord = "Around The World";
float radius = 100;
float angle = radians(360) / ord.length() ;
float x, y, z; 

PFont font; // creates a processing fon value named font

void setup() {
  size(1000, 600, P3D);
  textAlign(CENTER);
  textMode(SHAPE);
  textSize(30);
  smooth(50);
  fill(0);

  font = loadFont ("Gosha.vlw");
  textFont (font);
  // assigns the font stored in font variable to textFont
}
void draw() {
  background(50, 100, 255);
  lights();


//GLOBE
  //pushMatrix();
  ////translate(width/2, height/2, -200);
  //translate(mouseX, height/2, -200);
  //noFill();
  //stroke(255);
  //sphere(100);
  //popMatrix();

  //translate(width>>1, height>>1);
  translate(mouseX, mouseY);
  rotateX(PI/2);
  rotateY(-QUARTER_PI/2);
  rotate(frameCount * .01);

  for (int i=0; i< ord.length(); i++) {
    x = cos(angle * i) * radius;
    y = sin(angle * i) * radius;

    pushMatrix();
    translate(x, y, 0);
    rotateX(-HALF_PI);
    //rotateX(angle*i- + PI/4);
    rotateY(-angle*i + HALF_PI);
    text(ord.charAt(i), 0, 0);
    popMatrix();
  }
}
1 Like

Please format your code next time.

Regarding your question, you just need to translate your text along the Z-axis.

for layer in range(10):
    translate(0, 0, layer+90) # <-- Z-axis translation

    for i in range(len(strings)):
        x = cos(angle * i) * radius 
        y = sin(angle * i) * radius
            
        pushMatrix()
        translate(x, y)
        rotateX(-HALF_PI)
        rotateY(-angle*i + HALF_PI)
        text(strings[-i], 0, 0)
        popMatrix()
2 Likes

Thank you again for answer! very helpfull!
Sorry for not formatting, I’m knew to this.

Why is my text mirrored?

String ord = "Around The World";
float radius = 100;
float angle = radians(360) / ord.length() ;
float x, y, z; 
PFont font; // creates a processing fon value named font
int numRings = 6;

void setup() {
  size(1000, 600, P3D);
  textAlign(CENTER);
  textMode(SHAPE);
  textSize(30);
  smooth(8);
  fill(255);

  font = loadFont ("Gosha.vlw");
  textFont (font);
  // assigns the font stored in font variable to textFont
}
void draw() {
  numRings = 5;
  background(0);
  lights();

  for (int i =0; i<numRings; i++) {
    pushMatrix();
    translate(mouseX, mouseY+i*50, 0);
    wordRing(radius, angle);
    popMatrix();
  }
}

void wordRing(float thisRadius, float thisAngle) {
  rotateX(1.0*PI/2.5);
  rotateY(1.0*(-QUARTER_PI/2));
  rotate(1.0*(frameCount * .01));

  for (int i=0; i< ord.length(); i++) {
    x = cos(thisAngle * i) * thisRadius;
    y = sin(thisAngle * i) * thisRadius;

    pushMatrix();
    translate(x, y, 0);
    rotateX(1.0*(-HALF_PI));
    rotateY(1.0*(-thisAngle*i - HALF_PI));
    text(ord.charAt(i), 0, 0);
    popMatrix();
  }
}
1 Like

Sorry for the late reply.

It is not mirrored. You just need to display the strings in reverse order

Replace this

text(ord.charAt(i), 0, 0);

by

text(ord.charAt((ord.length()-1) - i), 0, 0);

Also the order of your translations were incorrect, here’s a fixed version of you code.

String ord = "Around The World ";
float radius = 100;
float angle = radians(360) / ord.length() ;
float x, y, z; 
PFont font; // creates a processing fon value named font
int numRings = 6;

void setup() {
  size(1000, 600, P3D);
  textAlign(CENTER);
  textMode(SHAPE);
  textSize(30);
  smooth(8);
  fill(255);

  //font = loadFont ("Gosha.vlw");
  //textFont (font);
  // assigns the font stored in font variable to textFont
}
void draw() {
  numRings = 5;
  background(0);
  lights();


  translate(mouseX, mouseY);
  rotateX(PI/2.5);
  rotateY(-QUARTER_PI/2);
  rotate(frameCount * .01);
  
  for (int i =0; i<numRings; i++) {
    translate(0, 0, i+50);
    wordRing(radius, angle);
  }
}

void wordRing(float thisRadius, float thisAngle) {


  for (int i=0; i< ord.length(); i++) {
    x = cos(thisAngle * i) * thisRadius;
    y = sin(thisAngle * i) * thisRadius;

    pushMatrix();
    translate(x, y);
    rotateX(-HALF_PI);
    rotateY(-thisAngle*i + HALF_PI);
    text(ord.charAt((ord.length()-1) - i), 0, 0);
    popMatrix();
  }
}
1 Like