[GIF] GIF Loop Coder - Introduction

Introducing the program, GIF Loop Coder, which allows you to make looping animated gifs (and other types of animations) using JavaScript and HTML5 Canvas. We'll cover the basic UI and syntax of how to add objects to the animation list, animate them and save the result as an animated gif.

 

function onGLC(glc) {
    glc.loop();
//     glc.size(400, 400);
//     glc.setDuration(5);
//     glc.setFPS(20);
//     glc.setMode('single');
//     glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:

    list.addCircle({
        x:width/2,
        y:height/2,
        radius:150,
        fillStyle:"yellow",
        stroke: true,
        strokeStyle:"red",
        lineWidth: 20
    });
    
}

 

Make it move:

To do that you can pass array to the props:

function onGLC(glc) {
    glc.loop();
//     glc.size(400, 400);
//     glc.setDuration(5);
//     glc.setFPS(20);
//     glc.setMode('single');
//     glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:

    list.addCircle({
        x:width/2,
        y:height/2,
        radius:[100, 150],
        fillStyle: ["green", "yellow"],
        stroke: true,
        strokeStyle: ["yellow", "red"],
        lineWidth: [12, 20]
    });
    
}

Create Mutli stars:

function onGLC(glc) {
    glc.loop();
//     glc.size(400, 400);
//     glc.setDuration(5);
//     glc.setFPS(20);
//     glc.setMode('single');
//     glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:

/*    list.addCircle({
        x:width/2,
        y:height/2,
        radius:[100, 150],
        fillStyle: ["green", "yellow"],
        stroke: true,
        strokeStyle: ["yellow", "red"],
        lineWidth: [12, 20]
    });*/
    
    for(var i = 0; i < 100; i++ ){
         list.addStar({
            x: Math.random() * width,
            y: Math.random() * height,
            outerRadius: 30 + Math.random() * 30,
            innerRadius: 10 + Math.random() * 20,
            fillStyle: color.randomRGB(),
            rotation: [0,120]
        })
    }
}