npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

p5.creategif

v0.1.7

Published

(deprecated) This library has been superseded by [p5.createLoop](https://www.npmjs.com/package/p5.createloop)

Downloads

4

Readme

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()