Flow Field-Based Image Displacement Mapping Through Adaptive Triangulation

Abstract

We present a novel approach for creating pseudo-depth displacement effects in digital images through the combination of Perlin noise-based flow fields and adaptive Delaunay triangulation. Our method employs brightness-weighted sampling to generate a non-uniform point distribution that captures image features, followed by triangulation-based mesh generation. Each triangle undergoes vertex displacement guided by a continuous flow field, with displacement magnitude modulated by local brightness values. Additionally, we introduce dynamic color transformations in HSB space, including noise-driven hue shifting and displacement-proportional saturation fading, to enhance the visual depth perception. The algorithm achieves real-time performance through efficient triangulation and parallel vertex processing, making it suitable for interactive artistic applications and generative design workflows.

Keywords Flow fields · Delaunay triangulation · Image displacement · Perlin noise · Computational art · Real-time rendering

01Introduction

The creation of depth and motion effects in static images has been a fundamental challenge in computer graphics and digital art. Traditional approaches often rely on depth maps, normal maps, or complex 3D reconstruction techniques. We propose an alternative method that generates compelling pseudo-depth effects through the strategic combination of flow field dynamics and adaptive mesh deformation.

Our approach draws inspiration from fluid dynamics visualization and computational geometry, leveraging the organic patterns of Perlin noise to create natural-looking displacement fields. By coupling this with brightness-based adaptive sampling and Delaunay triangulation, we achieve a system that responds intelligently to image content while maintaining computational efficiency.

02Theoretical Foundation

2.1 Brightness-Based Point Sampling

The foundation of our method lies in the intelligent sampling of points from the source image. Rather than uniform sampling, we employ a brightness-weighted stochastic process. For a given image $I$ with dimensions $W \times H$, the probability of selecting a point at position $(x, y)$ is given by:

$$P(x, y) = \frac{B(I(x, y))}{B_{max}} \cdot \rho$$

where $B(I(x, y))$ represents the brightness value at pixel $(x, y)$, $B_{max}$ is the maximum possible brightness (typically 100 in HSB space), and $\rho$ is a user-defined density parameter controlling the overall sampling rate.

                    Key Insight: Brightness-weighted sampling ensures higher triangle density in visually important regions, preserving detail where it matters most while maintaining computational efficiency in darker areas.
                

2.2 Delaunay Triangulation

Given the set of sampled points $\mathcal{P} = \{p_1, p_2, ..., p_n\}$, we construct a Delaunay triangulation $\mathcal{T}$. The Delaunay condition ensures that no point in $\mathcal{P}$ lies inside the circumcircle of any triangle in $\mathcal{T}$, mathematically expressed as:

$$\forall t \in \mathcal{T}, \forall p \in \mathcal{P} \setminus V(t) : p \notin \text{circumcircle}(t)$$

where $V(t)$ denotes the vertices of triangle $t$. This property maximizes the minimum angle of all triangles, avoiding sliver triangles and ensuring mesh quality.

2.3 Flow Field Generation

The displacement field is generated using 3D Perlin noise, creating smooth, continuous gradients. For each point $(x, y)$ at time $t$, the flow field angle $\theta$ is computed as:

$$\theta(x, y, t) = 2\pi \cdot \eta \cdot \text{Perlin}(x \cdot z, y \cdot z, t \cdot \tau)$$

where $z$ is the zoom factor controlling the spatial frequency of the noise, $\tau$ is the temporal evolution rate, and $\eta$ is a scaling factor (typically 2) allowing for multiple rotations.

03Displacement Algorithm

Algorithm 1: Triangle Displacement and Rendering

Input: Triangle vertices $V = \{v_1, v_2, v_3\}$, Image $I$, Parameters $\{\delta, z, h_s, s_f\}$

Output: Rendered displaced triangle

Step 1. Compute centroid: $C = \frac{1}{3}\sum_{i=1}^{3} v_i$

Step 2. For each vertex $v_i$:
    a. Sample noise: $n_i = \text{Perlin}(v_i.x \cdot z, v_i.y \cdot z, t)$
    b. Compute angle: $\theta_i = 2\pi \cdot 2 \cdot n_i$
    c. Get brightness: $b_i = B(I(v_i.x, v_i.y)) / 100$
    d. Calculate magnitude: $m_i = \delta \cdot b_i$
    e. Displace vertex: $v'_i = v_i + m_i \cdot [\cos(\theta_i), \sin(\theta_i)]^T$

Step 3. Apply color transformations (see Section 3.1)

