createloop v0.0.14

createLoop

createLoop provides a simple and structured library for creating animation loops in the browser.

Ye be warned This is a baby library and has a lot of growing up to do. Bugs and breaking changes ahoy. Contributions very welcome.

For p5 implementation see p5.createLoop

Features include:

• noise loops
• GIF image rendering

Loop animations can easily be created and rendered as a GIF:

    const loop = createLoop({ 
        duration:5, 
        framesPerSecond:30,
        gif:true,
        canvas })

Example

html:

    <script src="https://unpkg.com/createloop@latest/build/createloop.js"></script>

javascript:

window.addEventListener('load', _ => {
    const canvas = document.createElement('canvas')
    document.body.appendChild(canvas)
    const ctx = canvas.getContext('2d')
    const loop = createLoop({
        duration: 5,
        framesPerSecond: 30,
        gif: true,
        canvas
    })

    loop.start(render)

    function render() {
        const hw = canvas.width / 2
        const hh = canvas.height / 2
        const grd = ctx.createRadialGradient(hw, hh, 0, hw, hh, hh)
        grd.addColorStop(0, `hsl(${loop.progress * 360},100%,50%)`)
        grd.addColorStop(1, `white`)
        ctx.fillStyle = grd
        ctx.fillRect(0, 0, canvas.width, canvas.height)
    }
})

Documentation

Animations can be synced to the loop using the provided progress and theta properties.

The GIF encoder gif.js uses web workers to render the GIF asynchronously. By default, the GIF will be rendered alongside the sketch and can be downloaded by clicking on it.

createLoop()

This method in the global namespace will return a loop instance. It can receive servarl arguments:

//Options can be passed as an object
createLoop({
    noise:{
        radius:3,
        seed:99
    }
})
//or as camelCase
createLoop({
        noiseRadius:3,
        noiseSeed:99
    })

noise options

gif options

Animation Frame Loops

The simplest way to work with this library is to call start(callback) as per the above example. The library then calls requestAnimationFrame internally and will render according to the set framesPerSecond. This will render the canvas at the same frame rate as the GIF animation, giving an easy sense of what the GIF will look like.

When working with frameworks like a-frame where the user has no control over requestAnimationFrame(), or if for some other reason the above method is unsuitable, see this alternative method

Loop instance

The loop instance contains several helpful functions and properties for creating awesome animation loops.

Celebrity attributes

Additional attributes

Less common but useful for some.

Contributions

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

Dependencies / License

createLoop provides a simple and structured library for creating animation loops in the browser.
Copyright (C) 2019 Peter Hayman

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

The following libraries are included in createLoop.

• GIF Encoder
  • Creator: Johan Nordberg
  • Version: gif.js 0.2.0
  • Link: https://github.com/jnordberg/gif.js
  • License: Copyright 2013 Johan Nordberg MIT License
• Simplex Noise
  • Creator: Jonas Wagner
  • Version: simplex-noise 2.4.0
  • Link: https://github.com/jwagner/simplex-noise.js
  • License: Copyright 2015 Jonas Wagner MIT License

This library was developed using techniques described in The Coding Train Coding challenges:

• GIF loops
• Polar Noise
• Noise GIF loops
• 4D polar noise loops

Patch Notes

• 0.0.8 - 16/04/2019
  • added gifOptions to camelCase arguments
  • fixed bug where console would log incorrect GIF frame count if rendering more than one loop
• 0.0.7 - 16/04/2019
  • rewrote start() function to work with start dt rather than frame dt to keep in sync with GIF
  • Synchronized GIF image to render on loop
  • added support for module options and moduleOption ie noise.radius or noiseRadius
• 0.0.5 - 15/04/2019
  • added noiseRadius and noiseSeed to createLoop options
  • added option to override radius and theta in noise() functions
• 0.0.3 - 14/04/2019
  • added fileName to gif options
• 0.0.1 - 14/04/2019
  • added start() method, calling requestAnimationFrame internally
• 0.0.0 - 14/04/2019
  • initial release

TODO

• use gif.js.optimized