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.

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.

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.

Code¶

Define the geometry of the square in its own modelspace.

src/modelviewprojection/demo11.py¶

square: list[mu2d.Vector2D] = [
    mu2d.Vector2D(x=-0.5, y=-0.5),
    mu2d.Vector2D(x=0.5, y=-0.5),
    mu2d.Vector2D(x=0.5, y=0.5),
    mu2d.Vector2D(x=-0.5, y=0.5),
]

Event Loop¶

src/modelviewprojection/demo11.py¶

while not glfw.window_should_close(window):

...

Draw paddle 1, just as before.

src/modelviewprojection/demo11.py¶

    GL.glColor3f(*iter(paddle1.color))

    GL.glBegin(GL.GL_QUADS)
    for p1_v_ms in paddle1.vertices:
        ms_to_ndc: mu2d.InvertibleFunction = mu2d.compose(
            [
                # camera space to NDC
                mu2d.uniform_scale(1.0 / 10.0),
                # world space to camera space
                mu2d.inverse(mu2d.translate(camera.position_ws)),
                # model space to world space
                mu2d.compose(
                    [
                        mu2d.translate(paddle1.position),
                        mu2d.rotate(paddle1.rotation),
                    ]
                ),
            ]
        )

        paddle1_vector_ndc: mu2d.Vector2D = ms_to_ndc(p1_v_ms)

        GL.glVertex2f(paddle1_vector_ndc.x, paddle1_vector_ndc.y)
    GL.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¶

    GL.glColor3f(0.0, 0.0, 1.0)
    GL.glBegin(GL.GL_QUADS)
    for ms in square:
        ms_to_ndc: mu2d.InvertibleFunction = mu2d.compose(
            [
                # camera space to NDC
                mu2d.uniform_scale(1.0 / 10.0),
                # world space to camera space
                mu2d.inverse(mu2d.translate(camera.position_ws)),
                # model space to world space
                mu2d.compose(
                    [
                        mu2d.translate(paddle1.position),
                        mu2d.rotate(paddle1.rotation),
                    ]
                ),
                # square space to paddle 1 space
                mu2d.translate(mu2d.Vector2D(x=2.0, y=0.0)),
            ]
        )
        square_vector_ndc: mu2d.Vector2D = ms_to_ndc(ms)
        GL.glVertex2f(square_vector_ndc.x, square_vector_ndc.y)
    GL.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¶

    GL.glColor3f(*iter(paddle2.color))

    GL.glBegin(GL.GL_QUADS)
    for p2_v_ms in paddle2.vertices:
        ms_to_ndc: mu2d.InvertibleFunction = mu2d.compose(
            [
                # camera space to NDC
                mu2d.uniform_scale(1.0 / 10.0),
                # world space to camera space
                mu2d.inverse(mu2d.translate(camera.position_ws)),
                # model space to world space
                mu2d.compose(
                    [
                        mu2d.translate(paddle2.position),
                        mu2d.rotate(paddle2.rotation),
                    ]
                ),
            ]
        )

        paddle2_vector_ndc: mu2d.Vector2D = ms_to_ndc(p2_v_ms)

        GL.glVertex2f(paddle2_vector_ndc.x, paddle2_vector_ndc.y)
    GL.glEnd()