Lesson 3

Together with position, vertices can have colors associated with them. If all vertices in the model share colors, then they can be specified directly at the site of the bake call:

var square = Lux.model({
    type: "triangles",
    elements: [0, 1, 2, 0, 2, 3],
    vertex: [[-1,-1, 1,-1, 1,1, -1,1], 2]
});
Lux.Scene.add(Lux.bake(square, {
    position: camera(Shade.translation( 1.5, 0, -6)(square.vertex)),
    color: Shade.color('#88f')
}));

Colors can also be specified on a vertex per vertex basis:

var triangle = Lux.model({
    type: "triangles",
    elements: [0, 1, 2],
    vertex: [[0,1, -1,-1, 1,-1], 2],
    color: [Shade.color('red'),
            Shade.color('green'),
            Shade.color('blue')]
});

Lux accepts all CSS color names. Color attributes can also be specified as an array of values. This snippet is exactly equivalent to the above:

var triangle = Lux.model({
    type: "triangles",
    elements: [0, 1, 2],
    vertex: [[0,1, -1,-1, 1,-1], 2],
    color: [[1,0,0,1, 0,0.5,0,1, 0,0,1,1], 4]
});

Notice that each color has four components, the last of which is the opacity component, or alpha. More on alpha on lesson 8.

Back to the index.