Programming Project #1¶

Objective¶

Draw whatever you’d like in NDC. The following from assignments/assignment1.py should get you started with a bunch of example code.

assignments/assignment1.py¶

while not glfw.window_should_close(window):
    glfw.poll_events()

    elapsed_time_in_seconds: float = glfw.get_time() - program_start_time

    width, height = glfw.get_framebuffer_size(window)
    GL.glViewport(0, 0, width, height)
    GL.glClear(sum([GL.GL_COLOR_BUFFER_BIT, GL.GL_DEPTH_BUFFER_BIT]))

    draw_in_square_viewport()
    draw_a_quadrilateral()
    draw_an_oscillating_triangle(elapsed_time_in_seconds)
    draw_x_squared_with_precomputed_values()
    use_plot_function_for_x_minus_onehalf_squared()
    use_plot_function_with_unnamed_function(elapsed_time_in_seconds)
    draw_circle()

    glfw.swap_buffers(window)

Examples¶

Draw a triangle¶

Draw a triangle that doesn’t move, using predefined coordinates in NDC.

assignments/assignment1.py¶

def draw_a_quadrilateral() -> None:
    GL.glColor3f(0.578123, 0.0, 1.0)
    GL.glBegin(GL.GL_QUADS)
    GL.glVertex2f(-1.0, -0.3)
    GL.glVertex2f(-0.8, -0.3)
    GL.glVertex2f(-0.8, 0.3)
    GL.glVertex2f(-1.0, 0.3)
    GL.glEnd()

Draw an Oscillating Triangle¶

In the event loop, it defines elapsed time in seconds. We can use this value to change the position of a triangle over time, and change the color.

assignments/assignment1.py¶

def draw_an_oscillating_triangle(elapsed_time_in_seconds: float) -> None:
    # math.sin uses radians
    offset_x = math.sin(elapsed_time_in_seconds)
    # to use degrees, you would do
    # offset_x = math.sin(math.radians(elapsed_time_in_seconds))

    float_between_0_and_1 = abs(math.sin(elapsed_time_in_seconds))
    # a float between 0 and 1 so that the color of the triagle changes over time
    GL.glColor3f(float_between_0_and_1, float_between_0_and_1, 1.0)
    GL.glBegin(GL.GL_TRIANGLES)
    GL.glVertex2f(0.0 + offset_x, 0.0)
    GL.glVertex2f(0.5 + offset_x, 0.0)
    GL.glVertex2f(0.0 + offset_x, 0.5)
    GL.glEnd()

Draw X^2 (Precomputed)¶

We can also draw math functions like on a graphing calculator. Here’s an example of using GL_Lines, where line segments are expressed in pairs of glVertexs, as such, values need to be duplicated.

assignments/assignment1.py¶

