Moving text around a circular path

Processing Coding Questions
1

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
2

Hello @scottmclaughlin,

:)

1 Like
3

Ah, fixed it :slight_smile:

// 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;
    }

  }
  
}
3 Likes