How to do this video?


2.

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

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 
//

date, animation of the bars over time

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

animation of the bars plz

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

1 Like

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

:wink:

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;

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

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

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
//

??

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

Don’t waste my time

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
//

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)

Delete this

I don’t know where this comes from

Read

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

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
//

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!!

1 Like

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 )