# Gif Class

- [**p5Gif Intance**]()

## Constructor

This allows you to load gif from a local file, online source, and p5Image Array.
```javascript
  var gif = new p5Gif.Gif(fileUrl, [gifConfig]);
```

### Config

```javascript
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
    ```javascript  
     gif.delay // return an array describing the delay of every frame 
    ```
- src
    ```javascript
     gif.src //return the gif url. It will return null if you create gif from p5Image
    ```
- isLoading
    ```javascript
     gif.isLoading // return if the gif is loaded
    ```
- frames
    ``` javascript
      gif.frames // return frames in the format of p5Image array; You can directly apply change onto this frames.
     ```
- repeat
     ```javascript
      gif.repeat // return if the gif will repeat
     ```
- height
     ``` javascript
      gif.height // return gif's height
     ```
- width
    ```javascript
       gif.width // return gif's width
    ```

### Setter
You can use setter to set specific attribute.
- repeat
- height
     ``` javascript
      gif.height = h // set the height to h
     ```
- width
    ```javascript
       gif.width = w // set the width to w
    ```
- repeat
     ```javascript
      gif.repeat = true // set repeat to true. Repeat only accept boolean
     ```
- delay
    ```javascript  
     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 
```javascript
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
```javascript
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
```javascript
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.
```javascript
let gif = new p5Gif.loadGif(url);
gif.filter('gray')
```