Loading...
Logo
Processing Forum
Programming Questions
jo-wood
Jo Wood

Rounding of text position after scaling

in Programming Questions  •  2 years ago  
Suppose you wished to display some small text inside a rectangle, as below:



The code to do this might be something like this:

Copy code
  1. String message = "This is a simple line of text";
  2. float visualTextSize = 6;

  4. void setup()
  5. {
  6.   size(400,120);
  7.   smooth();
  8.   textAlign(CENTER,CENTER);
  9.   rectMode(CENTER);
  10.   textFont(createFont("Arial",6),6);
  11. }

  13. void draw()
  14. {
  15.   background(255,220,230);
  16.   noFill();
  17.   textSize(visualTextSize);
  18.   rect(width/2,height/2,textWidth(message),visualTextSize);
  19.   fill(255,0,0);
  20.   text(message,width/2,height/2);
  21. }
If in the sketch, you wished to enlarge the text/rectangle (for example in response to interactive zooming), applying a simple scaling results in blurred text as we might expect because a 6pt font is being displayed at a much larger size:



I would assume that the way to overcome the blurring would be to create a larger font before it is displayed:
Copy code
  1. String message = "This is a simple line of text";
  2. float visualTextSize = 6;

  4. void setup()
  5. {
  6.   size(400,120);
  7.   smooth();
  8.   textAlign(CENTER,CENTER);
  9.   rectMode(CENTER);
  10.   
  11.   textFont(createFont("Arial",30),30);
  12. }

  14. void draw()
  15. {
  16.   background(255,220,230);
  17.   noFill();
  18.   textSize(visualTextSize);
  19.   
  20.   translate(width/2,height/2);
  21.   scale(5);
  22.   translate(-width/2, -height/2);
  23.    
  24.   rect(width/2,height/2,textWidth(message),visualTextSize);
  25.   fill(255,0,0);
  26.   text(message,width/2,height/2);
  27. }
Unfortunately, when text is enlarged through scale(), even if it is stored at a high resolution, some rounding occurs in text placement (this is a  known bug  that I reported a couple of years ago):



This has been bugging me for a while now as I create lots of sketches with text that can be interactively zoomed.

Because I am not sufficiently familiar with the workings of the Processing source code to deal with the problem at source, I think I have a workaround. Whenever some scaled text needs to be displayed, temporarily reset the transformation matrix and display the text at a scale closer to its natural resolution. This is all done in the text2() method:
Copy code
  1. String message = "This is a simple line of text";
  2. float visualTextSize = 6;

  4. void setup()
  5. {
  6.   size(400,120);
  7.   smooth();
  8.   textAlign(CENTER,CENTER);
  9.   rectMode(CENTER);
  10.   textFont(createFont("Arial",30),30);
  11. }

  13. void draw()
  14. {
  15.   background(255,220,230);
  16.   noFill();
  17.   textSize(visualTextSize);
  18.   
  19.   translate(width/2,height/2);
  20.   scale(5);
  21.   translate(-width/2, -height/2);
  22.    
  23.   rect(width/2,height/2,textWidth(message),visualTextSize);
  24.   fill(255,0,0);
  25.   text2(message,width/2,height/2);
  26. }

  28. void text2(String textToDisplay, float xPos, float yPos)
  29. {
  30.    pushMatrix();
  31.    float matrixScale = g.getMatrix().get(null)[0];
  32.    PVector newTextPos = new PVector(0,0);
  33.    g.getMatrix().mult(new PVector(xPos,yPos),newTextPos);
  34.    resetMatrix();
  35.    
  36.    float origTextSize = g.textSize;
  37.    textSize(matrixScale*origTextSize);
  38.    text(textToDisplay,newTextPos.x,newTextPos.y);
  39.    textSize(origTextSize);
  40.    
  41.    popMatrix();
  42. }
It appears to give much better results and is about 3 times faster as a downscale-upscale transformation is avoided:



I don't like messing about with the 'g' object and this solution feels a bit hacky to me although it does appear to work. Are there any better ways of dealing with the text rounding problem?

Thanks,

Jo.

Statistics

  • 0 Replies
  • 704  Views
  • 0 Followers

Tags

No tags available for this topic.

Actions

Related Posts