# Text on a sphere

**URL:** https://discourse.processing.org/t/text-on-a-sphere/8960
**Category:** Coding Questions
**Created:** [March 5, 2019, 9:03am UTC](https://discourse.processing.org/t/text-on-a-sphere/8960 "2019-03-05T09:03:49Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![MathFinsen](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MathFinsen](https://discourse.processing.org/u/MathFinsen)
#### Post date: [March 5, 2019, 9:03am UTC](https://discourse.processing.org/t/text-on-a-sphere/8960/1 "2019-03-05T09:03:49Z")

</div>

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](http://www.spacetypegenerator.com)

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

Best Regards  
Mathias

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [March 5, 2019, 1:47pm UTC](https://discourse.processing.org/t/text-on-a-sphere/8960/2 "2019-03-05T13:47:18Z")

</div>

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:

 ![around](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9e301dd3363c588d0e3f42d4ab042fdb8ea441ef.png)

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

```

---

<div class="post-metadata">

### Author: ![MathFinsen](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MathFinsen](https://discourse.processing.org/u/MathFinsen)
#### Post date: [March 5, 2019, 2:47pm UTC](https://discourse.processing.org/t/text-on-a-sphere/8960/3 "2019-03-05T14:47:09Z")

</div>

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

---

<div class="post-metadata">

### Author: ![MathFinsen](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MathFinsen](https://discourse.processing.org/u/MathFinsen)
#### Post date: [March 6, 2019, 11:33am UTC](https://discourse.processing.org/t/text-on-a-sphere/8960/4 "2019-03-06T11:33:49Z")

</div>

Hello again

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

 ![05](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/50fb03b0a3d7fed01158e59299d17af7e956a4d4.png)

---

<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: [March 6, 2019, 12:05pm UTC](https://discourse.processing.org/t/text-on-a-sphere/8960/5 "2019-03-06T12:05:58Z")

</div>

> [@MathFinsen](#):
>
> 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?

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [March 6, 2019, 12:25pm UTC](https://discourse.processing.org/t/text-on-a-sphere/8960/6 "2019-03-06T12:25:49Z")

</div>

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 :

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

```

---

<div class="post-metadata">

### Author: ![MathFinsen](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MathFinsen](https://discourse.processing.org/u/MathFinsen)
#### Post date: [March 6, 2019, 2:00pm UTC](https://discourse.processing.org/t/text-on-a-sphere/8960/7 "2019-03-06T14:00:11Z")

</div>

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:

 ![48](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b01d03e5993d94ec8da1af4d018131f01daf0343.png)

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

```

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [March 6, 2019, 3:24pm UTC](https://discourse.processing.org/t/text-on-a-sphere/8960/8 "2019-03-06T15:24:47Z")

</div>

Please format your code next time.

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

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

```

---

<div class="post-metadata">

### Author: ![MathFinsen](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MathFinsen](https://discourse.processing.org/u/MathFinsen)
#### Post date: [March 7, 2019, 10:07am UTC](https://discourse.processing.org/t/text-on-a-sphere/8960/9 "2019-03-07T10:07:15Z")

</div>

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

Why is my text mirrored?

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

```

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [March 9, 2019, 1:14am UTC](https://discourse.processing.org/t/text-on-a-sphere/8960/10 "2019-03-09T01:14:57Z")

</div>

Sorry for the late reply.

> [@MathFinsen](#):
>
> Why is my text mirrored?

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

Replace this

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

```

by

```auto
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.

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

```
