Relative Objects - Demo 11

Objective

Introduce relative objects, by making a small blue square that is defined relative to the left paddle, but offset some in the x direction. When the paddle on the left moves or rotates, the blue square moves with it, because it is defined relative to it.

Demo 11

Demo 11

How to Execute

Load src/modelviewprojection/demo11.py in Spyder and hit the play button.

Move the Paddles using the Keyboard

Keyboard Input

Action

w

Move Left Paddle Up

s

Move Left Paddle Down

k

Move Right Paddle Down

i

Move Right Paddle Up

d

Increase Left Paddle’s Rotation

a

Decrease Left Paddle’s Rotation

l

Increase Right Paddle’s Rotation

j

Decrease Right Paddle’s Rotation

UP

Move the camera up, moving the objects down

DOWN

Move the camera down, moving the objects up

LEFT

Move the camera left, moving the objects right

RIGHT

Move the camera right, moving the objects left

Description

Cayley Graph

In the graph below, all we have added is “Square space”, relative to paddle 1 space.

Demo 11

Demo 11

In the picture below, in 3D space, we see that the square has its own modelspace (as evidenced by the 3 arrows), and we are going to define its position and orientation relative to paddle 1.

Coordinate Frames

Coordinate Frames

Code

Define the geometry of the square in its own modelspace.

src/modelviewprojection/demo11.py
154square: list[Vector2D] = [
155    Vector2D(x=-0.5, y=-0.5),
156    Vector2D(x=0.5, y=-0.5),
157    Vector2D(x=0.5, y=0.5),
158    Vector2D(x=-0.5, y=0.5),
159]

Event Loop

src/modelviewprojection/demo11.py
202while not glfw.window_should_close(window):
...

Draw paddle 1, just as before.

src/modelviewprojection/demo11.py
224    glColor3f(*astuple(paddle1.color))
225
226    glBegin(GL_QUADS)
227    for p1_v_ms in paddle1.vertices:
228        ms_to_ndc: InvertibleFunction[Vector2D] = compose(
229            # camera space to NDC
230            uniform_scale(1.0 / 10.0),
231            # world space to camera space
232            inverse(translate(camera.position_ws)),
233            # model space to world space
234            compose(translate(paddle1.position),
235                    rotate(paddle1.rotation)))
236
237        paddle1_vector_ndc: Vector2D = ms_to_ndc(p1_v_ms)
238
239        glVertex2f(paddle1_vector_ndc.x, paddle1_vector_ndc.y)
240    glEnd()

As a refresher, the author recommends reading the code from modelspace to worldspace from the bottom up, and from worldspace to NDC from top down.

  • Read from modelspace to world space, bottom up

  • Reset the coordinate system

  • Read from world space to camera space, knowing that camera transformations are implemented as the inverse of placing the camera space in world space.

  • Reset the coordinate system

  • Read camera-space to NDC

New part! Draw the square relative to the first paddle! Translate the square to the right by 2 units. We are dealing with a -1 to 1 world space, which later gets scaled down to NDC.

src/modelviewprojection/demo11.py
244    glColor3f(0.0, 0.0, 1.0)
245    glBegin(GL_QUADS)
246    for ms in square:
247        ms_to_ndc: InvertibleFunction[Vector2D] = compose(
248            # camera space to NDC
249            uniform_scale(1.0 / 10.0),
250            # world space to camera space
251            inverse(translate(camera.position_ws)),
252            # model space to world space
253            compose(translate(paddle1.position),
254                    rotate(paddle1.rotation)),
255            # square space to paddle 1 space
256            translate(Vector2D(x=2.0,
257                               y=0.0)))
258        square_vector_ndc: Vector2D = ms_to_ndc(ms)
259        glVertex2f(square_vector_ndc.x, square_vector_ndc.y)
260    glEnd()

Towards that, we need to do all of the transformations to the square that we would to the paddle, and then do any extra transformations afterwards.

As such, read

  • Read paddle1space to world space, from bottom up

If we were to plot the square now, it would be in paddle 1’s space. We don’t want that, we want in to be moved in the X direction some units. Therefore

  • Read modelspace to paddle1space, from bottom up

  • Reset the coordinate system.

Now the square’s geometry will be in its own space!

  • Read from worldspace to camera-space, knowing that camera transformations are implemented as the inverse of placing the camera space in world space.

  • Reset the coordinate system

  • Read camera-space to NDC

Draw paddle 2 just like before.

src/modelviewprojection/demo11.py
264    glColor3f(*astuple(paddle2.color))
265
266    glBegin(GL_QUADS)
267    for p2_v_ms in paddle2.vertices:
268        ms_to_ndc: InvertibleFunction[Vector2D] = compose(
269            # camera space to NDC
270            uniform_scale(1.0 / 10.0),
271            # world space to camera space
272            inverse(translate(camera.position_ws)),
273            # model space to world space
274            compose(translate(paddle2.position),
275                    rotate(paddle2.rotation)))
276
277        paddle2_vector_ndc: Vector2D = ms_to_ndc(p2_v_ms)
278
279        glVertex2f(paddle2_vector_ndc.x, paddle2_vector_ndc.y)
280    glEnd()