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    })}