/p5.createLoop

Create animation loops with noise and GIF exports in one line of code.

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

p5.createLoop

Create animation loops with noise and GIF exports in one line of code.

Features include:

  • GIF image rendering
  • noise loops

Usage

html:

<script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
<script src="https://unpkg.com/p5.createloop@0.3.1/dist/p5.createloop.js"></script>

javascript:

function setup() {
    createCanvas(400, 400)
    fill(0)
    frameRate(30)
    createLoop({duration:3, gif:true})
}

function draw() {
    background(255)
    translate(width / 2, height / 2)
    const radius = height / 3
    const x = cos(animLoop.theta) * radius
    const y = sin(animLoop.theta) * radius
    ellipse(x, y, 50, 50)
}

Note Currently the only supported method is with script tags. require and import will not work.

Examples

  • makes use of animLoop.noise()
  • two noise seeds, one for x and one for y
  • a noise value for each x position
  • a noise value for each x and y position

Documentation

When a sketch is initialized the following are attatched to it:

  • createLoop()
    • a function to be called in setup()
  • animLoop
    • an object containing helpful properties and methods for draw()

createLoop()

This function can be called in three ways:

createLoop() //defaults to three second duration
createLoop(options)
createLoop(duration,options)

createLoop options

Name Default Description
duration 3 sets the duration in seconds of the loop.
framesPerSecond 30 approximate fps of the loop. This is the same as calling frameRate()
noise options See noise options
gif false can also accept true or options to be passed to GIF module. See gif options

Options can be passed as an object:

createLoop({
    noise:{
        radius:3,
        seed:99
    }
})

or as camelCase:

createLoop({
        noiseRadius:3,
        noiseSeed:99
    })

noise options

These can be passed in createLoop and also overridden each time animLoop.noise() is called. See this Coding Train explanation of how noise loops work.

Name Default Description
radius 1 radius of the circle in a noise field to query. Similar to the concept of frequency
seed random(0,99999) noise field offset
theta animLoop.theta By defalt is angular progress of the loop. This can be set in animLoop.noise() but not in createLoop

gif options

some notes on making GIF images:

  • The built in p5 frameRate() function will also set the delay between GIF frames
  • The GIF encoder gif.js uses web workers to render the GIF asynchronously
Name Default Description
render true render the GIF image alongside the sketch. Clicking on the image will begin downloading the GIF
open false open the gif image in a new tab or window
download false download the gif automatically
fileName image.gif name of the downloaded GIF file
startLoop 0 loop index to begin recording the GIF
endLoop 1 loop index to end recording the GIF
canvas <canvas> the canvas to render. By default this is the sketch canvas
onFinishRender undefined callback when rendering is complete, containing a blob of the rendered gif
options {} options to pass to gif.js encoder. see gif.js documentation

animLoop

Because the aim here is to get loopin asap, this object provides some valuable properties and methods for animating loops. See documentation on Loop Instance for further details.

Name Description
progress linear progress of the loop with a range of 0 to 1
theta angular progress of the loop in radians with range 0 to TWO_PI
noise(options) returns a noise value between -1 and 1. See noise options
noise1D(x,options) Same as above also accepting an x value, providing a 1D line of noise for each frame
noise2D(x,y,options) Same as above also accepting a y value, providing a 2D plane of noise
noiseSeed() set the noise seed. See noise options
noiseRadius() set the noise radius. See noise options

Read more

Contributions

Climb aboard! Make an issue or pull request on the gitHub page

To do

  • add easing functions
  • set GIF size to reflect pixel density
  • add draw option to stay in sync with GIF loop

patch notes

  • 0.3.0 - 04/02/2023
    • merge p5.createLoop and createLoop packages
    • add onFinishRender callback
    • update webpack
  • 0.2.0 - 27/12/2020
    • fixed warning in p5 1.2 "p5 had problems creating the global function..."
  • 0.1.1 - 30/04/2019
    • added codepen examples
  • 0.1.0 - 30/04/2019
    • stable release
  • 0.0.21 - 30/04/2019
    • createLoop returns the animLoop object
    • README script tags reflect version
  • 0.0.18 - 15/04/2019
    • updated to createLoop 0.0.7
  • 0.0.17 - 15/04/2019
    • updated to createLoop 0.0.6
  • 0.0.16 - 15/04/2019
    • can handle webpack without adding p5 to global namespace
  • 0.0.15 - 15/04/2019
    • p5 must be externally required
  • 0.0.12 - 15/04/2019
    • remove full size images from package
  • 0.0.11 - 15/04/2019
    • removed p5 from bundle
    • where p5._targetFrameRate is undefined, uses p5._frameRate instead
  • 0.0.10 - 15/04/2019
    • enabled use as a package
    • added p5 as dependency
  • 0.0.6 - 15/04/2019
    • compressed example images
  • 0.0.4 - 14/04/2019
    • fixed README image bug
  • 0.0.2 - 14/04/2019
    • using script tags in examples
  • 0.0.1 - 14/04/2019
    • initial release