# Moving text around a circular path

Hi,

Relative Processing noob here. I’m stuck trying to figure out how to make text move around a circle. I took Shiffman’s tutorial on Displaying text character by character and tried to add a fixed distance to push the text around the circle each time the full word is rendered.

If you run the code below you’ll see the hilarious wrongness, I’m clearly misunderstanding rotational geometry.

Can anyone point me to examples that do what I need? Or explain what I’m missing?

In the code below I’ve commented as “SCOTT” for the bits I added.

Thanks

``````// The message to be displayed
String message = "questions";

PFont f;
// The radius of a circle
float r = 100;
float arclength = 0;

float m = 0; // SCOTT: adding length to move text around;

void setup() {
size(320, 320);
f = createFont("Georgia",40,true);
textFont(f);
// The text must be centered!
textAlign(CENTER);
smooth();
frameRate(5);
}

void draw() {
background(255);

// Start in the center and draw the circle
translate(width / 2, height / 2);
noFill();
stroke(0);
ellipse(0, 0, r*2, r*2);

// We must keep track of our position along the curve

// For every box
for (int i = 0; i < message.length(); i++)
{
// Instead of a constant width, we check the width of each character.
char currentChar = message.charAt(i);
float w = textWidth(currentChar);

// Each box is centered so we move half the width
arclength += w/2;
// Angle in radians is the arclength divided by the radius
// Starting on the left side of the circle by adding PI
float theta = PI + arclength / r;

pushMatrix();
// Polar to cartesian coordinate conversion
translate(r*cos(theta), r*sin(theta));
// Rotate the box
rotate(theta+PI/2); // rotation is offset by 90 degrees
// Display the character
fill(0);
text(currentChar,m,0);
popMatrix();
// Move halfway again
arclength += w/2;

//SCOTT: I added this to increase the spacing by 10px on each time the full 'message' has been drawn. This should keep the letter spacing but just move it 10px around the circle each time.
if (i == 0){
m += 10;
}
}

}
``````
1 Like

Hello @scottmclaughlin,

`:)`

1 Like

Ah, fixed it ``````// The message to be displayed
String message = "questions";

PFont f;
// The radius of a circle
float r = 100;

float m = 0; // SCOTT: adding length to move text around;

void setup() {
size(320, 320);
f = createFont("Georgia",40,true);
textFont(f);
// The text must be centered!
textAlign(CENTER);
smooth();
frameRate(5);
}

void draw() {
background(255);

// Start in the center and draw the circle
translate(width / 2, height / 2);
noFill();
stroke(0);
ellipse(0, 0, r*2, r*2);

// We must keep track of our position along the curve
float arclength = 0 + m; // SCOTT: ah, here's where I should add the 'm' variable that increases distance between instances of the text.

// For every box
for (int i = 0; i < message.length(); i++)
{
// Instead of a constant width, we check the width of each character.
char currentChar = message.charAt(i);
float w = textWidth(currentChar);

// Each box is centered so we move half the width
arclength += w/2;
// Angle in radians is the arclength divided by the radius
// Starting on the left side of the circle by adding PI
float theta = PI + arclength / r;

pushMatrix();
// Polar to cartesian coordinate conversion
translate(r*cos(theta), r*sin(theta));
// Rotate the box
rotate(theta+PI/2); // rotation is offset by 90 degrees
// Display the character
fill(0);
text(currentChar,0,0);
popMatrix();
// Move halfway again
arclength += w/2;

//SCOTT: I added this to increase the spacing by 10px on each time the full 'message' has been drawn. This should keep the letter spacing but just move it 10px around the circle each time.
if (i == 0){
m += 10;
}

}

}
``````
2 Likes