# 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 '

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)])

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()
``````
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 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);

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

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

Sorry for not formatting, I’m knew to this.

Why is my text mirrored?

``````String ord = "Around The World";
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);

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

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

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

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