[GIF] The Phase Property in GIF Loop Coder

In this lesson, we look at one of the most powerful features in GIF Loop Coder, the phase property, which allows you to let different objects run animations shifted in time.

 

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:

    glc.styles.backgroundColor = "black";

    for(var i = 0; i < 1000; i++){

        list.addCircle({
            x: Math.random() * width,
            y: Math.random() * height,
            radius: [0.25,1],
            fillStyle: "white",
            phase: Math.random() + 10
        })
    }
    
    list.addText({
        x: width / 2,
        y: height / 2 + 20,
        fontSize: [18, 24],
        text: "Tecnotree Way of Work (WoW)",
        fillStyle: ["white", "yellow"],
    })
}

   

 

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:

    var res = 10;
    for(var y = 0; y < height; y += res){
        for(var x = 0; x < width; x +=res){
            var dx = x - width / 2,
                dy = y - height / 2,
                dist = Math.sqrt(dx * dx+dy*dy);
            
            list.addCircle({
                translationX: x,
                translationY: y,
                x: res / 2,
                y: res / 2,
                radius: res / 2,
                fillStyle: ["red", "yellow"],
                phase: -dist / 100
            })
        }
    }
}