Si cambio la variable de porcentaje a 0.5, dibuja una pequeña línea en el punto medio, así que asumo que solo llama a la función una vez. He intentado poner un bucle while alrededor de este bloque.
while(percentage < 0.99){ var mid = start.lerp(end, percentage); line(start.x, start.y, mid.x, mid.y); percentage += 0.00001; }Pero parece esperar para salir del ciclo while y luego dibujar la línea completa.
Aquí está el resto de la estructura del código.
function draw(){ a(); } function a(){ //do some math and calculate points animate_line(x, y, x2, y2); } var start; var end; var percentage = 0; function animate_line(x, y, x2, y2){ start = createVector(x, y); end = createVector(x2, y2); var mid = start.lerp(end, percentage); line(start.x, start.y, mid.x, mid.y); percentage += 0.00001; }ese es el codigo completo? Parece que te falta un fondo (entre algunos otros elementos para que esto funcione).
function draw(){ background(20) stroke(200) a(); } Pero creo que el principal problema aquí es que estás dibujando una línea desde el punto de partida hasta el mismo punto. Cuando haces mid = start.lerp(end, percentage); está modificando start y luego también haciendo que mid sea igual a start. Intenta usar la versión estática p5.Vector.lerp() así:
mid = p5.Vector.lerp(start,end,percentage)