Text seems jittery when moving in a circular pattern

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…

:)

1 Like