How to do this video?

asa2332 · January 11, 2020, 9:58am

2.

Chrisir · January 11, 2020, 10:32am

You don’t provide enough information.

Do you want to show the flags? The names?
Just the bars or the animation of the bars over time?

The 1st video shows a high score that changes over time.

Do you have a text file (csv) with those data?

It could look like this:

date1;name1;score1;name2;score2;...
date1;name1;score1;name2;score2;...

without the data you can’t do anything. They could also be JSON or whatever.

I would skip the animation of the bars itself and first just animate going from day to day

Chrisir · January 11, 2020, 1:49pm

Example


OneLine[] arrayLines;

String[] namesTemp= {
  "Norman Weasley", 
  "Norman Hale", 
  "Anna Weasley", 
  "N. W.", 
  "Norman We", 
  "Nolan Spo"
};

void setup() {
  size(600, 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.display();
  }
}

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

class OneLine {

  float x, y, 
    w, h;
  String txt="";

  OneLine(float x_, float y_, 
    float w_, float h_, 
    String txt_) {
    x=x_;
    y=y_;

    w=w_;
    h=h_;

    txt=txt_;
  }

  void display() {
    fill(#F5C71E);
    rect(x, y, 
      w, h, 
      7);

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

asa2332 · January 19, 2020, 8:45am

date, animation of the bars over time

kll · January 19, 2020, 9:00am

pls find a revolving schedule time
https://gitlab.com/snippets/1927129 here

asa2332 · January 19, 2020, 9:19am

animation of the bars plz

Chrisir · January 19, 2020, 10:44am

Show your entire code

You have to do it yourself

Then ask specific questions

You can work from my code

Each line-rectangle needs a start pos and a target position and a current position it is displayed at. The latter you should find out with lerp() command - see reference.

And load and use the data you have

Good Luck!

Chrisir

asa2332 · January 20, 2020, 10:17am

I’m Really sorry
I don’t understand for lerp command.
can you example to animation of bar graph made with lerp command?

Chrisir · January 20, 2020, 10:48am

Sure, just implement the following lines into the display method of my class above (and make additional changes accordingly)

x=lerp(startX, targetX, t);
y=lerp(startY, targetY, t);
t+=.01;

t must be inside class: float t;

The other 4 new variables must also be inside class; give them start values in the constructor :
Eg. targetX=x_; targetY=y_; startX=x_; startY=height+33;

asa2332 · January 20, 2020, 11:01am

AH… Really Really Sorry
Didn’t work it…
Please Full Code for that lerp command
(sorry for bad english)

Chrisir · January 20, 2020, 11:11am

I don’t really feel you are working on this

Show your attempt: entire code and maybe I will have a look

Did you look at the first three text tutorials and the tutorial about objects? You should because I use a class here : https://processing.org/tutorials/objects/

You never answered my question about your csv data file. You have to implement that later; also you need a way to tell each Line-Rect to change its position in the high score

asa2332 · January 20, 2020, 11:13am

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(80, i*40+180, 
  400, 30, 
  s1);
i++;

}
}

void draw() {
background(0);

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

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

class OneLine {

float x, y,
w, h;
String txt="";

OneLine(float x_, float y_,
float w_, float h_,
String txt_) {
x=100;
y=70;

w=w_;
h=h_;

txt=txt_;

}

void display() {
fill(#F5C71E);
rect(x, y,
w, h,
7);

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

}
//
}//class
//

Chrisir · January 20, 2020, 11:17am

??

You forgot to implement the new lines with lerp()?

Don’t waste my time

asa2332 · January 20, 2020, 11:26am

I dont Know

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(80, i*40+180, 
  400, 30, 
  s1);
i++;

}
}

void draw() {
background(0);
targetX=x_; targetY=y_; startX=x_; startY=height+33;

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

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

class OneLine {

float x, y,
w, h;
String txt="";

OneLine(float x_, float y_,
float w_, float h_,
String txt_) {
6=x_;
7=y_;

w=w_;
h=h_;


txt=txt_;

}

void display() {
fill(#F5C71E);
rect(x, y,
w, h,
7);

noStroke();
fill( 0 );
x=lerp(startX, targetX, t);
y=lerp(startY, targetY, t);
t+=.01;
text( txt, 
  x+9, y+15 );

}
//
}//class
//

Chrisir · January 20, 2020, 11:26am

This belongs into the constructor of the class

You placed the lines in the display method but where you placed it inside the method is not very sensible

Also you need to declare the 4 new variables like I did with x,y at the start of the class (before the constructor)

Chrisir · January 20, 2020, 11:28am

Delete this

I don’t know where this comes from

Chrisir · January 20, 2020, 11:30am

Read

https://processing.org/tutorials/objects/

asa2332 · January 20, 2020, 11:55am

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.display();
}
}

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

class OneLine {
float targetX, targetY, startX, startY;

float x, y,
w, h;
String txt="";

OneLine(float x_, float y_,
float w_, float h_,
String txt_) {
x=x_;
y=y_;

w=w_;
h=h_;

txt=txt_;

}

void display() {
targetX=500; targetY=77; startX=66; startY=height+33;
float t;
x=lerp(90, 500, 1);
y=lerp(77, 77, 0.01);

fill(#15C71E);
rect(x, y, 
  w, h, 
  0);




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

}
//
}//class
//

Chrisir · January 20, 2020, 12:04pm

3rd time : this belongs in the constructor of the class. Also you changed it!!! Why???
It’s targetX=x_; targetY=y_; startX=x_; startY=height+33;

Read the tutorial to learn what a constructor is

float t; belongs at the start of the class where x,y is declared

You destroyed the lerp lines!!! Why?

Be confident!!

kll · January 20, 2020, 12:21pm

please format your code posting here at forum
( topic editor )
by pasting it into the

</> code button

of the editor header menu ( context name: Preformatted text )
it looks like
```
type or paste code here
```

also can use the ``` manually above and below your code.
or select the already pasted “code” and use [ctrl][shift][c]

thank you.

also we recommend that the code from processing IDE ( PDE )
is formatted there first, like with /Edit/Auto Format/ or [ctrl][t]

now we need you to REPAIR your above CODE POSTING,
not make a new / better post.
( just think about the hundred people opening your topic in the future )

Topic		Replies	Views
Bar chart - Display data when hovering Coding Questions homework	12	413	June 16, 2022
Help with text and video Coding Questions	15	1834	July 30, 2018
Creating animations from tabulated string data Coding Questions	3	555	October 13, 2018
Need help with creating a quiz Coding Questions homework	6	386	February 5, 2019
How do I save a HIGHSCORE Coding Questions	2	289	April 12, 2019

How to do this video?

Related topics