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