Improving the display of rotated text

Question

I have the following code that's adapted from an online example for rotating text. The code works fine in that it rotates the text to the correct angle, but I would to know if there is a way to improve the accuracy and crispness of the rotated text. On my display it looks as though the rotated text is 'stepped' rather than smooth.

PFont f;
String message = "abcdefghijklmnopqrstuvwxyz";
float theta, x;

void setup() {
  size(800, 200);
  f = createFont("Arial",20,true);
}

void draw() { 
 // background(255);
  fill(0);
  textFont(f);    // Set the font
  translate(x,height/2);  // Translate to the center
  rotate(theta);                // Rotate by theta
  textAlign(LEFT);            
  text(message,0,0);            
  theta += 0.1;                // Increase rotation
  x += textWidth(message);
  if (x>800){noLoop(); }
}

I've amended by example to help display the difference. In the new code I've change the text to a string of underscores and drawn a reference line in red too. If it works the same on your machine you should see a staggering in the black line created by the underscores.

String message = "________";
float theta, x;
PFont f;

void setup() {
  size(800, 200);
  f = loadFont("ArialMT-20.vlw");
  smooth();
}

void draw() { 
  fill(0);
  textFont(f);    // Set the font

  translate(x,height/2);  // Translate to the center
  rotate(theta);                // Rotate by theta

  text(message,0,0);

  stroke(255,0,0);
  strokeWeight(2);
  line(0,0,textWidth(message),0);

  theta += 0.1;                // Increase rotation
  x += textWidth(message);
  if (x>800){noLoop(); }
}

For me it gives the following output, but I know this will differ if run on a Mac:

Answer 1

Try tweaking the RenderingHints:

• Set fractional metrics to on
• Set text antialiasing to on or a sub-pixel setting matching your display
• Set stroke control to pure