Text seems jittery when moving in a circular pattern

[ottenm]

I’m struggling to get an ellipse-with-text moving around the screen smoothly. Is it just me or is the text jittering a lot more than the ellipse? It seems like the ellipse shake is minimal/tolerable, but the text shake is not.

Things do smooth out at faster speeds, but I need help decaffeinating the slower speeds.

Thanks for any help!

// right/left arrow keys speed/slow the animation
// other keys show just the text, just the ellipse, or both

void setup() {
  size(800, 600);
  smooth();
  textSize(64);
}

float degrees=0, change=0.05;
int show=3; // 1=ellipse, 2=text, 3=both

void draw() {
  background(225);
  pushMatrix();
  translate(width/2, height/2);

  fill(255);
  if (show != 2) // 2 == text only
    ellipse(cos(radians(degrees)) * 225, sin(radians(degrees)) * 225, 100, 100);

  fill(0);
  if (show != 1) // 1 == ellipse only
    text("OO", cos(radians(degrees)) * 225 - 50, sin(radians(degrees)) * 225 + 25);

  popMatrix();
  degrees = (degrees + change) % 360;
}

void keyPressed() {
  if (keyCode == RIGHT) // speed up
    change += 0.05;
  else if (keyCode == LEFT) // slow down
    change -= 0.05;
  else
    show = (show + 1) % 3; // change what's being shown
}

[glv]

Hello,

Some thoughts:

• Replace “OO” (eyes) with ellipses; I have not tried this to see if it resolves jitter.
• Replace “OO” (eyes) with ellipses and make a PShape that you can move together.
  https://processing.org/tutorials/pshape/
• Create a PGraphic with text on it that you can move together.
  https://processing.org/reference/PGraphics.html
• Use ceil(). See the late edition to list at bottom.

Hint:

pg.background(100, 0);    //Transparent background
pg.ellipse(50, 50, 80, 80);
pg.text("8", 50, 50-5);

A lot is missing from above! But it is the same as in draw so you can adapt that.

And it works:

Also, consider working directly with radians and use variables in your code:

  angle = angle + TAU/360;              //TAU = TWO_PI = 360 deg
  float x = cos(angle) * 225;
  float y = sin(angle) * 225;

https://processing.org/tutorials/trig/

You can look up the references for TAU and TWO_PI.

This helped:
text("OO", ceil(cos(radians(degrees)) * 225 - 50), ceil(sin(radians(degrees)) * 225 + 25));
https://processing.org/reference/ceil_.html

:)

[Chrisir]

Also try noSmooth();

[ottenm]

Thanks a million! Some great ideas, and tried everything I had time for. Did not find a solution, but scale()'d and slowed the sample sketch and passed the same values to ellipse() and to text() and could see very clearly the text would jerk once for every 5 or 6 mini bumps of the ellipse. Had a little luck changing out the renderer to P2D, but triggered a number of other issues in my app. So just living with it for now.

