Skip to content
Related Articles

Related Articles

p5.js Image getCurrentFrame() Method
  • Last Updated : 23 Sep, 2020

The getCurrentFrame() method of p5.Image in p5.js library is used to return the index of the currently shown frame of the GIF animation.

Syntax:

  getCurrentFrame()

Parameters: This function accept does not accept any parameter.

Return Value: This method returns a number that represents the current frame of the animation that is currently visible.

The following libraries are included in the “head” section of the HTML page while implementing the following examples.



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

Example 1: The example below illustrates the getCurrentFrame() method in p5.js libarary.

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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);
}

chevron_right


Output:

Example 2:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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);
}

chevron_right


Output:

Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5.Image/getCurrentFrame

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :