p5.js Image setFrame() Method - GeeksforGeeks

23 Sep, 2020
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.
Javascript
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:
Javascript
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/Reference: https://p5js.org/reference/#/p5.Image/setFrame
JavaScript-p5.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?