GRAPHIC SHADERS

Richard Mat­tka fo­cuses on gen­er­a­tive colour an­i­ma­tions and light ef­fects

net magazine - - CONTENTS - Richard Mat tka w: http://richard­mat­tka.com t: @syn­er­gy­seeker job: In­ter­ac­tive direc­tor, de­signer, de­vel­oper ar­eas of ex­per­tise: Shaders, VFX, We­bGL

Shaders en­able a wide range of ef­fects by work­ing di­rectly with the graph­ics hard­ware of de­vices. In pre­vi­ous ar­ti­cles, we learned what shaders are and cre­ated our first ones. We also learned about post-pro­cess­ing, mak­ing greyscale and sepia tones, wa­ter an­i­ma­tion ef­fects and blurs, all with just a few lines of code.

This tu­to­rial will ex­plore some very pow­er­ful gen­er­a­tive ef­fects that can be cre­ated with colour and in­ten­sity. They are ex­cel­lent ex­am­ples of how lit­tle code is re­quired to cre­ate in­cred­i­ble ef­fects us­ing GLSL. We’re just scratch­ing the sur­face of what can be done but it will give you some­thing prac­ti­cal you can use. My goal is to re­move some of the mys­tery around shaders and get you in­spired. I want to get you cre­at­ing your own ef­fects as soon as pos­si­ble.

Gen­er­a­tive colour and lights

Ef­fi­cient, sim­ple code loops, it­er­at­ing over pix­els demon­strate the power of GLSL. In pre­vi­ous tu­to­ri­als we looked at colours and how eas­ily gra­di­ents can be gen­er­ated based on dis­tances from a point. Beyond lin­ear or ra­dial gra­di­ents, we can use a va­ri­ety of func­tions to help us cre­ate shapes and pat­terns, such as mod­ulo, frac­tion, floor, ceil­ing, min and max. These can ef­fec­tively con­strain the val­ues passed through the func­tion. For ex­am­ple, we will use Mod­ulo ( mod ), which re­turns the re­main­der of the first value di­vided by the sec­ond. You can vi­su­alise this as a lin­ear slope un­til it hits the limit and then it re­peats. Com­bin­ing shap­ing func­tions with sin, cos, tan can cre­ate eas­ing vis­ually and in mo­tion.

colour in­ten­sity dis­tance shader

In pre­vi­ous tu­to­ri­als we pro­duced some cool ef­fects with im­ages and colour. This first shader shows you how sim­ple shap­ing func­tions and dis­tances can cre­ate beau­ti­ful gen­er­a­tive ef­fects. Let’s get started and make this ef­fect.

In or­der to see our shader, we need to ren­der it. As in pre­vi­ous ar­ti­cles we’ll make use of a We­bGL ren­der­ing tool, such as Shader­toy. It gives us a nice code window to prac­tice in and a ren­der window to see our work.

To get started, open https://www.shader­toy.com/ new in a browser that sup­ports We­bGL. You’ll see a sam­ple shader code all ready to go for you in the code window. Delete it, so we can write our own.

