Ellipse and text scaling issue

Programming Questions

ollieglass

Ellipse and text scaling issue

in Programming Questions • 3 years ago

I have a sketch that shows a moving circle (ellipse) with text over it.

When I increase the scale factor, the text jitters around as it moves. All of the positions are specified with floats, it looks as thought the text position is being cast to integers. Any thoughts on what's going on, and how to fix this?

If use the OpenGL renderer, the text movement is fine, but as I increase the scaling I can see straight edges on the circle. This doesn't happen at all with the default Java2D renderer. Any thoughts on this?

Finally, the text doesn't appear at all with the P2D renderer. Am I missing something, or is this a known bug?

Thanks,

Ollie

Edit: The default renderer is Java2D, not P2D. Updated text

import processing.core.PApplet;

public class RenderingDemo extends PApplet {

float x, y, dx = 0.1f;

float scale = 1;

public void setup() {

size(1200, 600); // , OPENGL); // try P2D and OPENGL to see the issues

smooth();

noStroke();

textFont(createFont("verdana", 12));

textMode(SHAPE);

ellipseMode(CENTER);

}

public void draw() {

background(200);

float tx = width / 2;

float ty = height / 2;

translate(tx, ty);

scale(scale);

fill(127);

ellipse(x, y, 50, 50);

fill(0);

text("text", x, y);

x += dx;

if (x > 100)

dx = -0.1f;

else if (x < -100)

dx = 0.1f;

println(x);

}

public void keyPressed() {

if (key == 'q')

scale += 0.1;

if (key == 'w')

scale -= 0.1;

}

}

Replies(4)

cedrickie..

Re: Ellipse and text scaling issue

3 years ago

pushMatrix();
translate(x,y);
text("text", 0, 0);
popMatrix();

works better

ollieglass

Re: Re: Ellipse and text scaling issue

3 years ago

It is much better, but there's still a little jitter, and a little is all it takes to be very distracting. Any idea how to make it rock solid?

mbraendle

Re: Ellipse and text scaling issue

3 years ago

Interesting test.

The problem seems to lie in your subpixel steps (dx = 0.1f in the beginning) and the text renderer, which tries to match the text either to integer pixels (not fractions of pixels) or uses some antialiasing (which seems to run more predictable if one places the text at 0,0) resulting in the jitter of the individual characters.

Using a larger size in createFont() and scaling down the font with textSize() did not help either.

BTW, you can also put ellipse() inbetween pushMatrix()/popMatrix, but then use ellipse(0,0,50,50).

Might plotting the ellipse and the text to an image buffer, and then shifting image buffer around be a workaround? At least then it is sure that the same antialiasing is applied to the whole.

ollieglass

Re: Re: Ellipse and text scaling issue

3 years ago

Thanks, that's an interesting workaround. It stops the jitter on the text, it and the ellipse are rock solid, but introduces different issues.

With the JAVA2D and P2D renderers, the image moves in single pixel steps. I guess translate rounds the floats up to ints in these modes.

The image moves smoothly with the OPENGL renderer, but the scaling is very slow. This introduces shearing when scaling, hold down 'q' to see this.

I tried the P3D renderer, which performs as well as JAVA2D and P2D, and has with sub-pixel translation. It introduces a different issue though, a line appears across the ellipse.

These are all my subjective experiences of performance, yours may vary but I'm running this test on a high end Mac.

I've included my code. It's adjusted to run in Processing (was previously running in Eclipse). The size of the buffer needs to be as large as the screen (should also include the range of the movement) or the image gets cropped.

Ollie

Edit: actually you can remove the lines in P3D by taking out the smooth() call in line 12. It's a known bug which is listed here: internal lines of shapes are visible with smooth() and P3D or OPENGL.

import processing.opengl.*;
PGraphics buffer;
float x, y, dx = 0.1f;
float scale = 1;
void setup() {
size(1200, 600); // try P2D and OPENGL to see the issues
buffer = createGraphics(width, height, JAVA2D);
smooth();
noStroke();
textFont(createFont("verdana", 12, true));
// textMode(SHAPE);
ellipseMode(CENTER);
}
void draw() {
background(200);
float tx = width / 2;
float ty = height / 2;
translate(tx, ty);
// translate and draw
pushMatrix();
translate(x, y);
PImage img = createEllipseImage();
image(img, -img.width/2, -img.height/2);
popMatrix();
// move ellipse
x += dx;
if (x > 100)
dx = -0.1f;
else if (x < -100)
dx = 0.1f;
println(x);
}
PImage createEllipseImage() {
buffer.beginDraw();
buffer.noStroke();
buffer.smooth();
buffer.translate(buffer.width/2, buffer.height/2);
buffer.scale(scale);
buffer.fill(127);
buffer.ellipse(0, 0, 50, 50);
buffer.fill(0);
buffer.text("text", 0, 0);
buffer.endDraw();
return buffer;
}
public void keyPressed() {
if (key == 'q')
scale += 0.1;
if (key == 'w')
scale -= 0.1;
}

Top Reply