How to make lines of text move back and forth with sine movements?

8bit_coder

I'm basically trying to recreate the way the text moves at 1:42 in this video: youtube.com/watch?v=J-l4-QlV4Cs

I tried sine functions but everything would overlap, and it was really hard to get color into everything. I'm pretty experienced, but this is a hard one. If anyone can help me or give me some code, thank you.

Chrisir

step one: the word "Greetings"

but you probably mean the horizontal movement

Mover m;
PVector gravity = new PVector(0, 0.03);

void setup() {
  size(640, 360);
  m = new Mover();
}

void draw() {
  background(255);

  m.updateBall();
  m.edgeBounce();
  m.display();
}

// ================================================================

class Mover {

  PVector location;
  PVector velocity;
  PVector acceleration;

  float mass;

  //constr
  Mover() {
    location = new PVector(width-111, height-93);
    velocity = new PVector(0, 0);
    acceleration = new PVector(0, 0);

    mass = 5.0;
    stroke(0);
    strokeWeight(2);
    fill(127);
    noStroke(); 
    // noSmooth();
  } //constr

  void updateBall() {
    location.x-=1.5;

    acceleration=gravity.copy();
    velocity.add(acceleration);

    location.add(velocity);
    // Acceleration is the net forces applied to velocity each frame and should always be reset to 0.
    acceleration=new PVector(0, 0);
  }

  void edgeBounce() {
    if (location.y > height-2) {
      //  location.y = height-2;
      velocity.y = -1*abs(velocity.y);
    }
  }

  void display() {
    //   ellipse(location.x, location.y, 48, 48);
    textSize(271);
    text("Greetings", location.x, location.y);
  }
}//class
//

Chrisir

Step 2: Here is the horizontal back and forth movement

Mover m;
float angle; 

void setup() {
  size(640, 360);
  m = new Mover();
}

void draw() {
  background(255);

  m.updateBall();
  m.display();
}

// ================================================================

class Mover {

  PVector location;

  //constr
  Mover() {
    location = new PVector(width-111, height-193);
    stroke(0);
    strokeWeight(2);
    fill(127);
    noStroke();
  } //constr

  void updateBall() {
    location.x = 50 * sin (angle) +width/2;
    angle+=.2;
  }

  void display() {
    textSize(17);
    text("=======frequency========", location.x, location.y);
  }
}//class
//

8bit_coder

I tried both pieces of code and I have two questions now:

1. For the greetings one, how would I get it to loop after it's went off screen completely?

2. The second part with the text, I tried adding another piece of text to it and having location.y+25 and that did work fine, however they were both moving at the same time. I'm trying to get each one moving with a slight delay that the other.

Thanks for your help!

Chrisir

1.

It would be something like if(location.x<-100)location.x=width-100; in the method updateBall()

2.

ArrayList<Mover> movers = new ArrayList();

void setup() {
  size(640, 360);
  String[] words={"=======frequency========", "=======heaven========", "=======success========", 
    "=======frequency========", "=======heaven========", "=======success========", 
    "=======frequency========", "=======heaven========", "=======success========", 
    "=======frequency========", "=======heaven========", "=======success========", 
    "=======frequency========", "=======heaven========", "=======success========", 
    "=======frequency========", "=======heaven========", "=======success========"
  };
  for (int i=0; i<words.length; i++)
    movers.add(new Mover( words[i], 30+ i*30 ) );
}

void draw() {
  background(255);

  for (Mover m : movers) {
    m.updateBall();
    m.display();
  }
}

// ================================================================

class Mover {

  PVector location;

  float angle=random(0, 5*TWO_PI);
  float radius= random(40, 390);
  float angleSpeed = random (.01, .1);

  String text1;

  //constr
  Mover(String text_, float y_) {
    text1=text_;
    location = new PVector(width-111, y_);
    if (random(100)<50) {
      angleSpeed*=-1;
    }
    stroke(0);
    strokeWeight(2);
    fill(127);
    noStroke();
  } //constr

  void updateBall() {
    location.x = radius * sin (angle) +width/2;
    angle+=angleSpeed;
  }

  void display() {
    textSize(17);
    text(text1, location.x, location.y);
  }
}//class
//

8bit_coder

I tried the code, and I messed around with the values until I got something similar. I see that each piece of the string has a random value for strength going back and forth. One problem is that it's in the middle of the screen. I kept changing everything but I couldn't get it to start at another point. Another problem is that they are just moving with different forces. I'm trying to get it so that they move after each other with a delay. In the video, the pieces of text aren't moving at random strengths, they are moving in delay, synchronized with each other. I'm starting to think that this is impossible in Processing.

Thanks for the help so far though!

Chrisir

of course it's possible in processing

we just have to agree how it's working

Do you think the speed of each line of each pendulum/word is the same?

Do you think the radius is the same?

What do you think is the formula to bring the angle of sin in sync with previous line?

You can only program it if you know how it works.

new version with less random:

ArrayList<Mover> movers = new ArrayList();

void setup() {
  size(640, 360);
  String[] words={"=======frequency========", "=======heaven========", "=======success========", 
    "=======frequency========", "=======heaven========", "=======success========", 
    "=======frequency========", "=======heaven========", "=======success========", 
    "=======frequency========", "=======heaven========", "=======success========", 
    "=======frequency========", "=======heaven========", "=======success========", 
    "=======frequency========", "=======heaven========", "=======success========"
  };
  for (int i=0; i<words.length; i++)
    movers.add(new Mover( words[i], 30+ i*30, i*.1 ) );
}

void draw() {
  background(255);

  for (Mover m : movers) {
    m.updateBall();
    m.display();
  }
}

// ================================================================

class Mover {

  PVector location;

  // used in the sin formula :
  float locationX;
  float angle; // = random(0, 5*TWO_PI);
  float radius = 99; // random(40, 390);
  float angleSpeed = .2; // random (.01, .1);

  String text1;

  //constr
  Mover(String text_, float y_, float angle_) {
    text1=text_;
    location = new PVector(-1, y_);

    locationX=random(-100, width-55); 

    angle=angle_;

    //if (random(100)<50) {
    //  angleSpeed*=-1;
    //}
    stroke(0);
    strokeWeight(2);
    fill(127);
    noStroke();
  } //constr

  void updateBall() {
    location.x = radius * sin (angle) +locationX;
    angle+=angleSpeed;
  }

  void display() {
    textSize(17);
    text(text1, location.x, location.y);
  }
}//class
//