gif

Gif Class

• p5Gif Intance

Constructor

This allows you to load gif from a local file, online source, and p5Image Array.

  var gif = new p5Gif.Gif(fileUrl, [gifConfig]);

Config

gifConfig = {
    width: Number,   // display width
    height: Number,  // display height
    repeat: Boolean, // if you want to repeat play the gif
    delay: Array // delay for every frame 
}

Getter

You can get attribute of the object by the below code. (Note you can not change the attribute via getter)

• delay

   gif.delay // return an array describing the delay of every frame 

• src

   gif.src //return the gif url. It will return null if you create gif from p5Image

• isLoading

   gif.isLoading // return if the gif is loaded

• frames

    gif.frames // return frames in the format of p5Image array; You can directly apply change onto this frames.

• repeat

   gif.repeat // return if the gif will repeat

• height

   gif.height // return gif's height

• width

     gif.width // return gif's width

Setter

You can use setter to set specific attribute.

• repeat
• height

   gif.height = h // set the height to h

• width

     gif.width = w // set the width to w

• repeat

   gif.repeat = true // set repeat to true. Repeat only accept boolean

• delay

   gif.delay = [1,2,...] // set every frame different delay. The array length must match the frame length.
   gif.delay = 10 // set every frame's delay to 10

Example

Load gif from local file

var myGif = null;

function setup() {
    // Create canvas
    createCanvas(500, 500);
    //load gif from local file
    myGif = p5Gif.loadGif("test.gif", function(){
        // callback function will run when the gif is loaded 
        this.loop(); //It will loop at the default position (0, 0)
        //this.start();  //It will play only once
        //this.start, this.loop can take a pair of parameters describing the x, y position. 
        //this.loop({x :100, y: 100}) // gif will display at (100, 100)
    });
}

function draw() {
}

Load gif from online source

var myGif = null;
var gifLink = "https://media.giphy.com/media/oyx4Eq7XrXhEF9852l/giphy.gif";

function setup() {
    // Create canvas
    createCanvas(500, 500);
    //load gif from link
    myGif = p5Gif.loadGif(gifLink, function(){
        // callback function will run when the gif is loaded 
        this.loop(); //It will loop at the default position (0, 0)
        //this.start();  //It will play only once
        //this.start, this.loop can take a pair of parameters describing the x, y position. 
        //this.loop({x :100, y: 100}) // gif will display at (100, 100)
    });
}

function draw() {
}

Load gif with p5Image

var myGif = null;

function setup() {
    // Create canvas
    createCanvas(500, 500);

    // Create a 100*100 blue block 
    var blueImg = createImage(100, 1000);
    blueImg.loadPixels();
    for(var x = 0; x < blueImg.width; x++) {
        for(var y = 0; y < blueImg.height; y++) {
        blueImg.set(x, y, [0, 0, 255]); 
        }
    }
    blueImg.updatePixels();

    // Create a 100*100 red block
    var redImg = createImage(100, 1000);
    redImg.loadPixels();
    for(var x = 0; x < redImg.width; x++) {
        for(var y = 0; y < redImg.height; y++) {
        redImg.set(x, y, [255, 0, 0]); 
        }
    }
    redImg.updatePixels();

    //load gif from p5Image array
    myGif = p5Gif.loadGif([redImg, blueImg], function(){
        // callback function will run when the gif is loaded 
        this.loop(); //It will loop at the default position (0, 0)
        //this.start();  //It will play only once
        //this.start, this.loop can take a pair of parameters describing the x, y position. 
        //this.loop({x :100, y: 100}) // gif will display at (100, 100)
    });
}

function draw() {
}

Effects

The p5Gif wraps methods of p5Image related with image effect.

filter()

Just like p5Image, filter took one parameter of what kind of filter want to take.

let gif = new p5Gif.loadGif(url);
gif.filter('gray')