Text Scale animation

phoebus

Hi there

I've just franckencode, using code I found here, this sketch to see if I could get some nice subtle UI anim in processing but this anim is really not smooth

Is it possible to get a better animation ?

String message = "press spacebar";
float visualTextSize = 6;

//anim
int startTime;
int stopTime;
int duration = 2000;
float s = 4 ;
boolean ON;
boolean up;

void setup()
{
  size(400, 300);
  smooth();
  textAlign(CENTER, CENTER);
  rectMode(CENTER);
  textFont(createFont("Arial", 30), 30);
}

void draw()
{
  background(128, 128, 128);
  noFill();
  textSize(visualTextSize);

  autoBall();
  // println(s);

  translate(width/2, height/2);
  scale(s);
  translate(-width/2, -height/2);

  //rect(width/2,height/2,textWidth(message),visualTextSize);
  fill(255);

  text2(message, width/2, height/2);
}

void text2(String textToDisplay, float xPos, float yPos)
{
  pushMatrix();

  float matrixScale = g.getMatrix().get(null)[0];
  PVector newTextPos = new PVector(0, 0);
  g.getMatrix().mult(new PVector(xPos, yPos), newTextPos);
  resetMatrix();

  float origTextSize = g.textSize;
  textSize(matrixScale*origTextSize);
  text(textToDisplay, newTextPos.x, newTextPos.y);
  textSize(origTextSize);

  popMatrix();
}

void clock() {
  startTime = millis();
  stopTime = startTime + duration;
}


void  keyPressed() {
  if (keyCode == ' ' ) {
    ON = true ;
    clock();
  }
}

float autoBall() {

  if (ON) {

    if (up != true) {
      if  (millis () < stopTime) {
        s = map(millis(), startTime, stopTime, 4, 5);
      } else {
        up =true;
        clock();
      }
    }

    if (up) {
      if  (millis () < stopTime) {
        s = map(millis(), startTime, stopTime, 5, 4);
      } else {
        up =false;
        clock();
      }
    }
    return s;
  }
  return 111.0;
}

zaldibar

Hi phoebus! This seems like a lot of code for something so simple. I should think there is a better way.

I tried first to vary the size of the text, but like the poster you linked said - there are some serious rounding errors.

My next approach was to draw the text with a 3D renderer and then vary the Z dimension of the text.

int size = 100;

void setup() {
  size(400, 300, P3D);
  smooth();
  textAlign(CENTER, CENTER);
}

void draw() {
  background(0);
  textSize(size);
  text("tester", width/2, height/2, -size + size * sin(radians(frameCount*2)));
}

This gives a pretty smooth animation. You just have to make sure that the text size is big enough so that it doesn't get blurry when you zoom in.

phoebus

Thank you zaldibar

your sample looks great ! why doesn't it works in regular render or P2D ? the thing is I don't use P2D nor P3D because (please tell me if I'm wrong) I'm trying to make the most generic things possible and I've been stuck buy sophisticated renderers before (like you use some fancy stuff and then you cannot port your project, or you get stuck on this or that platform etc... For instance I don't want to use shaders, 1 because I think you can do an infinit number of cool stuff without them, and 2 because it my need this driver/platform/hardware/blablabla ) this get my post a little bit off topic from text scale... but what do you think ?

cheers

zaldibar

Basically, my sketch only works with a 3D renderer because I use the form of the text() method where the last argument is the Z coordinate of the text:

text("tester", width/2, height/2, -size + size * sin(radians(frameCount*2)));

In a 2D renderer, only the X (right/left) and Y (up/down) are considered. But in 3D space, the Z coordinate specifies depth, which gives the zoom effect that we want.

If you don't specify a renderer in the size() method, the default is Java2D. As far as compatibility, P2D and P3D use OpenGL which is pretty much platform independent. So porting shouldn't usually be a problem.