GLSL Learning

GLSL built-in function

sin()

Returns the sine of an angle in radians, a smooth wave that repeats every 2 * PI and stays between -1.0 and 1.0.

Syntax

float sin(float angle)
vec2 sin(vec2 angle)
vec3 sin(vec3 angle)
vec4 sin(vec4 angle)

Parameters

angle
The angle in radians (2 * PI, about 6.2831, is one full turn).

Return value

A value between -1.0 and 1.0.

Live example

Edit the code and the preview updates as you type.

How it works

sin turns a steadily increasing number into a wave that goes up and down forever:

  • sin(0.0) is 0.0
  • sin(1.5708) (a quarter turn) is 1.0
  • sin(3.1416) (half a turn) is 0.0 again
  • after 6.2831 (a full turn) the wave repeats

Three numbers control the wave in a * sin(x * f + t):

parteffect
aheight (amplitude)
fhow many waves fit in the same space (frequency)
tslides the wave sideways; adding u_time makes it move

Typical uses

  • Animation: 0.5 + 0.5 * sin(u_time) pulses smoothly between 0 and 1.
  • Waves and stripes: sin(uv.x * 40.0) gives evenly spaced stripes.
  • Wobble and distortion: uv.x += 0.02 * sin(uv.y * 30.0 + u_time) makes an image ripple.

Common mistakes

  • Using degrees. GLSL works in radians; sin(90.0) is not 1.0. Convert with radians(90.0).
  • Using the raw result as a color. sin returns -1..1, and negative colors are clipped to black. Remap with 0.5 + 0.5 * sin(x).
  • Feeding it a huge u_time. After hours of running, mediump floats lose precision and the animation stutters. Wrap time with mod(u_time, 6.2831) when only the phase matters.

Related functions

cos()
Returns the cosine of an angle in radians: the same wave as sin, shifted a quarter turn ahead.
radians()
Converts an angle from degrees to radians, the unit that sin, cos and the other trigonometric functions expect.
atan()
Returns the angle in radians whose tangent is y / x. The two-argument form atan(y, x) gives the full angle of a point around the origin, from -PI to PI.

Tutorials that use sin()