So, how did I get this swirling trippy background? Math of course! Before we can get to applying it, we need to quickly review complex numbers.



You may have herd that the square root of -1 is i. i is not a real number, and thus you can never simplify a+bi into a real number. We call numbers in the form a+bi, complex numbers. Also, for simplicity, we will use this form: a+bi == (a,b) = Z. This means that complex numbers look like 2D coordinates, and have clearly defined addition and multiplication functions Z*Y = (a+bi)* (c+di)



A cool thing about complex numbers, is they are a FIELD. What does that mean? Oversimplified, it means you can define versions of functions that work for real numbers. for example e^(a+bi) , log(a+bi) , cos(a+bi) are well defined and valid functions.



OK, so we have 2D coordinate like numbers, and functions that are smooth and nice. Now, if we use custom shaders, and change where the fragment shader samples a texture by using these functions, we can distort the image! Above I have examples of that, starting with the “unaltered“ image (z), and what happens if you apply a function like I described.



If you understand this, that’s basically it. Just make sure that after you apply the function, it will “modulus“ it back into range. this will make it look like the texture tiles when the function returns a value outside the texture. If you don’t understand this, that’s ok. you now know what concepts you need to look up if you want to make something like this for your game.

