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!
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