quatAdd: Quaternion Addition Operation

Component-wise Quaternion Addition

The quatAdd function performs component-wise addition of quaternions. While not representing valid rotation composition (which requires quaternion multiplication), this operation creates useful blending effects for interpolation operations.

Mathematical Definition: For quaternions $q_1 = (x_1, y_1, z_1, w_1)$ and $q_2 = (x_2, y_2, z_2, w_2)$:

$$q_1 + q_2 = (x_1 + x_2, y_1 + y_2, z_1 + z_2, w_1 + w_2)$$

This operation creates intermediate quaternion states that can be normalized for interpolation effects.

Spatial Quaternion Addition

This example demonstrates quaternion addition applied across spatial coordinates, creating patterns through 4D vector arithmetic operations.

Live Editor

const fragment = () => {
      const pos = uv.mul(4)
      const cell = pos.floor()
      const local = pos.fract().sub(0.5)

      const hash1 = cell.x.mul(12.9898).add(cell.y.mul(78.233)).sin().mul(43758.5).fract()
      const hash2 = cell.x.mul(39.346).add(cell.y.mul(11.135)).sin().mul(73156.8).fract()

      const q1 = vec4(hash1.mul(6.28).sin(), hash1.mul(3.14).cos(), hash2.mul(4.71).sin(), hash2.mul(1.57).cos())
      const q2 = vec4(iTime.add(hash1).mul(2).cos(), iTime.add(hash2).mul(1.5).sin(),
                      iTime.add(hash1).mul(0.8).cos(), iTime.add(hash2).mul(1.2).sin())

      const sum = quatAdd(q1, q2).normalize()
      const field = dot(sum, vec4(local.x, local.y, local.x.mul(local.y), 1))

      const oscillation = field.mul(8).sin().abs()
      const color = vec3(oscillation, oscillation.mul(0.7), oscillation.mul(0.4))

      return vec4(color, 1)

}