Better text on path

jeffthompson

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?

akenaton

@jeffthomson

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

koogs

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.

jeffthompson

@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?

akenaton

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