The setFrame() method of p5.Image in p5.js library is used to set the index of the currently visible frame of the GIF animation.
Syntax:
setFrame( index )
Parameters: This function accepts a single parameter as mentioned above and described below.
- index: It is a number that denotes the index of the frame to be displayed.
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 examples below illustrates the setFrame() method in p5.js library.
function preload() {
example_gif =
loadImage( "sample-gif.gif" );
} function setup() {
createCanvas(500, 300);
textSize(18);
example_gif.pause();
decFrameBtn =
createButton( "Skip Backward 10 Frames" );
decFrameBtn.position(30, 240);
decFrameBtn.mousePressed(skipBackward);
incFrameBtn =
createButton( "Skip Forward 10 Frames" );
incFrameBtn.position(220, 240);
incFrameBtn.mousePressed(skipForward);
} function draw() {
clear();
text( "Skip frames forward or backward " +
"by pressing the buttons" , 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);
} function skipForward() {
// Get the current playing frame of the GIF
let currFrame =
example_gif.getCurrentFrame();
// Move forward only if possible
if (currFrame <
example_gif.numFrames() - 10) {
// Add 10 to skip forward
let newFrame = currFrame + 10;
example_gif.setFrame(newFrame);
}
} function skipBackward() {
// Get the current playing frame of the GIF
let currFrame =
example_gif.getCurrentFrame();
// Move forward only if possible
if (currFrame > 10) {
// Subtract 10 to skip forward
let newFrame = currFrame - 10;
example_gif.setFrame(newFrame);
}
} |
Output:
Example 2:
function preload() {
example_gif =
loadImage( "sample-gif.gif" );
} function setup() {
createCanvas(500, 300);
textSize(18);
example_gif.pause();
let totalFrames =
example_gif.numFrames() - 1;
frameSlider =
createSlider(0, totalFrames, 0, 1);
frameSlider.position(30, 240);
frameSlider.size(250);
} function draw() {
clear();
text( "Move the slider to set the " +
"current frame of the GIF" , 20, 20);
// Draw the GIF on screen
image(example_gif, 20, 40, 260, 140);
// Set the current frame according to the
// value of the slider
example_gif.setFrame(frameSlider.value());
// Get the current frame
let currFrame =
example_gif.getCurrentFrame();
text( "The current frame is: " +
currFrame, 20, 220);
} |
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/amp/
Reference: https://p5js.org/reference/#/p5.Image/setFrame