GSOC 2019 : An implementation for drawing GIFs on the canvas

Summer of Code
1

Hello I am Ajay Neethi Kannan, and I would like to work with the processing foundation by contributing to the p5.js library this summer.

Here I discuss about an approach to draw GIFs in the library.

To implement the GIF support for the p5.js library:

GIF is one of the most common and the oldest media formats used in the world today . They are a very important form of artistic expression . Transparent gifs, such as GIPHY stickers take it to a whole new level of creativity !
Currently p5.js allows for manipulation of images, manipulation of videos (through manipulation of images) in the canvas. But interestingly, the GIF format does not come with a native browser support to be drawn in the canvas, like a jpg image or even a video . The ability to manipulate GIFs inside the canvas would open up a lot of opportunities for amazing creative work with the canvas. It can be used in games , to create characters, backgrounds, manipulating the gifs’ frames through canvas, the possibilities are endless. Also the implementation should also other image formats such as animated png images, which also doesnt have native browser support to run properly in the canvas.

Since p5.js is a beginner friendly library , I believe it is extremely important to make the implementation (user facing interface as well as the source code) as easy as possible, so that anyone can access the power of GIFs on canvas easily.

The basic implementation features shall be :

  • Calling loadImage will now also be able to load GIFs.
  • Calling image() method will draw the gif on the canvas.
function setup()
{
    let cat = loadGif('cat.gif');
}

function draw()
{
    image(cat, 0, 0);
}

This shall be the basic usage.

All the methods accessible to p5.Image should be accessible to gif as well .
The first important feature would be to make all features present on p5.Image to be accessible to GIF instance, such as filter, tint, imageMode, get, set, etc. so that it is easier for people to use.

Some of these methods are , (considering cat as the gif instance)

  • cat.get(x, y, w, h, frameNumber) : Returns an rgba value, or a part of the image for the current frame or for frame of given number .
  • cat.set(x, y, w, h, frameNumber) : Sets a pixel’s rgba value , or sets a part of the image of current frame, or of the frame of given number .
  • cat.filter(GRAY) : set a gray filter on the gif .

The similarity of the interface with images, will help people to get accustomed to its usage very quickly . These are of higher priority, due to their common interface as images.

For more in depth manipulation of the gifs in the canvas, we can have features like :

  • add() : feature to add GIFs , in the order you want.
  • divide() : feature to divide a gif into a number of separate GIFs .
  • frameRate() : control the frame rate of the GIF .
  • save() : download the GIF you made !
  • createGIF() : function to create gifs from a spritesheet, array of images, etc.

These are some of the features I tried to come up with, but it would be extremely helpful to hear from the community about what feautures should be implemented , to benefit the community .

Thank you !

2 Likes
2

There are times where I wanted to export my animation that I made on p5 js to a gif but couldn’t find out how. I do remember that it exports each frame of the animation into a png which has to be combined to get the gif. But that’s too tedious I guess. Last time when I was designing a poster on p5.js I wanted to export the animation to gif but couldn’t figure out how to do it.

So yeah, an export to gif(directly) feature would be really helpful.

2 Likes
3

Thank you for your suggestion @clinckzone !

1 Like
4

Its early days but ive just put out a library which can do that.
Started as a simple wrapper of gif.js and kind of evolved into an animation loop helper which can also export GIFs

2 Likes
5

hi @Ajayneethikannan

It seems like we are on somewhat similar paths, would be wonderful to keep across each others work and perhaps collaborate. Have you begun work and/or research on this feature?

I’ve been working on the above mention looping library which supports GIF exports and also have come across the following libraries:

I like the way you’re formalizing whats needed.
What are your thoughts on similarities/differences with the above mentioned libraries? I thought I saw in the p5 gitHub issue you mentioned writing a decoder specifically for p5?

1 Like