## Shadertoy 2 Sinewaves

##### Posted:

Today I figured out how to draw a line, and then make it wiggle using some basic maths.

Writing shaders like this seems a bit inside-out. Instead of drawing a line by specifying each point, the code instead runs through every single point on the screen, and if the point is one we want, it gets coloured in.

## Useful Code

### Centre the screen co-ordinates

This normalises the pixel co-ords and turns them into texture UV co-ords. Then it moves the origin to the centre, and scales the x axis by the screen aspect ratio. The screen can now be considered a 2D grid with 0,0 in the middle and 0.5,0.5 at the top right, -0.5, -0.5 at the bottom left.

```
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// move origin, fix aspect ratio
uv -= .5;
uv.x *= iResolution.x/iResolution.y;
```

### Generating palettes

This code generates nice gradients. It came from This article on palettes. In fact the rest of that website looks useful!

```
vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d )
{
return a + b*cos( 6.28318*(c*t+d) );
}
```

### Built in GLSL functions

- length() - Use it to calculate distances, and feed into colour routines
- smoothstep() - Smoothly transitions from one value (usually 0) to another (usually 1)