Quiero animar una línea creciente basada en un conjunto de datos, quiero que la línea crezca cada vez que el programa encuentre DAE en una Fila de la tercera columna.
Aquí está mi código p5js aquí
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"); }El problema es que creo que hice todo bien, pero no obtengo ninguna animación, la línea simplemente aparece y el código continúa para siempre.
Necesito ayuda para averiguar cómo animar correctamente la línea de crecimiento.
El bucle draw() se ejecuta 60 veces por segundo, y en cada bucle tienes otro bucle que totaliza todos los valores.
Si desea animar, necesita usar un contador e incrementarlo en cada bucle draw(). La inicialización de counter y nbDAE debe estar en el exterior del ciclo draw().
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(); } }Había trabajado en su pregunta anterior: aquí en el editor web p5js
Y sobre su pregunta anterior, el problema del archivo csv: en francés, el separador es punto y coma (;) y no coma (,). Entonces, en la función loadTable(), la extensión debe ser 'ssv' y no 'csv' (valores separados por punto y coma)