topical media & game development
graphic-processing-learning-17-example-17-8-example-17-8.pde / pde
// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com
// Example 17-8: Characters along a curve
// The message to be displayed
String message = "text along a curve";
PFont f;
// The radius of a circle
float r = 100;
void setup() {
size(320,320);
f = createFont("Georgia",40,true);
textFont(f);
// The text must be centered!
textAlign(CENTER);
smooth();
}
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;
// For every box
for (int i = 0; i < message.length(); i ++ ) {
// The character and its width
char currentChar = message.charAt(i);
// Instead of a constant width, we check the width of each character.
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 conversion allows us to find the point along the curve. See Chapter 13 for a review of this concept.
translate(r*cos(theta), r*sin(theta));
// Rotate the box (rotation is offset by 90 degrees)
rotate(theta + PI/2);
// Display the character
fill(0);
text(currentChar,0,0);
popMatrix();
// Move halfway again
arclength += w/2;
}
}
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.