I want to animate a growing line based on a dataset, I want the line to grow each time the program finds DAE in a Row of the third column.
Here is my p5js code here
let data;
let font;
let direction;
let montant;
let annee;
function preload() {
data=loadTable('data/subvention.csv','csv','header',chargementOK,chargementERROR);
font = loadFont("data/opensans.ttf");
}
function setup() {
createCanvas(700, 700);
}
function draw() {
background(1);
let nbDAE=0;
for (let i = 0; i < data.getRowCount(); i++) {
direction = data.getString(i, "direction");
if (direction == "DAE") {
nbDAE++;
fill(255);
rect(350, 700- nbDAE*12, 20, 700);
}
}
}
function chargementOK(mesData){
print("chargement OK");
print(mesData);
}
function chargementERROR(){
print("BUGG");
}
The problem is I think I did everything right but I'm not getting any animation from it, the line just appears and code keeps on going forever.
I need some help to figure out how to properly animate the growing line.
The draw() loop is executed 60 times per second, and in each loop, you have another loop wich totalizes all the values.
If you want to animate, you need to use a counter and increment it each draw() loop. Initialization of counter and nbDAE should be at the exterior of the draw() loop.
function draw() {
background(0);
direction = data.getString(compteur, "direction");
if (direction == "DAE") {
nbDAE++;
}
fill(255);
rect(350, 700- nbDAE*12, 20, 700);
compteur += 1;
if (compteur >= data.getRowCount()) {
noLoop();
}
}
I had worked on your previous question : here on the p5js web editor
And on your previous question, the problem of csv file : In french, the separator is semicolon (;) and not comma (,). So, in the loadTable() function, the extension should be 'ssv' and not 'csv' (semicolon-separated values)