# 7.5 - Rotating a Camera¶

This lesson discusses how to rotate a camera’s orientation. Remember that almost all camera motion is relative to the camera’s current frame of reference.

## Tilt Motion¶

To tilt a camera means you rotate a camera’s orientation around its u axis. You can tilt up (positive rotation) or tilt down (negative rotation).

As in the previous lesson, there are two basic ways to implement a tilt camera motion:

• Modify the parameters of a call to the lookat function and then call lookat to create a camera transformation matrix, or
• Directly modify the definition of a camera’s position and coordinate axes.

Let’s solve the problem both ways.

## Use lookAt to Tilt¶

In the previous lesson you studied a class called LookAtCamera which defines a camera using two points and one vector: 1) the location of the camera, 2) the location of a point along it’s line-of-sight, and 3) a direction that is upwards. To “tilt” a camera, we add a new function to the LookAtCamera class called tilt.

A tilt movement must change the center point. We need to rotate the location of the center point about the camera’s u axis, which will change the line-of-sight of the camera. Remember that the camera will be invalid if the line-of-sight and the “up vector” are pointing in the same direction. Therefore, if the angle between the line-of-sight vector and the “up vector” gets small, we need to rotate the “up_vector” to keep it away from the line-of-sight vector. The diagram illustrates a tilt movement.

The tilt function receives an angle in degrees which is the amount of rotation. If the angle is positive, the function will “tilt up”. If the angle is negative, the function will “tilt down”. The basic steps are:

• Calculate the camera’s u axis.
• Move the camera to the origin. This moves the eye point to the origin and it moves the center point to some location relative to the origin. You translate by (-eye_x, -eye_y, -eye_z). This is required because all rotation is about the origin.
• Rotate the center point about the u axis by the angle of tilt.
• Move the camera back to its original location. You translate the center point by (eye_x, eye_y, eye_z).
• Use the lookAt function to recalculate the camera’s transformation matrix.

Note that all of the above operations need to be performed by 4-by-4 transformation matrices because you are not necessarily working in a plane that is parallel to the global axes.

Use the following demo to experiment with tilting a camera. Notice that tilting is always relative to the camera’s frame of reference. The code is editable if you want to experiment with the code.

Show: Code Canvas Run Info
./camera_tilt_lookat/camera_tilt_lookat.html

To investigate camera tilt motion:

• Manipulate the parameters of a lookAt() created virtual camera to position and orient a camera.
• Push the tilt button below to "tilt" from the camera's current position and orientation.

The left canvas shows the relative location of the scene objects and the camera. The right canvas shows the scene from the camera's vantage point.
Please use a browser that supports "canvas" Please use a browser that supports "canvas"
Manipulate the function lookAt(M, eye_x, eye_y, eye_z, center_x, center_y, center_z, up_dx, up_dy, up_dz)

 eye (0.0, 0.0, 5.0) center (0.0, 0.0, 0.0) up <0.0, 1.0, 0.0> X: -5.0 +5.0 X: -5.0 +5.0 X: -1.0 +1.0 Y: -5.0 +5.0 Y: -5.0 +5.0 Y: -1.0 +1.0 Z: -5.0 +5.0 Z: -5.0 +5.0 Z: -1.0 +1.0

Each click of the tilt button rotates 1 degree about the u axis.

Open this webgl program in a new tab or window

You must study the above code carefully to understand camera movement. Please read the code comments as you study the statements.

## Modify A Camera’s Definition¶

Let’s implement the “tilt” motion of a camera using the camera’s basic definition: a location and three coordinate axes. Using the AxesCamera class we introduced in the previous lesson, we add a new function called tilt. To tilt a camera we simply need to rotate the v and n coordinate axes about the u axis. The eye location of the camera does not change.

Please study the tilt function in the following demo program. This demo code is editable.

Show: Code Canvas Run Info
./camera_tilt_axes/camera_tilt_axes.html

To investigate camera tilting motion:

• Manipulate the position and orientation of a camera.
• Push the tilt button below to "tilt" from the camera's current position and orientation.

The left canvas shows the relative location of the scene objects and the camera. The right canvas shows the scene from the camera's vantage point.
Please use a browser that supports "canvas" Please use a browser that supports "canvas"
Manipulate the camera's position and orientation:

 eye (0.0, 0.0, 5.0) angle = 0.0 X: -5.0 +5.0 Rotate about the camera's u axis: Y: -5.0 +5.0 Rotate about the camera's v axis: -180.0 +180.0 Z: -5.0 +5.0 Rotate about the camera's n axis:

Each click of the tilt button rotates 1 degree about the u axis.

Open this webgl program in a new tab or window

## Summary¶

A camera movement that involves rotation will rotate about one of the current axes of the camera’s coordinate system. If a camera tilts, the rotation is about the u axis. If a camera pans, the rotation is about the v axis. If a camera cants, the rotation is about the n axis. Camera motion is almost always about the camera’s current frame of reference.

As in the previous lesson, manipulating the actual camera definition (a point and 3 axes) requires less computation but more mathematical understanding of the camera matrix transform.

## Glossary¶

tilt camera
Rotate a camera upwards or downwards, keeping its location unchanged.
pan camera
Rotate a camera left or right, keeping its location unchanged.
cant camera
Rotate a camera about its line-of-sight, keeping its location unchanged.
Next Section - 7.6 - Points Along A Path