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);
image(example_gif, 20, 40, 260, 140);
let currFrame =
example_gif.getCurrentFrame();
text(
"The current frame is: "
+
currFrame, 20, 200);
}
function
skipForward() {
let currFrame =
example_gif.getCurrentFrame();
if
(currFrame <
example_gif.numFrames() - 10) {
let newFrame = currFrame + 10;
example_gif.setFrame(newFrame);
}
}
function
skipBackward() {
let currFrame =
example_gif.getCurrentFrame();
if
(currFrame > 10) {
let newFrame = currFrame - 10;
example_gif.setFrame(newFrame);
}
}