Lesson 4

Most of the time we want our graphical elements to be dynamic in some way, be it changing with time, with respect to user input, or some combination thereof. On of the simplest ways to do this is by making the vertex positions dependent on the time since the page loaded. In Lux, this is done by using the now parameter:

var angle = gl.parameters.now.mul(50).radians();

Parameters are used in any expressions that are eventually baked, and can also be transformed. For example, while gl.parameters.now represents the number of seconds since starting the webpage, gl.parameters.now.mul(50).radians() represents a value increasing at a rate of 50*(pi/180) every second.

We will use angle to rotate the vertex positions before translating them. Notice that translations and rotations are transformations that behave like functions, in the same way camera does:

Lux.Scene.add(Lux.bake(square, {
    position: camera(Shade.translation( 1.5, 0, -6))
                    (Shade.rotation(angle, Shade.vec(1, 0, 0)))
                    (square.vertex),
    color: Shade.color('#88f')
}));

Finally, we need to tell Lux that this scene should be updated regularly:

Lux.Scene.animate();

Back to the index.