Better text on path

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);
  font = createFont("Helvetica", 24);
  textFont(font, 24);

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

  // draw text!
  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
    rotate(letterSpacing);                 // move for next letter


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


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

Sign In or Register to comment.