[GIF] Parenting in GIF Loop Coder

In this lesson, we look at how you can build up complex animations by assigning one shape as the parent of another, creating a branching display tree.

 

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 Circle = list.addCircle({
        x: width / 2,
        y: height / 2,
        radius: 150,
        stroke: true,
        fill: false,
        rotation: [0,360]
    });
    
    list.addRect({
        x: 150,
        y: 0,
        w: [0, 100],
        h: 40,
        parent: Circle
    });
    
}

 

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 ray1 = list.addRay({
        x: 0,
        y: height / 2,
        length: 100,
        angle: [-60,60]
    });
    
    var ray2 = list.addRay({
       x: 100,
        y:0,
        length: 100,
        angle: [120,-120],
        parent: ray1
    });
    
    var ray3 = list.addRay({
        x: 100,
        y: 0,
        length: 100,
        angle: [-60,60],
        parent: ray2
    })
    
}

 

If you don't need the parent to show, you can use Container:

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 parent = list.addContainer({
        x: width / 2,
        y: height / 2,
        rotation: [0,360]
    })
    
    list.addText({
        x: 150,
        y: 0,
        text: "EGGHEAD",
        rotation: [360,0],
        parent: parent
    })
}