Who are you again?

  • It's Jesús here! Digitally known as @jesi_rgb mostly everywhere.

  • I am a designer, web developer, animator and musician! All things art, but make it digital.

  • So far, I've mainly done mathematical animation and web design.

The solution


So, GIFs


  • Very old format
  • Palette based
  • Lossless image compression format
  • Lighter, video like (sometimes)
  • Pronounced like /GIF/

So, GIFs


  • Excellent meme format
  • Excellent WIP sharing format
  • True and tested, supported mostly everywhere
  • Everyone is familiar with it
  • Most webpages are comfortable with it

So, GIFs


We will develop a tool that fits into the p5.js ecosystem, allowing users to very easily save gifs out of their sketches.

  • Bucket list:
    • Fast, as fast as possible
    • Very easy to use
    • Feels native to the platform
    • Somewhat reliable
    • Responsive
      • Please, do not freeze my computer
    • Small file size
      • Twitter's file limit is 15MB

A 🐦's 👀 view

  • Gather every frame from your animation

  • Generate a global palette

  • Apply the palette to every frame

  • Smash holes wherever applies

  • Encode each frame

  • Enjoy! 🥳 🎉

Frame Gathering

  • Save a frame every n milliseconds?
    • Some sketches will run slower, if running very intensive animations
    • The frameRate won't be consistent throughout the animation

We need to wait for the frame to finish and immediately save it

Global Palette Generation

In order to build any given GIF file, we must comply with the GIF specs. And the specs tell us to build a palette that every frame needs to reference, whether it is local or global.

This palette must contain 256 (!) colors.

We can make local palettes, but that's wasteful.

We'll make a global palette instead.

Global Palette Generation

We can use the default one that has a mediocre representation of all colors, or we can generate one ourselves.

It is not that hard and yields much better results.

Global Palette Generation

  • Make a list of all the unique colors present in every frame; that is, every color that will appear in our animation
  • Sort them by frequency; that is, how much they appear in our animation
    • Background colors, for example, appear a lot (basically always!)
  • Finally, take the 255' most important colors!

For excruciating details, you may check out my blogpost, in which I covered this in great detail.

Applying a palette

The most difficult part was generating a palette. Now, it all comes down to applying it.

To apply a palette means to take the original pixels in each frame and substitute them for their closest version within the palette.

To find how close two colors are, we can use the euclidean distance, for example.

Transparency Optimization

At this point we could be done. But this is a technique that could greatly help in file size.

  • We analyze each pair of frames before encoding and find what's similar.
  • We mark everything that is redundant from one frame to the next. That is, pixels that have the same values.
  • By marking them, we can tell the gif encoder to simply treat these as transparent, allowing us to see through this frame in to the previous one.

Summing up


  • Given any sketch, we can successfully render GIFs easily, quickly and conveniently.
  • No need to hook up external libraries. These can feel intimidating for newcomers.
    • Sometimes those even feel intimidating to me
  • File size is relatively small and render times are not too long!
    • Also, some progress is shown for proper user feedback

Thanks much!

  • Special thanks to Divyanshu Raj, Dave Pagurek and Matt DesLauriers for their continued support and invaluable feedback and help!
  • And massive props to the Processing Foundation for making this possible and accessible to everyone.

and, last but not least... thank YOU!

Find me at:

top: general purpose palette from insouris, bottom: a similar looking "custom" palette matching our theme

copy image from blogpost

copy image from blogpost

mention that this feature is allowing newcomers to much more easily share stuff, and that this was one of the main purposes of the project altogether. how can this improve accessibility?