p5.js Retardo de imagen() Método

El método delay() de p5.Image en p5.js se usa para cambiar el retraso entre cada cuadro en una animación GIF. Este valor se puede configurar en milisegundos y un valor más alto significaría que el GIF mostraría su siguiente cuadro después de un tiempo más largo.

Se puede usar un segundo parámetro opcional para especificar el índice del cuadro que necesita tener el nuevo valor de retardo establecido. Todos los fotogramas obtendrían el nuevo valor de retardo si no se especifica nada.

Sintaxis:

resize( d, index )

Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación. 

• d: Es un número que especifica la cantidad de retraso entre cada fotograma en milisegundos.
• index: Es un número que especifica el índice del frame que se tiene que modificar. Es un parámetro opcional.

Los ejemplos a continuación ilustran el método delay() en p5.js:

Ejemplo 1:

function preload() {
    faster_gif = loadImage("sample-gif.gif");
    slower_gif = loadImage("sample-gif.gif");
}
  
function setup() {
    createCanvas(500, 300);
    textSize(20);
  
    text('Faster GIF', 20, 20);
    text('Slower GIF', 20, 180);
  
    // Speed up the GIF with a delay
    // of 10 milliseconds between
    // each frame
    faster_gif.delay(10);
  
    // Slow down the GIF with a delay
    // of 100 milliseconds between
    // each frame
    slower_gif.delay(100);
}
  
function draw() {
    image(faster_gif, 20, 40, 200, 100);
    image(slower_gif, 20, 200, 200, 100);
}

Producción:

Ejemplo 2:

function preload() {
    normal_gif = loadImage("sample-gif.gif");
    modified_gif = loadImage("sample-gif.gif");
}
  
function setup() {
    createCanvas(500, 300);
    textSize(20);
  
    text('Normal GIF', 20, 20);
    text('Modified GIF', 20, 180);
  
    // Modify the GIF with the delay
    // applied to the 100th frame
    modified_gif.delay(4000, 100);
}
  
function draw() {
    image(normal_gif, 20, 40, 200, 100);
    image(modified_gif, 20, 200, 200, 100);
}

Producción:

Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ referencia/#/p5.Imagen/retraso