 Made from 100% programmer art.

## Related Posts

Making 3D graphics, without any actual 3D modelling?!
Let's learn how to make pretty images using our graphics card and GLSL!
Maths for Programmers 1 Rearranging Equations
Straight forward instructions on how to rearrange algebraic equations, all wrapped up in a nice free PDF to download. Don't fear maths or algebra again!

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)

# Did you like this post?

if you did, it'd be really nice if you shared it, or left a comment below