Distance Calculation Functions

Mathematical Foundation

Distance calculation forms the foundation of countless visual phenomena in digital art. These functions measure how far apart points are in space, but each method creates dramatically different visual patterns.

Distance Function Types:

Euclidean Distance (L²-norm): $d_{\text{euclidean}}(\mathbf{a}, \mathbf{b}) = \sqrt{\sum_{i=1}^{n}(a_i - b_i)^2}$

Manhattan Distance (L¹-norm): $d_{\text{manhattan}}(\mathbf{a}, \mathbf{b}) = \sum_{i=1}^{n}|a_i - b_i|$

Chebyshev Distance (L∞-norm): $d_{\text{chebyshev}}(\mathbf{a}, \mathbf{b}) = \max_{i=1}^{n}|a_i - b_i|$

Minkowski Distance (Lᵖ-norm): $d_{\text{minkowski}}(\mathbf{a}, \mathbf{b}) = \left(\sum_{i=1}^{n}|a_i - b_i|^p\right)^{1/p}$

Where $p \geq 1$ is the order parameter. Special cases include Manhattan ($p=1$), Euclidean ($p=2$), and Chebyshev ($p \to \infty$).

Distance Types Overview

Distance Type	Visual Character	Best Use Cases
Euclidean	Smooth circles and spheres	Natural organic shapes
Manhattan	Diamond patterns and grid-like structures	Urban geometric designs
Chebychev	Square patterns with sharp corners	Pixelated retro aesthetics
Minkowski	Morphing between circle and square	Hybrid geometric forms

Function Reference Table

Function Name	Input Types	Output	Description
distEuclidean(a, b)	vec2/vec3/vec4	float	Standard straight-line distance
distManhattan(a, b)	vec2/vec3/vec4	float	Sum of axis-aligned distances
distChebychev(a, b)	vec2/vec3/vec4	float	Maximum axis distance
distMinkowski(a, b)	vec2/vec3/vec4	float	Customizable p-norm distance
dist(a, b)	vec2/vec3/vec4	float	Generic distance (defaults to Euclidean)

Psychedelic Distance Field Visualization

This demo creates a mind-bending kaleidoscope using multiple distance calculation methods simultaneously, producing an otherworldly visual experience that morphs between geometric patterns.

ライブエディター

const fragment = () => {
      const center = vec2(0.5, 0.5)
      const uv = position.xy.div(iResolution)
      const time = iTime.mul(0.3)

      // Create multiple moving points
      const p1 = center.add(vec2(time.cos(), time.sin()).mul(0.2))
      const p2 = center.add(vec2(time.mul(1.3).add(2.1).cos(), time.mul(1.7).add(4.2).sin()).mul(0.15))
      const p3 = center.add(vec2(time.mul(2.1).add(1.4).cos(), time.mul(0.8).add(5.7).sin()).mul(0.25))

      // Different distance calculations create different patterns
      const dEuclidean = distEuclidean(uv, p1).mul(8)
      const dManhattan = distManhattan(uv, p2).mul(12)
      const dChebychev = distChebychev(uv, p3).mul(10)

      // Combine distances with trigonometric functions for trippy effects
      const wave1 = dEuclidean.add(time.mul(2)).sin().mul(0.5).add(0.5)
      const wave2 = dManhattan.sub(time.mul(1.5)).cos().mul(0.5).add(0.5)
      const wave3 = dChebychev.mul(1.2).add(time.mul(0.8)).sin().mul(0.5).add(0.5)

      // Create pulsating rainbow colors
      const r = wave1.mul(time.add(0).cos()).mul(0.5).add(0.5)
      const g = wave2.mul(time.add(2.1).cos()).mul(0.5).add(0.5)
      const b = wave3.mul(time.add(4.2).cos()).mul(0.5).add(0.5)

      // Add interference patterns
      const interference = dEuclidean.add(dManhattan).add(dChebychev).mul(3).sub(time.mul(4)).sin()
      const intensity = interference.mul(0.3).add(0.7)

      return vec4(r.mul(intensity), g.mul(intensity), b.mul(intensity), 1)

}

Understanding Distance Calculation Methods

Euclidean Distance: The Natural Way

Euclidean distance measures the shortest straight-line path between two points. This creates perfectly circular patterns radiating outward from a center point.

Mathematical Formula: √[(x₂-x₁)² + (y₂-y₁)²]

Visual Characteristics: Smooth circular gradients, natural-looking ripples, organic blob shapes

Manhattan Distance: The City Grid

Manhattan distance sums the absolute differences along each axis. Imagine walking through city blocks where you can only move horizontally or vertically.

Mathematical Formula: |x₂-x₁| + |y₂-y₁|

Visual Characteristics: Diamond patterns, sharp angular transitions, pixelated aesthetics

Chebychev Distance: The Maximum Rule

Chebychev distance takes the maximum difference among all axes. This creates square-shaped patterns with sharp corners and uniform boundaries.

Mathematical Formula: max(|x₂-x₁|, |y₂-y₁|)

Visual Characteristics: Perfect squares, retro pixel art effects, harsh geometric boundaries

Minkowski Distance: The Shape Shifter

Minkowski distance generalizes all other distance types using a parameter p. When p=1, it becomes Manhattan distance. When p=2, it becomes Euclidean. Higher values approach Chebychev.

Mathematical Formula: (|x₂-x₁|ᵖ + |y₂-y₁|ᵖ)^(1/p)

Visual Characteristics: Morphing between geometric shapes, customizable roundness