gifloopcoder v0.0.3

Gif Loop Coder library

GLC lirary can be used to create animations like these:

Installation

This is a standalone version of Keith Peters' GifLoopCoder library to be used on your websites. It does not include the GIF export functionality but rather allows you to drop the library on Codepen, JSFiddle, or any other website to quickly prototype your animations that can be then exported from original GLC tool.

You can either download the library with NPM or use a free CDN:

Using a CDN:

<script src="https://cdn.rawgit.com/msurguy/gifloopcoder/0.0.1/dist/glc.min.js"></script>

Installation with NPM:

npm install -s gifloopcoder

or you can download this repo and get the glc.min.js file in "/dist" folder

Usage

When you have the GLC library on the page you can use it as follows: create an element that will contain the animation canvas, for example a <div id='sketch'></div> and place it in your HTML page. Then initialize a new GLC object, passing that canvas container that you created earlier. That's it. You can now use GLC as you would use onGLC function in Keith Peters' GLC tool:

<div id="sketch"></div>
...
<script src="/path/to/glc.min.js"></script>
<script>
    var canvasWrapper = document.getElementById('sketch');
    var glc = new GLC(canvasWrapper);

    glc.loop();
    glc.size(540,540);
    glc.setFPS(33);
    glc.setDuration(3);
    glc.styles.backgroundColor = "white"


    var list = glc.renderList,
       width = glc.w,
       height = glc.h;

    // your GLC code goes here:

    var n = 6;
    var rad = (width/n)/2;

    for (var j=0; j<n; j++) {
        for (var i=0; i<n; i++) {
            list.addPoly({
                x: rad + i*rad*2,
                y: rad + j*rad*2,
                radius: [rad*.9, rad*.4],
                sides: [6,3],
                rotation: [0,180],
                fillStyle: ["#ffc500", "#c21500"],
                phase: .75+ .25/(-n*n)*(i*n+j)
            });
        }
    }

</script>

License

MIT