Processing - lines get bigger progressively - time

Question

so I have in a file the coordinates and the seconds I want to make a line get bigger progressively. In the file, I have x1, x2 (regarding the first point coordinates), x2, y2 (2nd point coordinates), and the time (in seconds) I want to start growing the line, in the second point direction.
This is my code:
//TO READ LINES
import processing.video.*;
Movie myMovie;
Table table;
float duration, time;
int row_no=1;
int clickcount = 0;
void setup() {
size(640,480);
myMovie = new Movie(this, "draft.mov");
myMovie.loop();
table = loadTable("data/new.csv");
}
void draw() {
duration = myMovie.duration();
time = myMovie.time();
image(myMovie, 0, 0);
if(time>= table.getFloat(row_no, 4)){
strokeWeight(15);
stroke(255,14,255);
float a = table.getFloat(row_no, 0);
float b = table.getFloat(row_no,1);
line(table.getFloat(row_no,0),table.getFloat(row_no, 1), a, b);
a = a + 2;
b = b + 2;
}
}
// Called every time a new frame is available to read
void movieEvent(Movie m) {
m.read();
} `

Answer 1

As Niccolo advises, break your problem down first, take out anything you don't need and go one step at a time.
In terms or taking stuff out, based on the description of your goals, it doesn't sound like code has anything to do with playing back a movie, so take that code out to simplify. (The only reason I could think of for using a movie is to use it's current time to control the lines, but unless you want a movie background you shouldn't need that)
In the draw() loop there are a few things that look odd:
if(time>= table.getFloat(row_no, 4)){ assuming the 5th column in the .csv file holds the cue time for the current row in seconds, this condition will trigger only once potentially as there's nothing incrementing row_no
line(table.getFloat(row_no,0),table.getFloat(row_no, 1), a, b); isn't probably what you're after and might be a typo because a and b have retrieved from the same .csv columns (0 and 1), which means you're line's start and end position are in the exact position (therefore not rendering a line). perhaps you meant line(table.getFloat(row_no,2),table.getFloat(row_no, 3), a, b); ?
a = a + 2; and b = b + 2;: the x,y positions for one of the points may be offset by 2, but the new positions are never used past this point. In the next draw() iteration a and b are redefined, and therefore the offset is lost.
Let's go through breaking the problem down:
I have in a file the coordinates and the seconds I want to make a line get bigger progressively. In the file, I have x1, x2 (regarding the first point coordinates), x2, y2 (2nd point coordinates), and the time (in seconds) I want to start growing the line, in the second point direction.
load and parse the data (rows containing line coordinates (x1,y1,x2,y2) and time(in seconds))
"make a line get bigger progressively" - animate (interpolate) between the current line (.csv row coordinates) and the next line based on the specified time in seconds)
and even further, if starting from scratch, more as a "how to":
interpolate between one value an another (ignoring time for now, keeping task independent and as simple as possible)
keep track of time as a parameter for interpolating between values
parsing .csv rows
interpolating between 4 four values
incrementing .csv rows based on animation time
Luckily, Processing provides a built-in function for linearly interpolating between values lerp()(lerp = linear interpolation for short).
It takes three parameters:
a value to animate from (start)
a value to animate to (stop)
an interpolation amount (between 0.0 and 1.0)
and it returns one value: the value in between the start and stop values.
Think of the interpolation amount as a percentage (0 = 0%, 0.5 = 50%, 1.0 = 100%).
Here's a basic sketch to illustrate the concept:
void draw(){
background(255);
//map time to an interpolation normalized value
float t = map(mouseX,0,width,0.0,1.0);
//interpolate the values
float size = lerp(10,90,constrain(t,0.0,1.0));
ellipse(50,50,size,size);
}
the snippet a p5.js demo you can run bellow:
function setup() {
createCanvas(100,100);
}
function draw(){
background(255);
//map time to an interpolation normalized value
var t = map(mouseX,0,width,0.0,1.0);
//interpolate the values
var size = lerp(10,90,constrain(t,0.0,1.0));
ellipse(50,50,size,size);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
if you move your mouse on the x axis you'll notice the size goes between 10 and 90 pixels in diameter based on the mouse position.
Step 1 done!
Next up, you can use millis() to keep track of time and simply map() between time in millis (mapping the current time between the start and end time to the 0.0 - 1.0 range):
float seconds = 3.5;
//the time in millis since the last update
int previousMillis;
//the current time in millis
int currentMillis;
//the time in millis until the next event
int nextMillis;
void setup(){
previousMillis = millis();
currentMillis = millis();
nextMillis = currentMillis + (int)(seconds * 1000);
}
void draw(){
background(255);
//update the current timer continously
currentMillis = millis();
//map the current time from the previous to the next time as a normalized value (0,0 to 1.0) range
float t = map(currentMillis,previousMillis,nextMillis,0.0,1.0);
//interpolate the values
float size = lerp(10,90,constrain(t,0.0,1.0));
ellipse(50,50,size,size);
}
and as a p5.js runnable demo:
var seconds = 3.5;
//the time in millis since the last update
var previousMillis;
//the current time in millis
var currentMillis;
//the time in millis until the next event
var nextMillis;
function setup(){
previousMillis = millis();
currentMillis = millis();
nextMillis = currentMillis + (int)(seconds * 1000);
}
function draw(){
background(255);
//update the current timer continously
currentMillis = millis();
//map the current time from the previous to the next time as a normalized value (0,0 to 1.0) range
var t = map(currentMillis,previousMillis,nextMillis,0.0,1.0);
//interpolate the values
var size = lerp(10,90,constrain(t,0.0,1.0));
ellipse(50,50,size,size);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
That's step2 done and it looks like you've got a hand of step 3 (parsing the .csv values) already :)
Step 4 should be trivial once you understand how to interpolate one value: just do it 4 times for different variables!
Step 5 is simple as you simply need to check if row_no goes beyond the table's row count.
row_no = row_no + 1;
if(row_no > table.getRowCount()) row_no = 0;
One neat thing you could do is use the modulo operator(%) to do the same as a mathematical expression:
row_no = (row_no + 1) % table.getRowCount();
In conclusion, let's assume you're .csv file looks a little like this:
x1,y1,x2,y2,seconds
5,5,95,5,4
95,5,95,95,3
95,95,5,95,2
5,95,5,5,1
One way to put it all together would be something like this:
Table table;
int row_no = 0;
//the time in millis since the last update
int previousMillis;
//the current time in millis
int currentMillis;
//the time in millis until the next event
int nextMillis;
//where to animate the line from
float x1Start,y1Start,x2Start,y2Start;
//where to animate the line to
float x1Stop,y1Stop,x2Stop,y2Stop;
//currently interpolated line positions
float x1Lerp,y1Lerp,x2Lerp,y2Lerp;
void setup(){
size(100,100);
strokeWeight(3);
fill(0);
table = loadTable("data/new.csv","header, csv");
//printing the table in console, handy just for debugging/double checking values
println("data");
for(int i = 0 ; i <= table.getRowCount(); i++){
print(table.getColumnTitle(i)+"\t");
}
println();
for(int i = 0 ; i < table.getRowCount(); i++){
TableRow row = table.getRow(i);
for(int j = 0; j < row.getColumnCount(); j++){
print(row.getFloat(j) + "\t");
}
println();
}
//fetch lines and seconds from the current and next rows
updateFromRow();
}
void updateFromRow(){
//update times
previousMillis = millis();
currentMillis = millis();
//get the current row and it's line coordinates
TableRow currentRow = table.getRow(row_no);
x1Start = currentRow.getFloat("x1");
y1Start = currentRow.getFloat("y1");
x2Start = currentRow.getFloat("x2");
y2Start = currentRow.getFloat("y2");
//get the next row and it's line coordinates - notice % module is used to easily loop back to 0 once row_no goes beyond the number of table rows
TableRow nextRow = table.getRow((row_no + 1) % table.getRowCount());
x1Stop = nextRow.getFloat("x1");
y1Stop = nextRow.getFloat("y1");
x2Stop = nextRow.getFloat("x2");
y2Stop = nextRow.getFloat("y2");
//get the duration in seconds, convert it to millis( * 1000) and add it to the current millis
nextMillis = currentMillis + (int)(currentRow.getFloat("seconds") * 1000);
println("updated from row: " + row_no);
}
void draw(){
background(255);
//update the current timer continously
currentMillis = millis();
//map the current time from the previous to the next time as a normalized value (0,0 to 1.0) range
float t = map(currentMillis,previousMillis,nextMillis,0.0,1.0);
//if the current interpolation value is above 1.0
if(t > 1.0){
t = 0;
//increment the row
row_no++;
//if the current row counter is above the total number of rows, reset back 0
if(row_no >= table.getRowCount()){
row_no = 0;
}
//update values from incremented row (lines and their coordinates + time)
updateFromRow();
}
text("t:"+t,15,20);
//constrain interpolated value between 0.0 and 1.0
float interpolationAmount = constrain(t,0.0,1.0);
//linearly interpolate (lerp) between the current and next line coordinates
x1Lerp = lerp(x1Start,x1Stop,interpolationAmount);
y1Lerp = lerp(y1Start,y1Stop,interpolationAmount);
x2Lerp = lerp(x2Start,x2Stop,interpolationAmount);
y2Lerp = lerp(y2Start,y2Stop,interpolationAmount);
//finally, render the interpolated line
line(x1Lerp,y1Lerp,x2Lerp,y2Lerp);
}
In terms of keeping track of the data, the line coordinates can be stored using PVector instances (...the x,y components set() from .csv data and the line points can be interpolated in pairs via PVector's lerp()).
So far we've only been using linear interpolation, but you might also want to look into easing and tweening.