# 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:** 2
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 20, 2020, 1:12pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/22 "2020-01-20T13:12:49Z")
here is the working sketch with animation (so far as we discussed it)
```auto
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
//
```
---
### Author:  [@asa2332](https://discourse.processing.org/u/asa2332)
#### Post date: [January 21, 2020, 7:02am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/23 "2020-01-21T07:02:17Z")
Thanks!
But can I ask you more?
How can I move this bar from side to side like that picture?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 7:56am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/24 "2020-01-21T07:56:13Z")
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?
---
### Author:  [@asa2332](https://discourse.processing.org/u/asa2332)
#### Post date: [January 21, 2020, 7:59am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/25 "2020-01-21T07:59:04Z")
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.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 8:17am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/27 "2020-01-21T08:17:52Z")
Can’t open this
Can you post the first lines here please?
Is this homework?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 8:33am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/29 "2020-01-21T08:33:48Z")
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
---
### Author:  [@asa2332](https://discourse.processing.org/u/asa2332)
#### Post date: [January 21, 2020, 8:35am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/30 "2020-01-21T08:35:25Z")
I see. I’ll try.
Thank you for being kind to me stupid.
Can I ask if you don’t know?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 8:37am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/31 "2020-01-21T08:37:08Z")
Sure you can ask!
I will help you
---
### Author:  [@asa2332](https://discourse.processing.org/u/asa2332)
#### Post date: [January 21, 2020, 10:25am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/32 "2020-01-21T10:25:32Z")
I’m stuck in the string
Moving the csv file to processing was successful, but I don’t know how to use it.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 11:39am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/33 "2020-01-21T11:39:05Z")
Show your entire code
Show me the first 10 lines of csv
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 11:39am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/34 "2020-01-21T11:39:39Z")
No homework?
Why do you do it?
How old are you
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 11:43am UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/35 "2020-01-21T11:43:07Z")
I explained already String
loadStrings see reference
Then split - see reference
Then use the array- see tutorial array
Then tell the lines to move
---
### Author:  [@asa2332](https://discourse.processing.org/u/asa2332)
#### Post date: [January 21, 2020, 12:12pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/36 "2020-01-21T12:12:20Z")
---
### Author:  [@asa2332](https://discourse.processing.org/u/asa2332)
#### Post date: [January 21, 2020, 12:12pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/37 "2020-01-21T12:12:53Z")
> **[History of 3x3 single spreadsheet의 사본](https://docs.google.com/spreadsheets/d/13Z6gceL3uoCFxTnMhOvk_mCP63ZdOJciDdnj51ExaE0/edit#gid=130704613)**
>
> All top-10 solves
>
> ID,Name,Country,Result,Date,Competition,Rank at the time
> 1982THAI01,Minh Thai,USA,22.95,Jun 5, 1982,World Rubik's Cube Championship 1982,1
> 1982RAZO01,Guus Razoux Schultz,Netherlands,24.32,Jun 5, 1982,World Rubik's Cube Championship...
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 12:51pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/38 "2020-01-21T12:51:21Z")
post your code please
---
### Author:  [@asa2332](https://discourse.processing.org/u/asa2332)
#### Post date: [January 21, 2020, 12:52pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/39 "2020-01-21T12:52:35Z")
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
//
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 12:57pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/40 "2020-01-21T12:57:13Z")
> [@asa2332](#):
>
> I’m stuck in the string
> Moving the csv file to processing was successful, but I don’t know how to use it.
I don’t see where you use loadStrings or split or anything.
Please read the reference.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 12:58pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/41 "2020-01-21T12:58:16Z")
here is an example with String / csv but with longer animation
```auto
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
//
```
---
### Author:  [@asa2332](https://discourse.processing.org/u/asa2332)
#### Post date: [January 21, 2020, 1:12pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/42 "2020-01-21T13:12:45Z")
Which command do use csv files for?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 21, 2020, 1:20pm UTC](https://discourse.processing.org/t/how-to-do-this-video/17019/43 "2020-01-21T13:20:17Z")
???
**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)
[Previous page](https://discourse.processing.org/t/how-to-do-this-video/17019.md?page=1)