P5.creategif NPM

What? p5.createGIF is evolving!

This library has been superseded by p5.createLoop

p5.createGIF (deprecated)

Create an animated GIF loop in p5 with only one line of code.

This is a simple wrapper of gif.js for p5. The main goal is to make generating gif animations as simple and native to p5 as possible.

Example

Example 1

html:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
    <script src="https://unpkg.com/p5.creategif@latest/dist/p5.createGIF.js"></script>

javascript:

        function setup() {
            createCanvas(400, 400)
            //setting sketch to 30 fps (default is 60)
            frameRate(30)
            //setting duration to 3 seconds (30fps * 3 seconds will be 90 frames)
            createGIF({ duration: 3, download: true })
        }

        function draw() {
            background(255)
            translate(width / 2, height / 2)
            const radius = 125 + gifLoop.noise.value * 25
            const x = Math.cos(gifLoop.theta) * radius
            const y = Math.sin(gifLoop.theta) * radius
            ellipse(x, y, 50, 50)
        }

How it works

The library is designed to generate a faithful representation of the sketch as seen in the browser. For this reason users are encouraged to make use of p5's built-in frameRate() function to set the delay between GIF frames. A snapshot of the p5 sketch is automatically added at the end of evey draw().

When a sketch is initialized the following are attached to the window (or the sketch in instance mode).

createGIF()

This method starts the gif creator. It will begin recording a gif image for a set duration before generating the gif. It is designed to be called in the setup() function and can receive several arguments:

Name	Default	Description
duration	`2`	sets the duration in seconds of the gif loop.
noiseLoopCount	`1`	number of noise loops to create. This is accessed in `gifLoop.noise`. Setting this value to more than one will return an array ie. `gifLoop.noise[0]`.
options	`{}`	options to pass to gif.js, see gif.js documentation
render	`true`	creates an image element and renders the gif alongside the sketch.
open	`false`	opens the gif image in a new tab or window
download	`false`	downloads the gif
frames	`undefined`	ignore duration and manually set nuber of frames.

gifLoop

Because the aim here is to get GIF loopin asap, this object provides some valuable variables for animating loops: | Name | Values | Description | | ------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | t | 0 to 1 | stage of completion of the animation. | | theta | 0 to TWO_PI | stage of completion around a circle. Often used in loops and polar coordinates. | | frameIndex | 0 to 100,000(max) | A zero based counter of ellapsed frames. | | noise | object or array | Container for noise object or array of objects. | | noise.radius | 1 | The radius of the circle in a 2D noise field to query for a value. This will effect the 'noisiness/frequency' of the noise value. | | noise.value | -1 to 1 | The value of the noise circle at position theta. |

Credits

The following libraries are included in p5.createGIF.js.

GIF Encoder: Johan Nordberg - gif.js 0.2.0 - https://github.com/jnordberg/gif.js
Simplex Noise: Jonas Wagner - simplex-noise 2.4.0 - https://github.com/jwagner/simplex-noise.js

Patch Notes

0.1.0
- Introduced duration option
- Introduced noise
- Renamed gifHelper as gifLoop
- Removed delay parameter, frame delay can now only be adjusted using p5's frameRate()