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/[email protected]/lib/p5.js"></script>
<script src="https://unpkg.com/[email protected]/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

Noise Loop

• makes use of animLoop.noise()

Noise Loop 2x

• two noise seeds, one for x and one for y

Noise Loop 1D

• a noise value for each x position

Noise Loop 2D

• a noise value for each x and y position

also works in instance mode

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

• codepen collection

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