Made from 100% programmer art.
Follow @ncot_tech

Support Me

Related Posts

Shadertoy 3 Raymarching
Making 3D graphics, without any actual 3D modelling?!
Read More…
Shadertoy 1 - Mandelbrot
Let's learn how to make pretty images using our graphics card and GLSL!
Read More…
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!
Read More…

Shadertoy 2 Sinewaves

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

Leave comments here!