Step 4. Render triangle with vertices $\{v'_1, v'_2, v'_3\}$

3.1 Vertex Displacement

For each vertex $v$ in a triangle, the displacement vector $\vec{d}$ is calculated as:

$$\vec{d}(v) = M(v) \cdot \begin{bmatrix} \cos(\theta(v)) \\ \sin(\theta(v)) \end{bmatrix}$$

where the magnitude function $M(v)$ is defined as:

$$M(v) = \delta \cdot \frac{B(I(v.x, v.y))}{B_{max}}$$

Here, $\delta$ represents the maximum displacement amount, creating a brightness-modulated displacement field where brighter regions experience greater deformation.

3.2 Dynamic Color Transformation

Beyond geometric displacement, we apply sophisticated color transformations in HSB (Hue, Saturation, Brightness) space to enhance the perception of depth and motion.

3.2.1 Hue Shift

The hue component undergoes a shift based on the average noise value across the triangle's vertices:

$$H' = (H + \Delta H) \mod 360$$

where the hue shift $\Delta H$ is computed as:

$$\Delta H = h_s \cdot 2 \cdot \left(\frac{1}{3}\sum_{i=1}^{3} n_i - 0.5\right)$$

This creates a color warping effect that follows the flow field patterns, with $h_s$ controlling the maximum hue shift amplitude.

3.2.2 Saturation Fade

To simulate atmospheric perspective and depth cues, we implement displacement-proportional saturation reduction:

$$S' = S - s_f \cdot \frac{\bar{m}}{\delta}$$

where $\bar{m}$ is the average displacement magnitude across the triangle's vertices, and $s_f$ controls the fade intensity. This creates a desaturation effect for highly displaced regions, mimicking depth-based color fading.

04Implementation Details

4.1 Optimization Strategies

The algorithm achieves real-time performance through several key optimizations:

Spatial Coherence: The Delaunay triangulation is computed once per parameter change, avoiding redundant geometric computations.
Temporal Coherence: Perlin noise evaluation uses incremental time steps, maintaining smooth animation without recalculating the entire field.
Brightness Caching: Image brightness values are pre-computed and stored during the sampling phase, eliminating redundant pixel reads.
Triangle Culling: Triangles with all vertices outside the viewport are skipped, reducing rendering overhead.

4.2 Parameter Space

The algorithm exposes five primary parameters that control the visual output:

ρ (Density)

[0.05, 1.0]

Controls point sampling density

δ (Displacement)

[0, 150]px

Maximum displacement magnitude

z (Zoom)

[0.001, 0.05]

Flow field spatial frequency

h_s (Hue Shift)

[0, 180]°

Maximum hue deviation

s_f (Saturation)

[0, 100]

Saturation reduction factor

05Results and Analysis

5.1 Visual Characteristics

The algorithm produces several distinctive visual effects:

Organic Flow Patterns: The Perlin noise field creates natural, fluid-like distortions that avoid the mechanical appearance of linear transformations.
Feature Preservation: Brightness-based sampling ensures that important image features (typically brighter regions) maintain higher triangle density, preserving detail where it matters most.
Depth Illusion: The combination of geometric displacement and color transformations creates a compelling pseudo-3D effect, with displaced regions appearing to float above or sink below the image plane.
Temporal Dynamics: The time-evolving noise field produces smooth, hypnotic animations that suggest organic movement or breathing effects.

5.2 Performance Metrics

Operation	Complexity	Typical Time	Notes
Point Sampling	`O(n)`	~5ms	n = sampled points
Delaunay Triangulation	`O(n log n)`	~20ms	Divide-and-conquer
Per-frame Rendering	`O(t)`	~10ms	t = triangle count
Frame Rate	-	30-60 FPS	800×800px, moderate density

06Applications

The presented algorithm finds applications in various domains:

Digital Art and Design: Creating unique visual effects for artistic expression and generative art projects.
Motion Graphics: Generating dynamic backgrounds and transitions for video production.
Data Visualization: Applying the technique to scientific visualization for emphasizing data patterns through controlled distortion.
Interactive Media: Real-time image effects for games, installations, and interactive experiences.
Glitch Art: Controlled corruption and distortion effects for aesthetic purposes.

07Future Work

Several avenues for future research and development present themselves:

Multi-scale Flow Fields: Implementing octave-based noise with varying frequencies to create more complex displacement patterns.
Adaptive Refinement: Dynamic triangle subdivision based on local image complexity or user interaction.
GPU Acceleration: Implementing the algorithm using WebGL or compute shaders for improved performance.
Machine Learning Integration: Using neural networks to learn optimal displacement patterns based on image content.
3D Extension: Extending the technique to true 3D space with depth map generation from single images.

08Conclusion

We have presented a novel approach to image displacement mapping that combines flow field dynamics with adaptive triangulation to create compelling visual effects. The method's key innovations include brightness-weighted sampling for intelligent mesh generation, Perlin noise-based flow fields for organic displacement patterns, and sophisticated color transformations that enhance depth perception.

The algorithm's real-time performance and intuitive parameter space make it suitable for both artistic applications and technical visualization tasks. By bridging computational geometry, fluid dynamics, and digital art, this work demonstrates the potential for cross-disciplinary approaches in creating new forms of visual expression.

The open-source implementation and web-based deployment ensure accessibility for artists, designers, and researchers, fostering further exploration and development of flow field-based visualization techniques.

09References

Perlin, K. (1985). An image synthesizer. ACM SIGGRAPH Computer Graphics, 19(3), 287-296.
de Berg, M., Cheong, O., van Kreveld, M., & Overmars, M. (2008). Computational Geometry: Algorithms and Applications. Springer-Verlag.
Shewchuk, J. R. (1996). Triangle: Engineering a 2D quality mesh generator and Delaunay triangulator. Applied Computational Geometry, 1148, 203-222.
Bridson, R. (2007). Fast Poisson disk sampling in arbitrary dimensions. SIGGRAPH Sketches, 10(1), 1.
Turk, G. (1991). Generating textures on arbitrary surfaces using reaction-diffusion. ACM SIGGRAPH Computer Graphics, 25(4), 289-298.
Cook, R. L. (1986). Stochastic sampling in computer graphics. ACM Transactions on Graphics, 5(1), 51-72.
Lee, D. T., & Schachter, B. J. (1980). Two algorithms for constructing a Delaunay triangulation. International Journal of Computer & Information Sciences, 9(3), 219-242.

Interactive Flow Field Implementation

Instructions: Upload an image and adjust the parameters to see the flow field displacement effect in real-time. The Hue Shift warps colors along the flow field, while Saturation Fade makes highly displaced triangles lose color, adding depth. Experiment with all sliders to create unique visual styles.

Upload Image

Detail / Density

Displacement

Flow Field Zoom

Hue Shift

Saturation Fade

Related Work & Closest Prior Art

This section surveys prior research that intersects with the method proposed in this document— brightness/feature–weighted point sampling, adaptive Delaunay triangulation to form a mesh over the image, and real‑time, piecewise‑affine displacement of triangle vertices driven by a smooth, procedural flow field (Perlin/curl‑noise), accompanied by simple color transforms in HSB space.

1) Adaptive Triangulation and Low‑Poly Image Abstraction

