Reversing direction of animated text on hitting screen extents not working

deano

Hi guys,

Am building a sketch where names are pulled from a text file and made to populate the screen. The names get animated randomly on the X-axis. When the names hit the left and right side extents they reverse their direction.

Now, am able to get this done effectively for the Right Hand Side (RHS) but it doesn't happen for the Left Hand Side (LHS). On RHS, the words go out and reverse their direction because I'm using if xPosition[i]>width, but on the LHS although I am subtracting the textWidth I am unable to get it to go off the screen completely. Am very confused as to what I am not doing correctly here. Any hints would be very much appreciated especially line numbers 73 and 74

String[] names;

//Declaring but not initializing

float [] sizeOfText ;
float [] widthOfText ; 
float [] xPosition ;
float [] yPosition ;
float [] xSpeed ;
float [] ySpeed ;
float [] colorText ;
int [] h ;
int [] s ;
int [] b ;


void setup() {
  size(800, 600);
  colorMode(HSB, 360,100,100); // keeping color mode to Hue-Saturation-Brightness

  names = loadStrings("names.txt"); //loading all names from the text file

  sizeOfText =  new float [names.length];
  widthOfText = new float [names.length];

  xPosition = new float [names.length];
  yPosition = new float [names.length];

  xSpeed = new float [names.length]; 
  ySpeed = new float [names.length];

  h = new int[names.length];
  s = new int[names.length];
  b = new int[names.length];

  //randomising initial positions and other parameters
  for (int i = 0; i < names.length; i++) {       

    h[i] = 47; // setting hue to a Yellow color
    s[i] = 100; // saturation remains constant
    b[i] = int(random(30,100)); //random brightness but within Yellow color

    sizeOfText[i] = random(20, 40); //random size of the text for all names

    widthOfText[i] = textWidth(names[i]); //accessing text widths of all the names

    xPosition[i] = random(0, width); //randomising all positions
    yPosition[i] = random(0, height);

    xSpeed[i] = random(-2, 2); //random speed variable

// not allowing xSpeed to go below 1 or -1 as this makes the text move very slow
    if (xSpeed[i]>0 && xSpeed[i]<1) {
      xSpeed[i] = 1;      
    }
    else if (xSpeed[i]>-1 && xSpeed[i]<0) {
      xSpeed[i] = -1;      
    }

    ySpeed[i] = 0; // no movement required on y-axis
  }
}

//moving text randomly from intial positions to any direction along X-axis
void draw() {
  background(0);

  for (int i = 0; i < names.length; ++i) {
    xPosition[i] += xSpeed[i];
    yPosition[i] += ySpeed[i];

// changing to the opposite direction if the text hits the boundaries of the screen
    if (xPosition[i]-widthOfText[i]< 0 || xPosition[i]>width ) {
    xSpeed[i] *= -1;    
    }

    //println("xPosition[i]: "+xPosition[i]);

    smooth();

    fill(h[i],s[i],b[i]); //randomizing the fills for all based on brightness set earlier

    textSize(sizeOfText[i]);

    //textAlign(LEFT); // Don't know if this is the issue or can fix it in some way??

    text(names[i], xPosition[i], yPosition[i]);

  }
}

GoToLoop

Online I've only got this vertical text() animation w/ textAlign(LEFT, CENTER);:
http://studio.ProcessingTogether.com/sp/pad/export/ro.9eHY5Fel1e0Jr/latest

Notice that textWidth() changes according to textSize().
Therefore it's useless to use the former before the latter! :-\"

deano

Thanks GoToLoop... does this mean that the entire sketch needs to be reworked in any way? Was trying to avoid creating a class, etc as you have done in your example on the other site.

I wanted to actually have the text move offscreen and then re-enter.

If i keep textAlign(LEFT) and change those lines of code to

//Added + sign... minus sign was an error actually    
if ((xPosition[i])+(widthOfText[i])< 0 || xPosition[i] >width) {
        xSpeed[i] *= -1;
        }

it works fine provided I remove all lines pertaining to textSize.

This means that.. YES you are right in saying that textWidth() doesn't go well with textSize() coz without textSize everything works perfect.

I'm still a newbie so understanding your code on the other site will take me some time. Let's see where I go with this. Will post if I can crack something. Thanks!

GoToLoop

YES you are right in saying that textWidth() doesn't go well with textSize()...

I didn't state that! I said: "Notice that textWidth() changes according to textSize().".

... coz without textSize() everything works perfect.

W/o textSize(), it's gonna use instead PFont's default.
The point is, if we change textSize(), we need to re-calculate textWidth().

https://processing.org/reference/createFont_.html

GoToLoop

Was trying to avoid creating a class, ...

A class is just a more streamlined way to encapsulate data properties and their related methods:
https://processing.org/reference/class.html

Since you already know how to do that via multiple arrays, it's worth reading how to translate that knowledge to the idea of a class:
http://forum.processing.org/two/discussion/8081/from-several-arrays-to-classes

deano

Thanks a ton GoToLoop... will research a bit more. In my tests.. am seeing that if all the text were of the same size, then everything works correctly in the calculations.

Will try and get a bit more into classes. Have started a few days ago but am not very confident as of now. Will go through the links you have suggested and will give it a shot. Thanks once again!