map: Dimensional Range Metamorphosis Engine

Mathematical Bridge Between Infinite Scales

Range mapping transforms mathematical dimensions by creating seamless bridges between distinct scale systems. This fundamental operation enables dimensional metamorphosis where coordinate systems undergo continuous transformation through precisely calculated proportional relationships.

The mathematical foundation reveals two transformation modes:

Normalization mapping: $map(v, a, b) = \frac{v - a}{b - a}$

Range transformation: $mapRange(v, a, b, c, d) = c + (d - c) \cdot \frac{v - a}{b - a}$

Where the first transforms values from range $[a, b]$ to $[0, 1]$, while the second creates direct transformation from $[a, b]$ to $[c, d]$, establishing mathematical correspondence between any dimensional scales.

ライブエディター

const fragment = () => {
      const normalized = map(uv, 0.2, 0.8)
      const waveAmplitude = mapRange(iTime.mul(2).sin(), -1, 1, 0.05, 0.25)
      const fieldDistance = normalized.sub(0.5).length()
      const oscillation = fieldDistance.mul(15).sub(iTime.mul(3)).sin().mul(waveAmplitude)
      const transformedField = mapRange(fieldDistance.add(oscillation), 0, 0.7, 1, 0)
      const energyDistribution = transformedField.max(0).pow(2.5)
      return vec4(energyDistribution.mul(0.4), energyDistribution.mul(1.2), energyDistribution.mul(0.8), 1)
}

Chromatic Scale Transformation Matrix

Range mapping creates chromatic transformations that exist beyond conventional color boundaries. By systematically mapping color coordinates between mathematical spaces, new chromatic dimensions emerge through calculated scale metamorphosis.

ライブエディター

const fragment = () => {
      const timePhase = iTime.mul(0.8)
      const polarRadius = uv.sub(0.5).length().mul(2)
      const polarAngle = uv.y.sub(0.5).atan2(uv.x.sub(0.5))
      const redMapping = mapRange(polarRadius.mul(4).add(timePhase).sin(), -1, 1, 0.1, 0.9)
      const greenMapping = mapRange(polarAngle.mul(3).add(timePhase.mul(1.3)).cos(), -1, 1, 0.2, 1.0)
      const blueMapping = mapRange(polarRadius.mul(6).sub(polarAngle.mul(2).add(timePhase.mul(0.7))).sin(), -1, 1, 0.3, 0.8)
      const intensityField = mapRange(polarRadius.mul(8).sub(timePhase.mul(2)).cos(), -1, 1, 0.6, 1.4)
      const chromaMatrix = vec3(redMapping, greenMapping, blueMapping).mul(intensityField)
      return vec4(chromaMatrix, 1)
}