If helpful to anyone else, will try to recap. Sorry for the length.
Couldn’t replace “OO” with ellipses in my app, actually displaying a number of other short text strings (about 100 of them, 1-3 chars each).
Did create a transparent background png file, loaded it into a PImage and tried that, … just as bumpy as text(). ;(
Also tried ceil() which did smooth the sketch I posted, but not as much back in the rest of my app. It was also keeping the text just a hair off center.
Also tried radians directly with variables, both as plain floats and with rounding intermediate results to 1, 2, and 3, decimals. No luck. But this was the pass that sold me on the underlying problem. I dumped all the values into text and loaded it into Excel, a number of different times and ways. Not a single jerk/jump in any of the values being passed in or coming back out in the entire chain. Each call showed a smooth, incremental change. But played back slowly and zoomed in, you can see the text getting displayed in the same position repeatedly, even though the x,y values are changing (and noticeable in ellipse movement) and then 5 or 6 calls later, the text jerks to catch up with the ellipse.
No luck with noSmooth(), it just blurred the crisp edges and stayed jerkey.

Again, thanks a million for helping!

[glv]

Hello,

Thank you for your thorough investigation and response.

I am sharing the last version I worked on for anyone interested; I tried to rotate() and translate() along with directly plotting to compare and they are the same (can overlap these in code).

Visually it is nicer but they are still jittery upon close examination; the larger size and strokeWeight() seemed to help.

I added keyboard control to toggle the overlap and ceiling.

PGraphics pg;
float angle;
boolean overlap = false;
boolean ceiling = false;
float x, y;

void setup() 
  {
  size(800, 800, P2D);
  textSize(64);
  text("OO", 0, 0);
  
  makeImage();
  }

void draw() 
  {
  background(255);
  translate(width/2, height/2);
  fill(255);
  
  angle = angle + TAU/(5*360);              //TAU = TWO_PI = 360 deg

  push();
  rotate(angle);
  if (overlap) 
    translate(150, 0);       //Overlaps
  else
    translate(150, 150);     //Offset
  stroke(0);
  circle(0, 0, 150);
  fill(0);
  textAlign(CENTER);
  rotate(-angle);
  text("OO", 0, 0);
  pop();

  if(ceiling)
    {
    x = ceil(cos(angle) * 150f);
    y = ceil(sin(angle) * 150f);
    }
  else
    {
    x = (cos(angle) * 150f);
    y = (sin(angle) * 150f);  
    }
  
  circle(x, y, 150);
  fill(255, 0, 0);
  strokeWeight(3);
  stroke(255, 0, 0);
  textAlign(CENTER);
  text("OO", x, y);
  
  imageMode(CENTER);
  if (overlap) 
    image(pg, x-1, y-1);     //Overlaps
  else
    image(pg, x-1, y-1+150); //Offset
  }
  
void makeImage()
  {
  textSize(64);
  pg = createGraphics(160, 160);
  pg.beginDraw();
  pg.background(255, 0);
  pg.stroke(0, 255, 255);
  pg.strokeWeight(3);
  pg.circle(80, 80, 150);
  pg.fill(0, 255, 255);
  pg.textAlign(CENTER);
  pg.textSize(64);
  pg.text("OO", 80, 80);
  pg.endDraw();
  }
  
void keyPressed()
  {
  if (key == 'o') overlap = !overlap;
  if (key == 'c') ceiling = !ceiling;
  }

That was a fun distraction! I may revisit another time…

:)

[ottenm]

Wow! That’s impeccable glv, thank you so much! I can’t do P2D easily, but I will definitely integrate one of those approaches into my app. So smooth!

Any info/location on you/glv? You reign supreme! I hope people enjoy you!

[Chrisir]

Did you try noSmooth?

Did you try textMode?

[glv]

Thank you for the kind words. I have to work hard at it just like everyone else.

Your topic was a nice distraction for me and I have come across jitter and hiccups before.

This may be of interest to you:

FrameRate hiccups

I have experienced hiccups in my animations at the start of my animations and trying to understand why this happens. Is it Processing, Java or other? I have reduced it down to a simple example that displays frameRates below a threshold of 54 fps: float threshold = 54; // fps int y = 100; // spacing for text void setup() { size(700, 750, P3D); background(0); textSize(24); } void draw() { // background(0); float temp = frameRate; if (temp < threshold) { pr…

Stay well!

:)

[glv]

@ottenm

Any info/location on you/glv?

Oh Canada!

I will get around to updating my profile one day.

:)

[ottenm]

Top Drawer glv! Oh Canada like Joni Mitchell, Broken Social Scene, and Rush! That’s as good as it gets! I saw Rush front row, June 1, 1981 when they came to Denver, and BSS front row here in Austin, 3/23/18. Fantastic memories!

Thanks again for your help!

[rapatski]

Hey guys, another obvious thing but that I haven’t seen mentioned; the problem here as we now know is caused by subpixel rounding, which is helped by forcing it using the ceil() method – probably the most effective next step would be to make that error as small or hard to notice as possible by using the highest dpi/smoothing settings, which at least on high dpi displays will make the jitter barely noticeable:

void settings()
{
  size(800, 800);
  smooth(8);
  
  pixelDensity(displayDensity());
}