Create animation loops with noise and GIF exports in one line of code.
GPL-3.0 License
Create animation loops with noise and GIF exports in one line of code.
Features include:
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.
animLoop.noise()
When a sketch is initialized the following are attatched to it:
setup()
draw()
This function can be called in three ways:
createLoop() //defaults to three second duration
createLoop(options)
createLoop(duration,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
})
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
|
some notes on making GIF images:
frameRate()
function will also set the delay between GIF framesName | 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 |
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 |
Climb aboard! Make an issue or pull request on the gitHub page
onFinishRender
callback