# How to do this video?

**URL:** <https://discourse.processing.org/t/how-to-do-this-video/17019>\
**Category:** Coding Questions\
**Created:** [January 11, 2020, 9:58am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019 "2020-01-11T09:58:23Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![asa2332](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@asa2332](https://discourse.processing.org/u/asa2332)\
**Post date:** [January 11, 2020, 9:58am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/1 "2020-01-11T09:58:23Z")

</div>

1. 

[![](https://img.youtube.com/vi/jtQwP1OIkII/maxresdefault.jpg "The history of the fastest 3BLD means") ](https://www.youtube.com/watch?v=jtQwP1OIkII)

2.

[![](https://img.youtube.com/vi/id0pQWFmrkQ/maxresdefault.jpg "The history of the best WCA Multi-Blind results") ](https://www.youtube.com/watch?v=id0pQWFmrkQ)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 11, 2020, 10:32am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/2 "2020-01-11T10:32:06Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 11, 2020, 1:49pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/3 "2020-01-11T13:49:10Z")

</div>

Example

```auto

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

```

---

<div class="post-metadata">

**Author:** ![asa2332](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@asa2332](https://discourse.processing.org/u/asa2332)\
**Post date:** [January 19, 2020, 8:45am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/4 "2020-01-19T08:45:04Z")

</div>

date, animation of the bars over time

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 19, 2020, 9:00am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/5 "2020-01-19T09:00:38Z")

</div>

pls find a revolving schedule time  
[https://gitlab.com/snippets/1927129](https://gitlab.com/snippets/1927129) here

---

<div class="post-metadata">

**Author:** ![asa2332](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@asa2332](https://discourse.processing.org/u/asa2332)\
**Post date:** [January 19, 2020, 9:19am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/7 "2020-01-19T09:19:18Z")

</div>

animation of the bars plz

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 19, 2020, 10:44am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/8 "2020-01-19T10:44:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![asa2332](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@asa2332](https://discourse.processing.org/u/asa2332)\
**Post date:** [January 20, 2020, 10:17am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/9 "2020-01-20T10:17:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2020, 10:48am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/10 "2020-01-20T10:48:27Z")

</div>

😉

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;

---

<div class="post-metadata">

**Author:** ![asa2332](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@asa2332](https://discourse.processing.org/u/asa2332)\
**Post date:** [January 20, 2020, 11:01am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/11 "2020-01-20T11:01:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2020, 11:11am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/12 "2020-01-20T11:11:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![asa2332](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@asa2332](https://discourse.processing.org/u/asa2332)\
**Post date:** [January 20, 2020, 11:13am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/13 "2020-01-20T11:13:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2020, 11:17am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/14 "2020-01-20T11:17:15Z")

</div>

??

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

Don’t waste my time

---

<div class="post-metadata">

**Author:** ![asa2332](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@asa2332](https://discourse.processing.org/u/asa2332)\
**Post date:** [January 20, 2020, 11:26am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/15 "2020-01-20T11:26:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2020, 11:26am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/16 "2020-01-20T11:26:52Z")

</div>

> [@asa2332](#):
>
> targetX=x\_; targetY=y\_; startX=x\_; startY=height+33;

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)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2020, 11:28am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/17 "2020-01-20T11:28:05Z")

</div>

> [@asa2332](#):
>
> 6=x\_;  
> 7=y\_;

Delete this

I don’t know where this comes from

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2020, 11:30am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/18 "2020-01-20T11:30:32Z")

</div>

Read

[https://processing.org/tutorials/objects/](https://processing.org/tutorials/objects/)

---

<div class="post-metadata">

**Author:** ![asa2332](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@asa2332](https://discourse.processing.org/u/asa2332)\
**Post date:** [January 20, 2020, 11:55am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/19 "2020-01-20T11:55:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2020, 12:04pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/20 "2020-01-20T12:04:34Z")

</div>

> [@asa2332](#):
>
> targetX=500; targetY=77; startX=66; startY=height+33;

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 20, 2020, 12:21pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/21 "2020-01-20T12:21:46Z")

</div>

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

```auto
</> 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 )

* * *

[Next page](https://discourse.processing.org/t/how-to-do-this-video/17019.md?page=2)