p5.js Imagen getCurrentFrame() Método

El método getCurrentFrame() de p5.Image en la biblioteca p5.js se usa para devolver el índice del cuadro que se muestra actualmente de la animación GIF.

Sintaxis:

  getCurrentFrame()

Parámetros: Esta función accept no acepta ningún parámetro.

Valor devuelto: este método devuelve un número que representa el cuadro actual de la animación que está visible actualmente.

Las siguientes bibliotecas se incluyen en la sección «head» de la página HTML al implementar los siguientes ejemplos.

<script src=”p5.Image.js”></script> 
<script src=”p5.min.js”></script>

 

Ejemplo 1: El siguiente ejemplo ilustra el método getCurrentFrame() en la biblioteca p5.js.

function setup() {
  example_gif =
    loadImage("sample-gif.gif");
 
  createCanvas(500, 300);
  textSize(18);
 
  incSpeedBtn =
    createButton("Increase GIF Speed");
  incSpeedBtn.position(30, 240);
  incSpeedBtn.mousePressed(() => {
 
      // Decrease the delay between frames
      example_gif.delay(25);
  })
 
  decSpeedBtn =
    createButton("Decrease GIF Speed");
  decSpeedBtn.position(200, 240);
  decSpeedBtn.mousePressed(() =>
 {
      // Increase the delay between frames
      example_gif.delay(150);
  })
}
 
function draw()
{
  clear();
 
  text("The current frame is shown " +
       "using getCurrentFrame()", 20, 20);
        
  // Draw the GIF on screen
  image(example_gif, 20, 40, 260, 140);
 
  // Get the current frame
  let currFrame =
      example_gif.getCurrentFrame();
 
  text("The current frame is: " +
       currFrame, 20, 200);
}

Producción:

Ejemplo 2:

function preload() {
  example_gif =
    loadImage("sample-gif.gif");
}
 
function setup() {
  createCanvas(500, 300);
  textSize(18);
 
  text("Click on the button to get " +
       "the current frame", 20, 20);
 
  frameBtn =
    createButton("Get current frame");
  frameBtn.position(30, 40);
  frameBtn.mousePressed(getFrame);
}
 
function draw() {
  // Draw the GIF on screen
  image(example_gif, 20, 60, 240, 120);
}
 
function getFrame()
{
  clear();
 
  // Get the current frame
  let currFrame =
      example_gif.getCurrentFrame();
 
  text("The current frame is: " +
       currFrame, 20, 200);
 
  text("Click on the button to get " +
       "the current frame", 20, 20);
}

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/getCurrentFrame