Advice about math in GLSL

#1

Hi guys,

I’m a little bit frustrated and here is why.
I was reading an article and there was like an exercise about creating a colorful flag using the step function in GLSL, but I didn’t succeed to do it. The point is that I think I don’t know to do this because of graphs in math, polynomial functions or whatever is used. :slight_smile:
Also, let’s say that I want to create a nebula, or any shapes that I want (like the one in the attachment). I would like to know please, from where I have to start with the math to understand how I can create something that I want, any shape etc.

I hope you will guide me through this step and let me thank you in advance!

#2

I would like to know please, from where I have to start with the math to understand how I can create something that I want, any shape etc.

I am not sure what you want to know. Do you just want to modify a mesh? Do you want to create a mesh of arbitrary shape in your program? Do you just want to to create a picture that looks like the image you posted?

#3

Hi,

Thank you for your reply.
My goal is to create procedural textures, not meshes, for example like the one in the picture. When I said a colorful flag, I meant again to texture/picture. :slight_smile:

Regards!

#4

This is basically just evaluating functions with 2 or more parameters. Problem is that there is an infinite number of functions that you can use for that. Maybe there are some collections of useful functions for nice visual effects, but I don’t know one. You can also start experimenting yourself. Just an example of what you can do:

Lets take the function f(x,y,t) = x + (sin(y * 3.14 + t) + 1) / 2. x and y are your spatial coordinates and t is the time. The tex-coordinates are in the range 0 to 1. Then you use the texture coordinates as x and y and pass t as uniform to the shader. Use the function result in all of the fragment shaders output colors. The result you should get is that you see some kind of moving wave that fades into white along the x axis. Why? —> Color values are clamped into the range [0,1]. The sin function is limited to [-1,1]. To get it into the range [0,1] we add 1 and devide by 2. Now we got a wave like color pattern in the y direction. If you update t every render pass the wave starts moving. Make sure the passed time value is scaled to seconds otherwise the wave would be so fast that its just flickering. Now you also add x to your function. If you choose your tex-coordinates to be in the range [0,1] it would just give you an image that fades from black to white in the x direction. Since color values are always clamped to the range [0,1] the sin function has no effect where the x coordinate is already 1.

So basically you can take some functions you know and start combining them. Once you get a feeling for that it is just about knowing enough functions, or look them up if you find a good source.

#5

Thank you very much for your response. When I will have time, I will try what you told me. :slight_smile:

Have a nice day!