How to do this video?

Processing Coding Questions
22

here is the working sketch with animation (so far as we discussed it)


OneLine[] arrayLines;

String[] namesTemp= {
  "1", 
  "2", 
  "3", 
  "4", 
  "5", 
  "6", 
  "7", 
  "8", 
  "9", 
  "10"
};

// ---------------------------------------------------------------------------------

void setup() {
  size(1000, 600);

  arrayLines=new OneLine[namesTemp.length];

  int i=0;
  for (String s1 : namesTemp) {
    arrayLines[i] = new OneLine(30, i*26+30, 
      222, 22, 
      s1);
    i++;
  }
}

void draw() {
  background(0);

  for (OneLine line : arrayLines) {
    line.displayAndMove();
  }
}

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

class OneLine {

  float x, y, 
    w, h;

  String txt="";

  float startX, startY, 
    targetX, targetY;

  float t=0.0;

  OneLine(float x_, float y_, 
    float w_, float h_, 
    String txt_) {

    startX=random(22, width+200);  
    startY=height+random(30, 200);

    targetX=x_; 
    targetY=y_; 

    x=startX;
    y=startY;

    w=w_;
    h=h_;

    txt=txt_;
  }

  void displayAndMove() { 
    // display line
    fill(#15C71E);
    rect(x, y, 
      w, h, 
      7);

    noStroke();
    fill( 0 );
    text( txt, 
      x+9, y+15 );

    //move line 
    x=lerp(startX, targetX, t);
    y=lerp(startY, targetY, t);
    t += 0.01;
    if (t>1.0)
      t=1.0;
  }
  //
}//class
//
23

Thanks!

But can I ask you more?
How can I move this bar from side to side like that picture?

24

You still haven‘t done your own code.

When you have csv data you have to read this and advice the lines to move up and down accordingly.

You can start with one person in the array and use append to add new persons from the csv

Can’t you get a tutor in your mother tongue?

25

Sorry for not understanding it well.
I live in South Korea.
There is little information about processing in South Korea. There is no textbook.
So I’m talking to the English translator.

27

Can’t open this

Can you post the first lines here please?

Is this homework?

29

Anyway. You didn‘t post the data here.

There is a tutorial about data

What you can do: load data via loadStrings - see reference

Use split to parse each line

Feed data into my program above

Use a timer to move to the next date (3/6/19) or line after 1.5 seconds

Change the table by appending new names, sorting it (giving it new y positions in the high score rank) and then animate it

30

I see. I’ll try.
Thank you for being kind to me stupid.
Can I ask if you don’t know?

31

Sure you can ask!

I will help you

32

I’m stuck in the string
Moving the csv file to processing was successful, but I don’t know how to use it.

33

Show your entire code

Show me the first 10 lines of csv

34

No homework?

Why do you do it?

How old are you

35

I explained already String

loadStrings see reference

Then split - see reference

Then use the array- see tutorial array

Then tell the lines to move

36

image
image517×5567 691 KB

37
38

post your code please

39

OneLine[] arrayLines;

String[] namesTemp= {
“1”,
“2”,
“3”,
“4”,
“5”,
“6”,
“7”,
“8”,
“9”,
“10”
};

// ---------------------------------------------------------------------------------

void setup() {
size(1000, 600);

}
fill(255);
String s = “1”;
textSize(20);
text(s,1,2);

arrayLines=new OneLine[namesTemp.length];

int i=0;
for (String s1 : namesTemp) {
arrayLines[i] = new OneLine(130, i*36+200,
222, 30,
s1);
i++;
}
}

void draw() {
background(0);
for (OneLine line : arrayLines) {
line.displayAndMove();
}
}

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