Type in this new code and press the black play icon at the bot­tom of the window. This will ex­e­cute the shader code. You should now see a se­ries of red an­i­mat­ing rings of light. The pattern feels or­ganic, as it flows smoothly be­tween states. This tech­nique is in­spired from a math­e­mat­i­cal ap­proach by Dan­guafer/Silexar ( https:// www.shader­toy.com/view/XsXXDn). It is not only sim­ple but also el­e­gant, es­sen­tially based on two lines of code.

So what what’s go­ing on in the code? To start, we fol­low our usual ap­proach of nor­mal­is­ing, cen­tring and ad­just­ing for as­pect ra­tio. First, we get the fragCo­ord value, then nor­malise them by di­vid­ing by the screen iRes­o­lu­tion. We use a vari­able to hold the colour and call it col . We also keep track of the length of p , which is ef­fec­tively a dis­tance from cen­tre. Then we cal­cu­late the re­la­tion­ship of the cur­rent pixel ( p ) as a per­cent of the over­all length ( p/l ) then mul­ti­ply that out by a fac­tor us­ing time ( t ) so we see it an­i­mate over time.

We are ef­fec­tively us­ing a prin­ci­ple of di­min­ish­ing re­turn as the dis­tance in­creases. Light works in this way, as its in­ten­sity de­creases over the dis­tance from its source. This is of­ten rep­re­sented by the in­verse square law in the form: float light­ness = 1.0/(dist*dist) . We are us­ing a vari­a­tion of this con­cept in these two lines (sec­ond and third last lines) com­bined with the divi­sion again of col by length ( l ) in the last line. Ef­fec­tively we have di­vided the colour by l twice or (

l*l ) where l is the dis­tance.

colour separation shader

We ap­plied the ef­fect pre­vi­ously to the red “channel” of the rgb ar­ray us­ing col.r . But, us­ing a sim­ple loop, we can ap­ply the same ef­fect to each of the colour chan­nels, with a lit­tle separation to gen­er­ate a re­ally beau­ti­ful ef­fect.

Give the code here a try: You should now see a dy­namic gen­er­a­tive ef­fect us­ing all three colours. The colours are ad­di­tive, which cre­ates an in­ter­ac­tion be­tween the var­i­ous lights and shapes. What is im­pres­sive is how lit­tle code is re­quired to cre­ate an an­i­ma­tion that can

play while con­stantly chang­ing over time. The use of the iTime uni­form en­ables the time to af­fect the an­i­ma­tion chang­ing con­tin­u­ously. Let it play for a while and you’ll see how it works.

We added a vari­able for in­ten­sity, which you can ad­just for over­all light strength. We also set up a sim­ple for loop to it­er­ate over the colour chan­nels. This cre­ated a lit­tle separation, on each it­er­a­tion be­tween the colours.

liq­uid metal rings shader

The shader we made is colour­ful and dy­namic and by ad­just­ing val­ues, you can see how easy it is to cre­ate your own variations. With a few tweaks we can de­sat­u­rate this and cre­ate a more in­ten­tional pattern, like these metal­lic rings.

Try this new code out: You should see smooth, shaded rings, re­flect­ing light to give the il­lu­sion of a metal­lic sur­face.

We up­dated our ad­di­tive uv func­tion to this: p/l*(sin(t)-1.)*(sin(l*20.)) . This is a re­work­ing of the func­tion to now use two sin func­tions and the 20. to in­ten­sify the af­fect of dis­tance ( l ).

We can im­prove this fur­ther. By ap­ply­ing bet­ter colour separation and some light­ing dis­tances we can re­ally make this an­i­ma­tion stand out.

Here’s how the new code looks: Now we have some­thing that looks pretty cool. It has a re­al­is­tic metal­lic smooth look, with light­ing and an in­ter­est­ing pattern be­tween the rings.

We set up another speed vari­able, which we can ad­just eas­ier out­side the loop and added an off­set to start it fur­ther ahead in time. We moved uv and dis­tance cal­cu­la­tions out­side the loop in or­der to sta­bilise the shape, which means that only the colours and light­ing fluc­tu­ate.

This could make a nice land­ing page con­cept or piece of stand­alone gen­er­a­tive art. Set some mu­sic with it and it could work as an in­tro­duc­tion to a pro­ject. So have fun ex­per­i­ment­ing with this one.

Above A sim­ple red, glow­ing light, cir­cu­lar an­i­ma­tion

Far left Colour separation and more dy­nam­ics in this mes­meris­ing gen­er­a­tive an­i­ma­tion Mid­dle A metal­lic look­ing an­i­ma­tion, de­sat­u­rated and shaded Above right A sta­bilised, colourised pattern of metal­lic rings

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.