def draw_x_squared_with_precomputed_values() -> None:
    # f(x) = x^2

    GL.glColor3f(1.0, 1.0, 1.0)
    GL.glBegin(GL.GL_LINES)
    GL.glVertex2f(-1.0, 1.0)
    GL.glVertex2f(-0.9, 0.81)

    GL.glVertex2f(-0.9, 0.81)
    GL.glVertex2f(-0.8, 0.6400000000000001)

    GL.glVertex2f(-0.8, 0.6400000000000001)
    GL.glVertex2f(-0.7, 0.48999999999999994)

    GL.glVertex2f(-0.7, 0.48999999999999994)
    GL.glVertex2f(-0.6, 0.36)

    GL.glVertex2f(-0.6, 0.36)
    GL.glVertex2f(-0.5, 0.25)

    GL.glVertex2f(-0.5, 0.25)
    GL.glVertex2f(-0.4, 0.16000000000000003)

    GL.glVertex2f(-0.4, 0.16000000000000003)
    GL.glVertex2f(-0.3, 0.09)

    GL.glVertex2f(-0.3, 0.09)
    GL.glVertex2f(-0.2, 0.04000000000000001)

    GL.glVertex2f(-0.2, 0.04000000000000001)
    GL.glVertex2f(-0.1, 0.010000000000000002)

    GL.glVertex2f(-0.1, 0.010000000000000002)
    GL.glVertex2f(0.0, 0.0)

    GL.glVertex2f(0.0, 0.0)
    GL.glVertex2f(0.1, 0.010000000000000002)

    GL.glVertex2f(0.1, 0.010000000000000002)
    GL.glVertex2f(0.2, 0.04000000000000001)

    GL.glVertex2f(0.2, 0.04000000000000001)
    GL.glVertex2f(0.3, 0.09)

    GL.glVertex2f(0.3, 0.09)
    GL.glVertex2f(0.4, 0.16000000000000003)

    GL.glVertex2f(0.4, 0.16000000000000003)
    GL.glVertex2f(0.5, 0.25)

    GL.glVertex2f(0.5, 0.25)
    GL.glVertex2f(0.6, 0.36)

    GL.glVertex2f(0.6, 0.36)
    GL.glVertex2f(0.7, 0.48999999999999994)

    GL.glVertex2f(0.7, 0.48999999999999994)
    GL.glVertex2f(0.8, 0.6400000000000001)

    GL.glVertex2f(0.8, 0.6400000000000001)
    GL.glVertex2f(0.9, 0.81)

    GL.glVertex2f(0.9, 0.81)
    GL.glVertex2f(1.0, 1.0)

    GL.glEnd()

Draw (X-1/2)^2 (Dynamically)¶

Using a generic plot function, we can plot any Python function

Black Box¶

assignments/assignment1.py¶

def use_plot_function_for_x_minus_onehalf_squared() -> None:
    def x_minus_onehalf_squared(x) -> float:
        return (x - 0.5) ** 2

    GL.glColor3f(1.0, 0.0, 0.0)
    plot(fn=x_minus_onehalf_squared, domain=(-1, 1), interval=0.001)

Implementation (White Box)¶

assignments/assignment1.py¶

def plot(
    fn: Callable[[float], float], domain: tuple[float, float], interval: float
) -> None:
    GL.glBegin(GL.GL_LINES)
    GL.glVertex2f(domain[0], fn(domain[0]))

    # >>> range(0,10)
    # range(0, 10)
    # >>> list(range(0,10))
    # [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    # >>> list(range(0,10,2))
    # [0, 2, 4, 6, 8]
    # >>> np.arange(.0,1.0,.2)
    # array([. , .2, .4, .6, .8])
    for x in np.arange(domain[0], domain[1], interval, dtype=float):
        # GL.glVertex is here twice because line segments are assumed to be in pairs
        GL.glVertex2f(x, fn(x))
        GL.glVertex2f(x, fn(x))
    GL.glEnd()

Draw Unnamed Function¶

Unlike the example before, where we named a local function x_minus_onehalf_squared, we don’t have to name a new function, we can instead make a new unnamed function on the fly with lambda.

assignments/assignment1.py¶

def use_plot_function_with_unnamed_function(
    elapsed_time_in_seconds: float,
) -> None:
    GL.glColor3f(1.0, 0.0, 1.0)
    plot(
        fn=lambda x: math.cos(x + elapsed_time_in_seconds * 3.0),
        domain=(-1, 1),
        interval=0.01,
    )

Draw Circle¶

We can draw a circle by breaking it up into triangles.

assignments/assignment1.py¶

def draw_circle() -> None:
    GL.glBegin(GL.GL_TRIANGLES)

    theta_increment: float = 0.01

    GL.glColor3f(1.0, 1.0, 1.0)

    scale_radius: float = 0.1

    for theta in np.arange(0.0, 2 * math.pi, theta_increment):
        GL.glVertex2f(0.0, 0.0)
        GL.glVertex2f(
            scale_radius * math.cos(theta), scale_radius * math.sin(theta)
        )
        GL.glVertex2f(
            scale_radius * math.cos(theta + theta_increment),
            scale_radius * math.sin(theta + theta_increment),
        )
    GL.glEnd()