The Distance Field effect visualizes the distance from each pixel to the nearest visible edge, creating gradient patterns that can be used for advanced design effects.
How it works
Distance Field calculates and visualizes how far each pixel is from the nearest visible edge in your content. This creates a gradient map where pixels closer to edges have lower values, and pixels further away have higher values. The effect offers multiple visualization modes to display this data in different ways.
This effect serves as the foundation for other effects like Advanced Outline and Advanced Shadow, but can also be used on its own for creative design purposes.
Use cases
- Creating gradient patterns based on shape contours
- Preparing images for advanced edge-based effects
Controllers
| Name | Type | Description | Range |
|---|---|---|---|
| Max Distance | Number | Maximum distance to calculate | 1-500 |
| Visualization | Select | How to display the distance field | Grayscale/Heatmap/Rainbow |
| Invert Field | Boolean | Reverse the distance values | - |
| Normalize Field | Boolean | Scale values to fit within 0-1 range | - |
| Opacity | Number | Controls the transparency of the field | 0-1 |