net

Graphic shaders

and 0.5. In other words: what is the distance from the
centre of the image?
Then we multiplied our current colour value by the
result of the smoothstep function. Smoothstep, you
may recall, gives interpolated value between 0 and
1, based on the provided two ‘edges’ and the source
value, which we defined here as the distance the
pixel is from centre, multiplied by the strength of
the effect and the falloff.

Challenge: Try experimenting with those 0.5 values
in the smoothstep function to see what effects you
get. Change the distance line to use vec2(0.75,0.75)
and see what effect that has. Can you make off-
centred or coloured vignettes?

),1$/,0$*(6+$'(5Ɯ7811(/
$1,0$7,21
Creating animations with shaders is a great way
to show how easy it is to make great effects with
minimal code. Try this new code out.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord.xy/iResolution.xy; //
normalise
vec2 p = (2. uv - 1.); // centre
p.x = iResolution.x / iResolution.y; // correct
aspect ratio
vec2 t = vec2(p.x, p.y)/4.0;
float light = t.y + .25; // make brighter closer,
darker further
fragColor = vec4(texture(iChannel0, t).rgb / light,
1);
}

You should see a gradient of brightness applied to
your image. Not a tunnel yet but it’ll get there.
We used multiplication for scaling, centring and
aspect-ratio correction. This gets us a texture, with
some shading via a simple gradient and a centre to
work from that won’t be stretched by the aspect ratio
of the canvas. We’re applying a gradient of dark to

light to the image, which is based on a distance from

the centre.

Let’s add some simple scrolling of the texture to

get it moving on a loop and then a little maths to

wrap this texture around a cylindrical shape. We can

use the atan function to help.

Here’s how the new code now looks all together:

void mainImage( out vec4 fragColor, in vec2 fragCoord )

{

vec2 uv = fragCoord.xy/iResolution.xy; //

normalise

vec2 p = (2. * uv - 1.); // centre

p.x *= iResolution.x / iResolution.y; // correct

aspect ratio

vec2 t = vec2(atan(p.x, p.y) / 3.1416, 1. /

length(p));

vec2 speed = iTime * vec2(.1, 1); // texture offset

/speed

vec2 scale = vec2(3, 1); // texture scale

float light = t.y + .25; // make brighter closer,

darker further

fragColor = vec4(texture(iChannel0, t * scale +

speed).rgb / light, 1);

}

In the atan function, we use the angle between

the x and y of p, which is our centred UV and then

apply the distance p is from the origin, similar to our

vignette shader. It might be a bit of maths to wrap

your head around but try experimenting with the

code and see how easy it is to manipulate the effect.

Challenge: Try experimenting with the scale and

speed to get a result you like. Try animating the

t variable over time to twist the texture. Or try

adding the other effects we made on top of this

one to enhance the effect.

Use this for a background effect or drop a sprite in

front of it and you have a ship flying down a tunnel.

Play with the blur and colour and you’ll have

something really nice for your next project.

)DUOHIWA beautiful

cinematic vignette effect

$ERYHOHIWA gradient of

brightness that will give

depth to your tunnel

Above right A finished

tunnel animation with

aspect ratio correction,

scaling and speed