Estoy tratando de animar las líneas pero no tengo idea de cómo proceder. El código que escribí hasta ahora es este.
function setup() { createCanvas(400, 400); textSize(8); } function temp(){ strokeWeight(5); point(150,108); point(56,75); point(121,185); strokeWeight(1); line(150,108,56,75); line(56,75,121,185); } function draw() { clear(); background(220); translate(35,60); temp(); }Lo que deseo es que la línea aparezca una por una de acuerdo con la secuencia en que se dibujan y cuando se dibujan, la pantalla se aclara y nuevamente, una por una, básicamente debería aparecer en secuencia. No estoy al tanto de cómo hacer esto.
GIF ===>https://thumbs.gfycat.com/SnoopyWildDuckbillcat.webp
El resultado que obtengo es este El resultado
Crear una lista de puntos:
var pointList = [[150, 108], [56, 75], [121, 185]] Establezca la velocidad de fotogramas con frameRate() :
frameRate(5); Dibuja las líneas entre un número de puntos en un bucle. El número de puntos a dibujar depende de frameCount . Utilice el operador módulo ( % ) para calcular el número de puntos (el operador % calcula el resto de una división:
function temp(){ var noOfPoints = frameCount % (pointList.length+1); strokeWeight(5); for (var i = 0; i < noOfPoints; i++) { point(...pointList[i]); } strokeWeight(1); for (var i = 0; i < noOfPoints-1; i++) { line(...pointList[i], ...pointList[i+1]); } }Ejemplo:
var pointList = [] function setup() { createCanvas(220, 220); frameRate(5); for (var i = 0; i <= 10; i++) { var angle = TWO_PI * i / 10; var radius = i % 2 == 0 ? 100 : 50; pointList.push([radius * sin(angle), radius * -cos(angle)]) } } function temp(){ var noOfPoints = frameCount % (pointList.length+1); strokeWeight(5); for (var i = 0; i < noOfPoints; i++) { point(...pointList[i]); } strokeWeight(1); for (var i = 0; i < noOfPoints-1; i++) { line(...pointList[i], ...pointList[i+1]); } } function draw() { clear(); background(220); translate(110, 110); temp(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>crear una matriz de objetos que tengan coordenadas y sepan cómo dibujarse. en la función de dibujo, puede iterar a través de la matriz, modificar las coordenadas de cada objeto de acuerdo con su lógica y llamar a su método de dibujo.
al tener la llamada al fondo en la función de dibujo, puede eliminar la llamada clara porque el fondo se dibujará sobre las líneas