Available on the class repo at tag homework-01-27. (solutions are at homework-01-27-solution-1 and homework-01-27-solution-2)

Zip up your submissions with your NYU id as the file name (e.g. rn47.zip) and upload them to this google drive folder by next class. Include comments to explain your reasoning or struggles. Remember that your best efforts and attempts are what counts the most! We will discuss this on Monday.

Using what we learned about the GPU pipeline draw two kinds of circles. Try your best at both, even an incomplete attempt counts!

Draw a circle using fragments

I've built on the full-screen shader we started in class to draw a circle in the corner of the window. You should see this when you unzip the homework and run the program.

Given this starting point

  1. Center the circle in the window.
  2. Change its color, change the color of the background. Try and make them gradients if you can.
  3. Control the position and size of the circle using uniforms
  4. Animate the circle position and size by animating uniforms on the CPU side.

Study this shadertoy which draws a circle like we want. There may be ideas there you can adapt.

Draw a circle using vertices

Update the position attribute in the code to draw a circle rather than triangles.

You can use Lists which conveniently let you "add" values to them in a loop. You can convert the List back into an array using ToArray.

List<float> vertices = [];

for (int i = 0; i < 64; i++)
{
    vertices.Add(i);
}

// ...

p.Attribute("position", vertices.ToArray(), size: 2);

How can you build this list up to render a circle? Start with a solid color circle and if you can make that work try and make it a gradient of colors.

Some things to keep in mind:

  1. How are you arranging and calculating your attributes?
  2. What attributes do you need?
  3. What DrawCount do you need?
  4. What different PrimitiveTypes could you use? How would you organize your attribute differently for the different PrimitiveTypes?
  5. Start with a solid color circle. If you can make that work, can you make it a gradient?

Here's how it should look at the end

Notes

Don't worry about the squishiness for -- its OK if your circles squash and stretch with the window resizing. We will talk about preventing that next class.