class OneLine {

float x, y,
w, h;

String txt="";

float startX, startY,
targetX, targetY;

float t=0.0;

OneLine(float x_, float y_,
float w_, float h_,
String txt_) {

startX=random(22, width+200);  
startY=height+random(30, 200);

targetX=x_; 
targetY=y_; 

x=startX;
y=startY;

w=w_;
h=h_;

txt=txt_;

}

void displayAndMove() {
// display line
fill(#15C71E);
rect(x, y,
w, h,
0);

noStroke();
fill( 0 );
text( txt, 
  x+9, y+15 );

//move line 
x=lerp(startX, targetX, t);
y=lerp(startY, targetY, t);
t += .01;
if (t>1.0)
  t=1.0;

}
//
}//class
//

40

I don’t see where you use loadStrings or split or anything.

Please read the reference.

41

here is an example with String / csv but with longer animation


OneLine[] arrayLines;

String[] namesTemp= {
  "1", 
  "2", 
  "3", 
  "4", 
  "5", 
  "6", 
  "7", 
  "8", 
  "9", 
  "10"
};

// timer 
int timer; 
boolean firstTime=true; // first time in every cycle

// ---------------------------------------------------------------------------------

void setup() {
  size(1000, 600);

  arrayLines=new OneLine[namesTemp.length];

  int i=0;
  for (String s1 : namesTemp) {
    arrayLines[i] = new OneLine(30, i*26+30, 
      222, 22, 
      s1);
    i++;
  }
}

void draw() {
  background(0);

  // display 
  for (OneLine line : arrayLines) {
    line.displayAndMove();
  }

  //test if still an animation is running 
  fill(255);
  text("All come to halt:\n"+
    booleanToString (allStandStill()), 
    width-190, 19, 
    180, height);

  // start next step
  if (allStandStill()) {

    if (firstTime) {
      // start timer for this cycle 
      timer=millis();
      firstTime=false;
    }

    if (millis()-timer > 1300) {
      firstTime=true; // reset 

      // start animation again / shuffle 
      for (OneLine line : arrayLines) {
        line.change();
      }//for
    }//if
  }//if
}//func 

String booleanToString (boolean in_) {
  if (in_) 
    return "true";
  else return "false";
}//func 

boolean allStandStill() {
  for (OneLine line : arrayLines) {
    if (line.isAnimated)
      return false;
  }//for
  return true;
}//func 

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

class OneLine {

  float currentX, currentY, // current position in the animation 
    w, h;        // size 

  // its text 
  String txt="";

  // used for animation 
  float startX, startY, 
    targetX, targetY;

  // used for animation (amt in lerp)
  float amt=0.0;

  // random color 
  color colLine=color(random(0, 255), random(50, 255), random(50, 255));

  // shows if this line is currently running 
  boolean isAnimated=true; 

  // constructor
  OneLine(float targetX_, float targetY_, 
    float w_, float h_, 
    String txt_) {

    // used for animation 
    startX=random(-10, width+200);  
    startY=height+random(30, 200);

    // used for animation 
    targetX=targetX_; 
    targetY=targetY_; 

    // current position in the animation 
    currentX=startX;
    currentY=startY;

    w=w_;
    h=h_;

    txt=txt_;
  }// constructor

  void displayAndMove() { 
    // display line
    fill(colLine);  // rect 
    rect(currentX, currentY, 
      w, h, 
      7);

    noStroke();  // text 
    fill( 0 );
    text( txt, 
      currentX+9, currentY+15 );

    //move line 
    if (amt<1.0) {
      // current position in the animation 
      currentX=lerp(startX, targetX, amt);
      currentY=lerp(startY, targetY, amt);
      // increase t
      amt += 0.01;
      if (amt>1.0) {
        amt=1.0;
        isAnimated=false;
      }
    }//if
    else {
      amt=1.0;
      isAnimated=false;
    }//else
  }//method 
  //
  void change() {
    // reset and prepare next animation 
    isAnimated=true;
    amt=0; 

    // set values 
    startX=currentX; 
    targetX=startX; 

    int i=int(random(0, namesTemp.length));
    startY=currentY;
    targetY=i*26+30;

    currentX=startX;
    currentY=startY;
  }//method 
  //
}//class
//
42

Which command do use csv files for?

1 Like
43

???

I explained already String / csv

see above

  • loadStrings see reference

  • Then split - see reference

  • Then use the array - see tutorial array

  • Then tell the lines to move (in my sketch)