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;Code language: GLSL (glsl)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) );
}Code language: GLSL (glsl)Built in GLSL functions
length()– Use it to calculate distances, and feed into colour routinessmoothstep()– Smoothly transitions from one value (usually 0) to another (usually 1)
