teaching machines

Project 1: Rastercaster

January 6, 2021 by Chris Johnson. Filed under graphics-3d, specifications, spring-2021.

In this first project, you will create a sandbox for experimenting with fragment shaders and the OpenGL Shading Language (GLSL). You will render a single, screen-filling quadrilateral and paint designs on it using only algorithms that can be expressed in the fragment shader. This project is inspired by Shadertoy.

Requirements

To receive credit for this project, you must meet the following requirements:

• Create your project in a folder named rastercaster in the single Git repository that you are using for all your projects.
• Render a quadrilateral that fills the viewport.
• Write a fragment shader that computes each fragment’s color according to a function f with this interface:

  vec3 f() {
    // compute color
    return color;
  }

  Call this function from main.
• Display a textarea in the HTML in which the user can type in a custom definition of f.
• On each change to the textarea, inject the user’s definition of f into your fragment shader, recompile, and re-render.
• Allow the user to reference a vec2 uniform named dimensions that holds the viewport’s width and height in pixels.
• Design five algorithmic pieces of art using different definitions of f. Use any builtin GLSL functions or your own helper functions. Art is a subjective term. In general, each piece should be interesting in some aesthetic or algorithmic way and feel like it was crafted by a human artist.
• Share in #gallery screenshots of your five designs and their accompanying definitions of f. Each design must be unique amongst both your own designs and others’ designs.
• Your code must be cleanly formatted, the variable names must be meaningful, and comments should explain non-obvious code.
• Your Git log should reveal a steady pattern of commits. In general, you should commit and push after every work session.

Optional

If you finish early, consider exploring these extra challenges:

• Allow the user to reference a vec2 uniform named mouse that holds the mouse’s position in pixels.
• Allow the user to reference a float uniform named time that holds the number of seconds that have elapsed since the page was loaded.

Submission

When you have completed all requirements, push your code to your remote repository and send your instructor a direct message on Slack to schedule a 10-minute review. Only one project can be granted credit each week. Plan accordingly.