sineInOut: Symmetric Sinusoidal Motion

Balanced trigonometric motion with smooth bidirectional transitions

The sineInOut function creates symmetric motion through cosine-based mapping. This produces equally smooth acceleration and deceleration phases with natural trigonometric characteristics.

$f(t) = -\frac{1}{2}(\cos(\pi t) - 1)$

The cosine relationship ensures perfect symmetry while maintaining the organic smoothness characteristic of trigonometric functions throughout both motion phases.

Live Editor

const fragment = () => {
  const w = 0.01
  const t = iTime.fract()
  const y = sineInOut(t)
  const Y = sineInOut(uv.x)
  const a = vec3(0.8, 0.4, 0.9)
  const b = vec3(0.2, 0.8, 0.5)
  const c = a.mix(b, y).mul(uv.x.step(t))
  const lines = mmin2(smoothstep(0, w, uv.mod(0.1).min(uv.sub(vec2(t, y)).abs())))
  const curve = stroke(uv.y.sub(Y), 0, w).mul(c)
  const color = lines.oneMinus().mul(0.2).add(curve)
  return vec4(color, 1)
}