#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Better text on path

edited February 2015

I've been able to create a crude version of Illustrator's text-on-path where I draw each character around a circle:

``````String s =             "Hello, world!";     // some text to display
float startAngle =     radians(0);          // starting position (easier to think in degrees)
float letterSpacing =  radians(10);         // how far apart to make the letters
float dia =            300;                 // diameter of the circle

PFont font;

void setup() {

// basic setup, create font
size(600, 600);
background(255);
font = createFont("Helvetica", 24);
textFont(font, 24);
textAlign(CENTER);

// draw circular path
noFill();
stroke(0, 100);
ellipse(width/2,height/2, dia,dia);

// draw text!
fill(0);
noStroke();
pushMatrix();
translate(width/2, height/2);            // move to center (can be any point)
rotate(startAngle);                      // rotate to starting angle
for (int i=0; i<s.length (); i++) {      // draw character-by-character
pushMatrix();                          // local transform for each letter
translate(-dia/2, 0);                  // move to edge of circle
rotate(-HALF_PI);                      // rotate letters (note what happens if you don't)
text(s.charAt(i), 0, 0);               // display the character
popMatrix();
rotate(letterSpacing);                 // move for next letter
}
popMatrix();

}
``````

But the spacing is too even – note the space between "hello" and the comma. Any ideas on improving this?

Tagged:

• @jeffthomson

(the space is normal: white character) what using textWidth()?

• the spacing is too even

that's because you're telling it to be even in line 3. ideally it'd be based in the width of the character you've just drawn.

• @akenaton – sorry, I meant the space between the "o" and the comma.

@koogs – good suggestion. I always forget about `textWidth()`, though I've had mixed luck.

Followup would be: circles are easy, what about more complex curves?

• @jeffthompson===for more complex curves you can see ijeoma lib with bezier curves...or use maths formulas when you know them!