Signed Distance Fields

signed distance field circles rectangles translation rotation scale union intersection visualization

Ronja’s 2D Signed Distance Field Basics

Ronja’s 2D Signed Distance Field Combination

SDF Circle

SDF Rectangle

SDF Visualize

SDF Transform

SDF Combine

In-class Challenge

Explore the code examples above by completing the following challenges in order.
Don’t skip any.

Modify the SDF Circle Example

  1. Move the field up.
  2. Negate the field.

Modify the SDF Rect Example

  1. Make the rectangle wide and short.
  2. Align the rectangle to the bottom of the canvas.

Modify the SDF Transform Example

  1. Disable the scaling.
  2. Make the rectangle move in a circle without rotating.

Modify the SDF Combine Example

  1. Replace the max with a min call.
  2. Move the circle to the end of the rectangle.

Challenging Challenges

Make these!

sdf challenge 1 sdf challenge 2