Text as object and meta drawing

The initial idea of the drawing was to perform some of the possibilities of a displayed text and a blending mode, using “millis” option. I wanted to combine a visual effect and movement into one particular shape and other hand explore possibilities of treating a text as an object and meta drawing, which at the same time serves to give instructions to observer, how to interact with the drawing itself .

Program

// The message to be displayed
String[] headlines = {
  "Trig the cursor to the left upper corner and press", 
  "Trig the cursor to the center of the circle and press", 
  "Trig the cursor to the left down corner "
};


float x;  // horizontal location of headline
int index = 0;

String message = "text path ";

PFont f;
// The radius of a circle
float r = 70;

void setup() {
  size(520, 520);
  x = width; 
  f = createFont("Calibri-Bold-48", 20, true);
  textFont(f);
  // The text must be centered!
  textAlign(CENTER);
  smooth();
}

void draw() {
  float m = millis();  
  background(255);
  // Start in the center and draw the circle
  translate(width / 2, height / 2);
  fill(m % 255);
  rect(mouseX, mouseY, 600, 100); 
  rect(-260, -260, 10, mouseY+10); 

  if (mousePressed == true) {
    fill(m % 255);
  }
  else {
    fill(#48EDBA, 20);
  }

  noStroke();
  translate(-40, 0);
  ellipse(0, 0, r*2, r*2);
  // We must keep track of our position along the curve
  float arclength = 0;

  // For every box
  for (int i = 0; i < message.length(); i++)
  {
    // Instead of a constant width, we check the width of each character.
    char currentChar = message.charAt(i);
    float w = textWidth(currentChar);

    // Each box is centered so we move half the width
    arclength += w/2;
    // Angle in radians is the arclength divided by the radius
    // Starting on the left side of the circle by adding PI
    float theta = PI + arclength / r;    

    pushMatrix();
    // Polar to cartesian coordinate conversion
    translate(r*cos(theta), r*sin(theta));
    // Rotate the box
    rotate(theta+PI/2); // rotation is offset by 90 degrees
    // Display the character
    fill(0);
    text(currentChar, 0, 10);
    popMatrix();
    // Move halfway again
    arclength += w;
  }

  textFont(f, 16);        
  textAlign(LEFT);
  text(headlines[index], x, 220); 
  // Decrement x
  x = x - 1;

  // If x is less than the negative width, then it is off the screen
  float w = textWidth (headlines[index]);
  if (x < -w) {
    x = width; 
    index = (index + 2) % headlines.length;
  }
}