Lawonn et al., “Stylized Image Triangulation,” Computer Graphics Forum, 2019 — formulates image triangulation as an optimization with feature‑aware refinement.
Gai et al., “Artistic Low‑Poly Rendering for Images,” 2015 — automatic low‑poly generation using Delaunay triangulation.
Joseph et al., “A Delaunay Triangulation‑Based Low‑Poly Image Abstraction,” 2024 — recent low‑poly pipeline with boundary‑aware seeding and Delaunay reconstruction.
Demaret, Dyn, Iske, “Image Compression by Linear Splines over Adaptive Triangulations,” 2006 — classic adaptive‑triangulation of images (Delaunay on significant pixels) as linear‑spline approximation.

2) Brightness‑Weighted / Feature‑Aware Sampling

Secord, “Weighted Voronoi Stippling,” NPAR 2002 — luminance‑guided sampling via weighted centroidal Voronoi diagrams (dual to Delaunay), a common basis for intensity‑aware point sets.

3) Vector‑Field–Guided Stylization

Kang, Lee, Chui, “Flow‑Based Image Abstraction,” IEEE TVCG 2009 — uses an image‑derived vector field to steer anisotropic filtering and abstraction (flow‑guided appearance rather than geometry).
Kyprianidis et al., “Image and Video Abstraction by Anisotropic Kuwahara Filtering,” 2009 — structure‑adaptive filtering along local feature directions for painterly abstraction.
Cabral & Leedom, “Imaging Vector Fields Using Line Integral Convolution,” SIGGRAPH 1993 — foundational vector‑field visualization by filtering textures along streamlines (appearance, not geometric warp).

4) Procedural Flow Fields (Perlin/Curl‑Noise)

Bridson, Hourihan, Nordenstam, “Curl‑Noise for Procedural Fluid Flow,” SIGGRAPH 2007 — simple, divergence‑free velocity fields derived from Perlin noise; useful for stable, vortex‑rich flow guidance.

5) Mesh‑Based Piecewise‑Affine Warping

Igarashi, Moscovich, Hughes, “As‑Rigid‑As‑Possible Shape Manipulation,” TOG 2005 — triangle‑mesh deformation minimizing local distortion; a standard reference for piecewise‑affine mesh warps.
Liu et al., “Content‑Preserving Warps for 3D Video Stabilization,” SIGGRAPH 2009 — content‑preserving warping on meshes for video (optimization‑driven; conceptually related to mesh‑based image deformation).

                    Takeaway. To our knowledge, the exact combination—
                    an adaptive Delaunay mesh over an image, with per‑vertex displacements taken from a
                    procedural (e.g., Perlin/curl) flow field and displacement magnitudes modulated by local brightness,
                    plus lightweight HSB color shifts—has not been explicitly documented as a single, real‑time stylization pipeline in the cited literature.
                    The approach should therefore be positioned as a practical synthesis of well‑established components.
                