Rastercaster

In this 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 all of the following requirements. No partial credit is given. Submit on a later ready date if a requirement is not yet met.

• Complete this project as an individual, not in a group.
• Place your renderer in apps/rastercaster in your individual Git repository.
• Render a square that fills the viewport.
• Write a fragment shader that computes each fragment's color according to a function f with this interface:
  content_copy

  vec3 f() {
    // TODO: define a vec3 named color.
    return color;
  }

  vec3 f() {
    // TODO: define a vec3 named color.
    return color;
  }

  The comment will be replaced by one or more statements from the user that define the color. Call this function from main and use its return value to set the fragmentColor variable.
• Display a textarea in the HTML in which the user can type in the body of function f. Expect the user to only enter the code that replaces the comment in the snippet above. They will not enter the function signature or return statement. For example, the user might write this code to make a gradient:
  content_copy

  float gray = gl_FragCoords.x / 512.0;
  vec3 color = vec3(gray);

  float gray = gl_FragCoords.x / 512.0;
  vec3 color = vec3(gray);

• On each change to the textarea, inject the user's code 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.
• Allow the user to reference a vec2 uniform named mouse that holds the mouse's position in pixels. Add a mouse listener to your renderer to track this value. Have it call render on every event so that the user sees the changes immediately.
• Allow the user to reference a float uniform named time that holds the number of seconds that have elapsed since the page was loaded. Use the browser's requestAnimationFrame to call render continuously so that the uniform will be actively updated.
• Design four algorithmic pieces of art using different bodies for the function 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.
• At least one design must reference mouse and be interactive.
• At least one design must reference time and animate.
• Your code must be cleanly formatted, the variable names must be meaningful, and comments should explain non-obvious code.
• Ensure that you can paste others' designs into your renderer to reproduce their results.
• Each design must be unique amongst both your own designs and others' designs.

Submission

Share in the Discord #rastercaster channel a screencast of you pasting in each of your designs and interacting with the renderer. Also post the bodies of f as text so that others can copy and paste. Enter the bodies between triple backticks so they are formatted as code.

Commit and push your work to GitHub.