HOME About NCOT Documentation Social Media Mastodon Support Me

Drink tea and make things

Blog Electronics Labs ZX Spectrum Next Computer Science Z80 Homebrew Computer Arduino and Microcontrollers

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)

Related Content