Jaggedy motion of text moving inside circle (PROCESSING)

Question

I have a circle with a text inside it. The circle is moving about, and the text is moving with it.

The circle moves smoothly, but the movement of the text is clearly jagged/laggy and in general unsmooth.

How can this be fixed?

    ellipse(position.x, position.y, radius*2, radius*2);
    fill(255);
    textSize(radius/3);
    textAlign(CENTER);
    text(mytext, position.x, position.y);

All variables here belong to the circle, such as its positions, radius, and the text inside of it.

The circle moves about since position.x, position.y changes slightly for every call, but the text movement is lagged.

I tried increasing FPS but that didn't solve the problem.

It works fine when the circle is moving straight up/down or left/right, but whenever it moves diagonally, the text movement becomes lagged. So I think that might be relevant in some way.

EDIT: For example, in this, the text inside the circle is laggy:

void setup()
{
  size(500, 500);


}

float x = 250, y = 250;


void draw()
{
  background(255);
  x += 0.1;
  y += 0.1;
  fill(120, 120, 120);
  ellipse(x, y, 50, 50);
  fill(0);
  text("hello", x, y);


}

There's nothing obvious in the code that I can see. Can you give me a (minimal) working example which I could run on my machine to see what you see? — laancelot

laancelot laancelot · Accepted Answer · 2020-01-11T19:32:36

Seems like processing isn't rounding both number the same way. You can manually round your numbers so this doesn't happens.

Here's the code snippet you can change to avoid the jagged movements manually. The important part is floor(), where I round the numbers myself to avoid letting processing deciding on my behalf:

void draw()
{
  background(255);
  x += 0.1;
  y += 0.1;
  fill(120, 120, 120);
  ellipse(floor(x), floor(y), 50, 50);
  fill(0);
  text("hello", floor(x), floor(y));
}

Have fun.

Jaggedy motion of text moving inside circle (PROCESSING)

2 Answers