I am trying to display text that can move around screen in an animated environment. To do this I am using a combination of rect() and text() to create the labels and scale() and translate() to fit contents on screen and allow zooming and panning.

The problem I have is that line and polygon locations seemed to be correct, but text placement seems to be subject to some kind of rounding, so it 'judders' as it moves. This can be demonstrated with a minimal example:

Code:

PFont font;
float pos=0;
float inc = 0.005;
float w,h;
float scaling = 10;    // Change between 1 and 20 to see rounding effect.

void setup()
{
  size(400, 100);
  frameRate(10);
  font = createFont("GillSans",12);
  textFont(font, width/20);
  textAlign(LEFT,TOP); 
  w = textWidth("Test");
  h = textAscent();
}


void draw()
{
  background(200,180,180);
  textFont(font, width/(20*scaling));
  strokeWeight(1/scaling);
  float x = lerp(0,(width-w)/scaling,pos);

  scale(scaling);
  
  // Draw rectangle and text at the same location.
  fill(255);
  rect(x,height/(2*scaling),w/scaling,h/scaling);
  fill(0);
  text("Test",x,height/(2*scaling));
  
  // Move label a little to the left or right.
  pos += inc;
  if (pos >=1) inc = -0.005;
  if (pos <=0) inc = 0.005;
}
 

Am I missing something obvious here, or is there some workaround? Apologies if this has been covered elsewhere, but my limited searching skills have not dug up any obvious posts or bug reports.

Thanks,

Jo.

I am not quite sure what you mean by 'take care of' in this context. The text() call is certainly influenced by the scale() call in that the (x,y) positioning are all approximately repositioned according the scaled coordinate space. Likewise the size of the text is also scaled to about the right size. To see this, set scaling=3 in line 5, and replace line 2 of the draw method with textFont(font,width/20).

The problem seems to be that while position is approximately scaled, some kind of quantization is occurring in the process so that actual (x,y) locations are snapped to some grid that is coarser than the screen resolution. The greater the scaling factor, the coarser the quantization (try setting scaling to 50 in the original code to this is greatly pronounced).

I am surprised this has not been more widely reported as a problem since it seems like quite a common thing to wish to do, which is why I thought I might be missing something obvious.

Thanks for that. Unfortunately, it does not quite solve the problem. However, it does help identify where the problem is precisely.

If you set the scaling to something quite high, say 50, with your change, you will notice that the x location of the text is about right, although there is still some small 1-2 pixel rounding of location. However, the y location is considerably offset due to this same rounding problem.

In struggling to work out why this rounding effect works differently in x and y directions, I realised that the quantisation is occurring, not in the location of the text as such, but in the offset implied by textAlign(). Anything other than textAlign(LEFT,BOTTOM) gets rounded before scaling.

I am happy to report this as a bug in the bug section unless someone can point out what I am missing.

Thanks for that - I've now logged this as a bug.