formulanimations tutorial :: the principles of painting with maths

formulanimations tutorial :: the principles of painting with maths

all right I’m recording a new video about how to make images with mathematics and with coding because I was given a presentation the other day and I was improvising some some graphics and I quite liked what I got in the end of the session so I’m going to try to improvise the same thing and because I think it’s a good way to explain the very basics of how you make images and pictures with mathematics which is not the way you normally do images when you are working for video games or movie companies or advertising you normally use a tool like Photoshop or 3ds max or Maya or a combination or others which help you make the images although behind the scenes in the computer because the computer is a machine that computes there is a lot of mathematics going on and numbers flowing and those become colors and shapes as you press buttons and sliders but for the most part you use those tools to make images however there are a few times where you might want to do things differently and talk to the computer directly in in a language of mathematics and programming so let me show you what I’m really mean with making images with mathematics by going to this website shader TOCOM which is online and free and available for everyone and you can use any browser to to navigate to it I’m using Internet Explorer because I like it a lot it’s it works very well it’s very slim and it renders beautifully but you can use anything you want you can’t use Google Chrome you can use Firefox anything so first of all everything you see it’s happening as I talk or in or maybe I’m talking as you see things happening in the screen as I’m typing so that means I will be typing slower than I would normally do and that I will be talking weird probably and doing weird poses and well it’s alright I will do my best so what I want to show is at least for now that we have code here on the right side of the screen and then we have an image on the left and basically the image is made through this code basically this code is telling the computer how to colorize the pixels that make this image of which we have a million or something we have like a million pixels here and in this case I’m telling the computer to colorize all the pixels in black so these three numbers 0.0 0.0 and 0.0 these are the red green and blue components of the pixels which I can increase slowly by introducing some red colors up to 1.0 which is the maximum amount of red you can have and then if I add some green then I get yellow and I can add some blue and so on so basically this is a way to put colors in the screen so you see that I’m typing and sometimes things change in the screen on the left that’s because I’m pressing alt enter which is my shortcut for compiling compiling means taking the code giving it to the computer so that the computer reads the code understands it and executes or does what the code is telling the computer to do in this case putting the colors in orange and every time I compile you see this red and green border around the text area and that’s a visual indicator for you that I am compiling and sending code to the computer so so far so good we have constant colors in the screen that’s great the interesting part happens though when you start creating patterns and the simplest pattern is a horizontal gradient so in this case I am taking the color and multiplying it or modulating it with the X component of my pixel so pixels have coordinates in the screen all the pixels to the left half an x-coordinate of 0 all the pixels to the right half an x coordinate of 1 things in between have coordinates point one point two point three point four point six up to one point zero and it’s the same vertically if I change the Y IP dot Y then I have black in the bottom and full original oranges in the top part so I can create not only vertical and horizontal gradients I can create combinations like diagonal but I’m going to do that today I’m going to use not coordinates but distances to compute gradients in this case let me try this I’m taking the distance between every pixel P in the screen and one particular constant pixel which is at coordinates 0.5 0.5 which is the center of the screen so basically the farther a pixel is from the center of the screen the darker it gets and the further it is the brighter up to a point where it becomes the original orange color that we have there so let me quickly take this whole value which is actually it is a vector and rename it to Q so I can reduce it later you will see but for now basically this is just taking measurements of distance from every pixel to the center and this is great but we don’t have much artistic control over that gradient unless we start changing the mathematics and that’s what we are going to do right now and one way to do it is to use a smooth step function and without going to the into the details of how it works internally this is a function that by the way most programming languages which do graphics will have for you most languages will have this function already there for you but basically it takes two numbers in this case point to 1.3 and it takes the distance in this case and what it will do is that all the distances of all the pixels that are less than point two will become black pixels and everything that is farther than point three units from the center of the screen will become the full orange color that we chose in the beginning I can change those two numbers to a bigger value there for example or to a smaller one so basically I can change the inner and outer outer radius of that color ramp you can see that everything belonged one becomes black everything above a point two becomes orange and then you have that transition there between point one and point two this and distances I’m gonna put that those values in a variable instead because that’s a more convenient way to start tweaking the formula so again that number basically is gonna change the size of the circle let’s make it point two now we already have seen lands or distances and smooth steps there is another very useful tool which is the cosine and this is a function that basically makes things go up and down content okay let me let me show it to you if we go to Google and we type cosine this is what it looks like these Google Images so you can see a cosine is a function that stays starts up and it goes down and then it goes up again and then down again and it does it forever to infinity and there are some mathematical properties like at the distance between two peaks it’s always the same it’s a six point twenty eight thirty one units which is two pi and then the disorder properties such as that the height and the minimum values are always at plus one and negative one so it never goes beyond one or below negative one anyway there is properties to it which we can or we can use from notes but in this case I’m going to use the cosine to create this shape and so this is what we got before I added the cosine and I got that and that’s because indeed here you can see think going up and down up and down up and down exactly like in the cosine and what we did is to take the point two radius and increase it by point one or decrease it by point one depending on the cosine being up or down in its face but yeah that point two radius will become point three and point one along the circumference of the circle so things like the valleys here all these points are at point one units from the center of the star if we can call this thing a star and then the peaks are at point 3 units point two plus point one that’s point three so that’s point three units that’s point one and that’s thanks to the cosine which makes things go up and down in this case the radius of the circle we do have so at that point one here is the amplitude is the size of the peaks if we make it a smaller like 0.5 the peaks become smaller at some point if we make it really small you cannot see them anymore and you just see the original circle but there is their funny magic spot where we can stop changing values and leave it like that there is this other number here that 10 which it’s called frequency and it pretty much well it does determine how many of these spikes you have or or Peaks we do have exactly ten of them because I have a ten here if I change this to a four then we will have four of those spikes five or six or sixty six or twenty six or ten whatever let’s say at ten and the last component of the cosine is the variable this function here this expression which I won’t explain now basically it’s an arc tangent which means we are it’s measuring the position of every pixel around the circle so things in the top start at zero and then they become one point five and three point one and so on until six point twenty seven or something but basically it’s giving you a measure along the circle and by using that to feed the cosine we get the spikes of the cosine along the circle as well anyway we won’t stop there too much I just want to see you that there are properties such as amplitudes which change sizes there and there are other numbers such as frequencies which change the repetition of things how many of those repetitions we have and so on however despite being on or despite having all these properties which control sizes and frequencies and knowing them because the trick is that after some time playing with this way of doing images you learn what properties do what things to the images and which mathematical expressions to change in order to get specific types of image or shapes so you do learn all those things and you create a set of tools a toolbox that you can use however I think it’s fun and nice and convenient to sometimes experiment and try things a bit randomly without any particular purpose and just type things and see what happens because that way you discover many things it’s like how kids learn things I guess like play they break and they try again and and that’s how they learn how things work so what I did the other day when I was doing that presentation was to add X to the x coordinate of the pixel inside the cosine which was something that I didn’t really know in advance what it would do but I believe I added a big number there to it maybe 20 so basically by adding X to the face of the cosine I could bend eternal that you can bend the spikes which is great because I think I added some other constant phase there you can see that I can even rotate the spikes by adding different phases to the cosine and then if you see this image you can think oh maybe this looks like the canopy of a palm tree so I said yeah let’s make a let’s make up a palm tree and see we can hit the look of a palm tree just with adding more formulas we are seeing that the more code and formulas I add the more complex the circle the image becomes like we had one line of code in the beginning and the image was super simple just flat orange color everywhere we added a couple of smooth tips and lens and we had a circle and now we are lit more stuff to it and more stuff happen to the image as well so there’s a direct translation between code complexity and image complexity so if we want more detail more complexity to the image we have to throw more code and I’m gonna I’m going to use the same trick as I did for the canopy and I’m going to use it I’m gonna do the same thing for the trunk and hopefully give something that looks like a palm tree in this case however instead of taking Euclidean distances or this tenses of pixels to a given point which it was the center of the tree in this case I’m going to take only horizontal distances and it means I’m going to take the X component of the pixel and threshold it with a smooth step such that any point which is closer than point zero one units from the center of the tree that will become black so let me show you what happens if I make this member bigger then more and more pixels become black because they fall between within that band of 0.05 pixels that I’m selecting with this step function and I’m using an ABS absolute value because I want both pixels to the right of the center of the tree as well as pixels to the left relative to the center of the tree so let’s you know let’s pick a value of point 15 okay that’s a good start perhaps and and this one’s smaller so the transition becomes sharper maybe oops this is the beginning we don’t have kind of a trunk there but we don’t have this area which we don’t want to have a trunk in like we shouldn’t have anything there so there are tools as well to erase things and when you are in Photoshop or in any drawing application you have the erase button in this case we have a mathematical evals delete function which is the over operator which I’m not going to I’m not going to explain but basically it allows me to remove so I just removed the up part and what it is doing is doing again a selection so let’s say I’m selecting now every pixel which is above the center of the tree or the canopy and which is point four units above it so everything above farther than point four it’s erased and I can show you that by changing from point four two point three and then I’m erasing more stuff and if I make it point to it really raised even more stuff I can make the up sorry the erase the erasing prop property I can make it smooth like I can slowly make things disappear and fade out but in this case I really want everything to quickly disappear as long as it is right at the height of the canopy so we do have a canopy and a trunk we have a tree a palm tree kind of let’s move it a bit to the one side of the screen and this is now when it becomes very convenient to have Q as named coordinate system because as you can see all the formulas here which define the canopy and now so that’s the canopy due to the trunk they all use Q which means by changing Q I can move the whole tree as a whole and very easy I can very easily position it anywhere okay so that trunk it’s alright but it’s not quite like a real pine tree normally pine trees are more like Bend or they don’t have they never grow perfectly vertical right so let’s add a sine wave in this case for example to bend the trunk and that’s pretty too much so so by the way a sine wave it’s something that looks pretty much like a cosine wave so you can see there like I can increase the frequency again and that increases the ups and downs of the wave and this one is the amplitude with mix allows me to change indeed how does things look like so I’m going to I don’t know let’s try oh look at that that looks pretty cool there is this positive plus sign which I can make negative and that indeed moves the trunk to the other side so positive and negative and just get more like that 25 that’s pretty nice I think what about moving the pantry a bit more to the right 34 okay wait there so we can add more detail to the image for example I don’t like how smooth the trunk is that silhouette you would never have that in nature right you would see broken things so let’s change it by adding again a cosine cosine is your friend when you want to add variations of things like in this case you can see ink and add more and more of those things like a hundred hundred twenty whatever and this is the amplitude and same as before I can change how much influence the cosine has in the overall shape so okay what about that point zero zero two and a hundred twenty why not so that adds some nice variation what else we can add when I’m going to try to ground the palm tree to the floor to the bottom of the image and I’m going to be using an exponential and if we go to Google Images I can probably quickly find what an exponential looks like there and that will show you what it looks like which is it is something that starts low in the bottom and in the ground and then Europe goes up so this is nice it’s kind of the way to connect the tree matching the tree somewhere up there and this is the bottom of the trunk and the triangle connects to the ground in a nice way smooth way so let’s use an exponential and I’m going to match alright so that’s an exponential you can see something that starts down and then you rose up and then this number here I don’t know what you could call it but maybe the fall off or I don’t know the attenuation it allows you to shape that connection between the ground and the pantry so now we have to choose something that looks beautiful and for that you need to have a good eye which I don’t so my trick is to have good enough I to kind of avoid ugly things so as long as you have an eye for ugliness you are good because then you can avoid it and if your images are below magic threshold of ugliness people will like them so I don’t know yes bear perhaps so that’s our pantry in a nice orange background well nice that okay let’s change the background and make it in fact a sunset so we can do that by making a color gray gradient again so instead of making a gradient from black to orange as we did right in the beginning of the video I’m going to make a gradient from orange to yellow from tej yes and I’m going to be using the white pixel coordinates to create a gradient so things in the bottom will be this orange color and the color will transition from that orange to this yellow as the coordinates of the pixels increase vertically so yeah the yellow will take over as Y becomes 1 and that’s why B goes down 2.9 0.0 0.8 and point 1 and 0 to the point and print 0 in the end it will be the orange color that is colorizing your pixels and that’s nice but if we want to make it look more like like a sunset then we probably want to push the orange color down further down in the horizon so it’s a good time to show what a square roots can do to help us on that so if I add a square root here obscurity of pitted Y that is indeed pushing the the oranges down in the screen and that’s because so the coordinates go from 0 to 0 to 1 from 0 in the bottom to one making a square root of a number which is between 0 and 1 makes the number bigger like point 5 will become 0.707 I think and then point 3 will become I don’t know point 6 or something so it makes the numbers bigger and bigger in this case means more yellow because big numbers will increase the amount of yellow in the screen and small numbers will be more red so by adding a square root we have more yellows but the trick is that square root doesn’t change 0 like as I said point 5 will become point 71 but 0 the square root of 0 still is 0 so that means the red would always stick there it will never disappear completely even if the whole range of colors offsets to the yellows still there will be some amount of Reds in the bottom so that means that we can create more yellow pixels in the sky while still having the Reds where they should which is around zero so there you can see the difference of without square root and with a square root so I think that’s that’s pretty much everything I want to show in this video and I hope it can communicate the idea that you can do drawings by using mathematical concepts which you have to code because the way you tell the computer how to do the mathematics is by programming and coding but in essence this is just mathematics going on so we saw some of the tools that you can use to draw the different brushes you can use which are square roots to shape transitions and we saw cosines to create absent downs and variations we saw worse potentials which create these kind of nice curves which have a smooth step for tress holding absolute values for symmetries mix for mixing colors so yeah we saw like five or six different tools there are there are around twenty very very common tools or vocabulary that you can use and pretty much by using those you can create as images as complex as you want them to be like now we were typing for I don’t know three four minutes and we typed sixteen lines of code and you saw the more lines of code the more detail we had more elements but if you do that not for four minutes but for four months and not with sixteen lines but with pages and pages of code you can quickly get very complex and detailed images with a lot of colors and texture and movement but yeah but hopefully this showed to you the very basics so I hope you enjoyed and thanks for watching


  • seeme00 says:

    That's very nice, thank you !

  • Anton Kudin says:

    Next: we draw a 3d fractal ray traced environment 🙂

  • David Roman says:

    It's a great introduction, you should do more video like this. 🙂

  • abdabd says:

    Really cool! For who was the original presentation?

  • Chris Little says:

    Looking forward to more of these!

  • Chris Friesen says:

    Thank you for sharing 🙂

  • Jimmy Gunawan says:

    Thanks for this one, it's really the love and care explanation I needed. I was mind blown by the rest of video tutorials and the work at Shadertoy.

  • omgomgomgd says:

    Impressive, but why are you using internet exploder?
    One of the browsers I'd say does not work very well with anything.

  • Dan Casas says:

    This is a great introduction Iñigo. We want more of this!

  • Marek Marecki says:

    i deleted your bug shaders man

  • Marek Marecki says:

    if you find more tell me i will delete everything i don't want be in trouble ok peace V

  • Marek Marecki says:

    i have like 1500 videos it's very hard to find 🙁

  • Manolo Padron Martinez says:

    Awesome!!! Thanks IQ

  • sykskysyk says:

    IE11 is great, but I'm having a lot of trouble getting it to work with Shadertoy…

  • viralshield says:

  • chrystie lira says:

    tnx a lot

  • patinoart says:

    16 lines of code and I'm just wowed by the result. Great tutorial with a lot of clear explanations. Thanks!

  • aik6980 says:

    Thanks IQ! I'm your big fan of your site

  • Joshua Koo says:

    your math, creativity and graphics programming abilities will improve after watching this…

  • Leonardo Zimmerman says:

    Very useful, thanks for sharing!

  • troxmo says:

    This seems to be the only basic shadertoy-tutorial I could find. Really cool! Reminds me of my first java classes in my first semesters when we made our own small image manipulation program. I really would love to see more of this, I think it's one of the best ways to learn basic coding and expression of mathematical concepts in a visual way 🙂

  • polarbear242 says:

    This is such bullshit. I've been trying to learn how to program shaders for over a month using all kinds of tools such as Shader Toy, GLSL Sandbox, Shadr, Quartz Composer, etc. and I just can't figure shit out cause whenever I find a tutorial and I try the sample codes THEY DON'T FUCKING WORK! 

    Just trying the example in the beginning to create the gradients in ShaderToy I get these 2 compiling  errors "main : function already has a body" and "mainImage : no matching overloaded function found". For some reason it does not like this line 

    vec2 p = gl_FragCoord.xy / iResolution.xy;

    And I typed in the same code he's typing and I get this. I went ahead and tried the same code in the GLSL Sandbox editor and that compiler has an issue with the same line above.

    What the fuck am I doing wrong here? Seriously, WTF? Did some GLSL functions get deprecated since this video was made?

    God I'm so fucking frustrated with this shit.

  • Elbow Noodle says:

    This is one of the most interesting instructional videos I've seen in years. Thanks!

  • madie Braswell says:

    would love more of these! 🙂

  • Sergio Fernandez says:

    Thanks for the tutorial. This reminds me starting off with Turbo Pascal and the Denthor's VGA tutorials 20 years ago, ah ah. You have a new subscriber.

  • MinNyeAccount says:

    Magical threshold of ugliness 😀

  • ollj oh says:

    i found shadertoy to work much better in chrome than in firefox. also worked much better after updating from win7 sp1 to the actual updates as of 2016, which is just 270 updates that take only 2 hours. i just formatted a lot of pcs from 2007 and dared to benchmark and stress test them on webgl with shadertoy.

  • kushups says:

    Would've liked to see examples at the end of some complex images created with pages of code, your picture looked nice with just a few lines. Nonetheless, this was a great, informative video! Thanks a lot for sharing!

  • JG says:

    Was the internet explorer comment at the beginning an inside joke I'm missing out on?

  • Maxime Dupart says:

    "magic threshold of ugliness" made my day haha! 🙂

  • Filip Dupanović says:

    Beautiful! Just the kind of introduction to Shader Toy I needed!

  • Xeronimo74 says:

    Thanks a lot for this tutorial! It's fascinating way to draw but also a very unusual one that one needs to wrap one's head around …

  • Abdullah Alotaibi says:

    Great videos. Please do more for us 🙂

  • Timothy Arterbury says:

    Great explanation! Thanks so much.

  • Rodrigo Lira says:

    Please keep variable names above FOUR letters. PLEASE, I can never understand your source code, why even share it!!! p? p what? q what? r what? Of course I can infer and rename in my own implementation to study them, I have common sense, but its something that makes learning so much more complicated!!!!!!
    Please 🙁

  • CFA44 ACE PILOT says:

    wow 16 lines…

  • Ponniah K says:

    nice video.. does shadertoy developed in three.js library ?

  • John Lynch says:

    Great teaching, thanks @iquilezles! I made a version in 25 different states:

  • Alain Barrios says:

    Are you magician? using maths for draw omg! i'm newbie in it

  • TommyTom says:

    I really enjoy this but is it really worth learning? Like, if I were to make a 2D game with palm trees in the background would it be better to use code or an image to display the tree? Wouldn't the code slow down the program? conversely the image would bulk the program, taking more space…. What is better? I suppose this becomes useful when creating dynamic drawings/systems, but My question is about this specific example

Leave a Reply

Your email address will not be published. Required fields are marked *