The Furry Forums

Furry Chat => General => Topic started by: anoni on April 21, 2018, 06:04:59 AM

Title: Visualizing Mathematical Equations
Post by: anoni on April 21, 2018, 06:04:59 AM
So this was actually something I did a little while ago, but thought I'd share with you guys. Basically, inspired by a 3blue1brown video, I decided to create a program that visualizes complex equations. I thought I'd share some of the pretty pictures that get generated and get you guys to suggest more equations to visualize.

In the spoiler tags is an explanation of how the visualization works. If you just want to see some pretty pictures then you can skip it, but if you want to understand the pictures this is important!
So how does this visualizer work. First of all, the equations being visualized are complex equations, this means they take in two coordinates for an input and return two coordinates for an output. The x coordinate, or horizontal axis, represents "real" numbers and the y coordinate, or vertical axis, represents imaginary numbers. Basically what this means is the functions that are being visualized is simply a mapping of two coordinates to another two coordinates.

For notation purposes we will use three letters to represent the output.
x will represent the real component (horizontal)
y will represent the imaginary component (vertical)
z will represent the entire complex number (x + iy), both vertical and horizontal.

Thus the equation f(z) = z is the same as the equation f(x + iy) = x + iy.

Now the visualizer works like this: Map the real and complex coordinates to horizontal and vertical pixels on the screen. Then colour the pixel a certain colour based on its position. Then compute the function for each pixel, preserve the colour, and "move" the pixel to its right place, the transformation of colour represents how the function affects the input space.

When shading is used the "brightness" of the colour represents how far away from zero that colour is. So the darker the colour, the closer to zero, shading can kind of ruin the prettiness of images though so for a lot of pictures I remove shading.

The colour BLACK is used for exactly zero (with or without shading) or "too low to process" and the colour WHITE is used for infinity, -infinity, a division by zero or "too high to process".

Also due to a bug I didn't realize until after making all the pictures, the positive axis is actually flipped. Right means negative and Left means positive, really sorry about that and I'll fix it with future pictures.

So lets start with our first equation, the equation is:

f(z) = z

(https://i.imgur.com/Sgw5YMo.png)

EXPLANATION:
This picture is the identity function, that is no transformation has been applied. This shows what the colours represent. A pixel that is very red means that the pixel is a positive real number (like 1, 100 or etc, remember I accidentally flipped the sign so LEFT = positive). While a pixel that is more blue-green represents a negative real number (like -1, -100). A pixel that is yellow-green represents a positive complex number (like i, 10i) while a pixel that is magenta represents a negative complex number (like -i, etc). The center shows a black dot that represents "zero". So this is the "colour wheel" that represents the output space

f(z) = z^2
(https://i.imgur.com/Te5x5QX.png)

EXPLANATION:
This is the square function that just squares the complex number. You'll notice that the horizontal line is entirely red, this is because x^2 is always positive when x is a real number (but not necessarily when x is complex!). You'll also notice there are TWO rainbows now, instead of one, you'll start to see more of these rainbows soons!

f(z) = z^255
(https://i.imgur.com/HUWXl8y.jpg)
EXPLANATION:
Now we're raising to the power of 255. This is the limit where floating point numbers can actually represent huge numbers (here we're going from the range [-1..1] for both x and y axis). If you had enough spare time you could count the rainbows and notice there are exactly 255 rainbows here. You might also notice the big black spot, that spot is not ENTIRELY zero. But once you get close to zero, raising that number to a power makes it go EVEN CLOSER to zero, so that big black spot is where doubles no longer can compute numbers that small, so they just get read as zero.

f(z) = z^1000
(https://i.imgur.com/3aNhZtl.jpg)
EXPLANATION:
So now we've raised our equation to the 1,000 power. You will notice the WHITE surrounding the circle, like the black in our previous image this just represents where numbers have gotten too big to store in a double and so they're seen as "infinity". If you counted all the rainbows you'd see exactly 1,000. Something interesting is the strange artifacts that get displayed, I'm not sure if this is a characteristic of the equation or the compression that is being used, though the images are lossless png images so it shouldn't be the case that they create artifacts. Either way, something cool to see!

f(z) = z^(1/2)
(https://i.imgur.com/s8SzaNh.png)
EXPLANATION:
Ah the square root of z! You can notice there's a lot more of a positive influence with the square root than the identity function, negative complex numbers become positive real numbers so the image looks a lot more red. You'll also notice the start change of direction from the positive imaginary axis and the negative imaginary axis, the signs get sharply flipped so it creates a non-continuous divergence. Makes it look like a solid black line across the screen!

f(z) = (z + 1)*(z + i)*(z - 1)*(z - i)
(https://i.imgur.com/J1soMHp.png)
EXPLANATION:
Now we're getting to some fun stuff! This equation is designed in such a way that there is a root at 1, -1, i and -i, remember roots is when the output f(z) = 0. You can clearly see the four distinct roots checkering the colour wheel, and how each root creates its own rainbow. This is why z^1000 had 1000 rainbows, each point at which f(z) = 0 (even if the points are the same) creates their own distinct rainbow.


f(z) = product(product(z + k + ij, j =-5..5) , k =-5..5)
(https://i.imgur.com/w3Ag089.jpg)
EXPLANATION:
Now we took our above previous equation and took it to the extreme, this time 100 roots are plotted like a grid over the output space. You can once again see that each root creates its own rainbow, but a very interesting effect that I never thought would come out is how the rainbows seem to split at outer and outer roots. Very cool, at the end there are 100 rainbows.

f(z) = exp(1/z)
(https://i.imgur.com/xD3zeqy.jpg)
EXPLANATION:
I just like this image cause it looks cool. The black and white circles both represent extremely low and high numbers respectively, the very center creates a very strange singularity. The rainbows don't stop near the circle, there are actually an infinite number of rainbows in this image which is why the computer creates odd artifacts to represent it.

f(z) = exp(1/(z^100))
(https://i.imgur.com/bGsbt4D.png)
EXPLANATION:
We've taken our previous image and moved it to the extreme, now you can see there are a 100 white and blue stretched lines that represent the circles in the previous image, but stretched and duplicated. The surrounding space is entirely red, indicating that at high complex numbers, no matter the number, the result will always be positive. The rainbow disk surrounding the black and white lines is again, an infinite rainbow disk with countless rainbows getting more complex the closer you get to the white and black.

f(z) = z^z
(https://i.imgur.com/kgx9Jba.jpg)
EXPLANATION:
Another equation with an infinite number of rainbows except this time the rainbows get more numerous the further away from the origin you get. z^z is an extremely chaotic function for larger values so this is somewhat expected, but it makes a pretty image. Also notice the forking in the negative axis, looks really cool!

f(z) = z^sin(z)
(https://i.imgur.com/sQ2IQUE.jpg)
EXPLANATION:
Sin gives a periodicity to equations so its always nice to use, I'm very surprised by the black and white circles that surround the top and bottom. Apparently increasing the imaginary part of the equation causes the function to explode to insanely high, and low, values. You'll also notice there are more and more rainbows the closer you get to the black and white transitions, a pattern we see a lot in these pictures!


f(x + iy) = (log(x)/log(y))^z
(https://i.imgur.com/IgU0sjF.jpg)
EXPLANATION:
  Well cause.. why not! I really like the distortion feel here, nothing seems to line up and it just seems crazy. Nothing much to explain here.


If you have any more equations you want to see visualized feel free to share!
Title: Re: Visualizing Mathematical Equations
Post by: George on April 21, 2018, 06:29:42 AM
Might wanna move this to an art board
Title: Re: Visualizing Mathematical Equations
Post by: White Wolf Guardian on April 21, 2018, 11:24:46 AM
So, this is basically a derivative formula art generator. Looks like a cool program!

Here's a fractal generator that people can play with, not the same thing, but the visual effects are memorable:

https://anvaka.github.io/pplay/?tx=0&ty=0&scale=1 (https://anvaka.github.io/pplay/?tx=0&ty=0&scale=1)
Title: Re: Visualizing Mathematical Equations
Post by: anoni on April 21, 2018, 11:55:05 AM
Might wanna move this to an art board

I understand your concern, actually I wasn't exactly sure where this would belong so I did what you always do when you're unsure, I asked the rest of the staff team. General was the overall consensus so I placed it in general, artwork is mainly for hand drawn furry art and photos is for real life photos. If this isn't what the staff team is expecting though, I'm happy to remove it if there is a re-evaluation! The point is whether you're an admin, staff admin, moderator or member, the best thing to do when unsure of something is to ask!

This is very cool! I'd love to see the source code if possible. And I have a few functions I'm curious to see:

f(z) = z^tan(z)

f(x + iy) = 1 / (1/x + 1/y)

f(x + iy) = (x mod y) + e^z

f(x + iy) = factorial(x/2) + ln(z)

The last two are completely random but I'm curious to see what would come out XP

First equation: f(z) = z^(tan(z))
(https://i.imgur.com/pXewBon.jpg)

I like it, its very pretty. I expected the negative to be a bit more crazier than the positive, but I'm impressed quite impressed by the level of difference!

Second equation: f(x + iy) = 1(1/x + 1/y)
(https://i.imgur.com/DQdSsgZ.png)

This one is also cool cause it's the only equation so far that has non-continuous divergence on ALL axis, splitting the picture into 4 distinct quadrants. It's really cool!

Now the third equation was a little tricky, because modular arithmetic is not definitely defined for complex numbers! There's a thing called Gaussian integers but even then it's not well defined for the particular equation you're asking for. So I've had to change the equation slightly to make the modulus part on real numbers instead of complex numbers, the result is none-the-less interesting!

Third equation: f(x + iy) = (x mod |y|) + ez

(https://i.imgur.com/4V3aogM.png)

The fourth equation was also a little tricky but less so, I had to import a library to do a factorial over real numbers (its called the gamma function)

Equation 4: f(x + iy) = (x/2)! + ln(z)

(https://i.imgur.com/1h225Vj.png)



You were also interested in the source code, I've posted the four files onto paste bin. Note they are messy and uncommented (they're designed just for personal use) so be warned, there be dragons:

Main.cs: https://pastebin.com/qj1r1uTC (https://pastebin.com/qj1r1uTC)
ColourCalculator.cs: https://pastebin.com/iduE3pzC (https://pastebin.com/iduE3pzC)
Equation.cs: https://pastebin.com/0jLbn5AV (https://pastebin.com/0jLbn5AV)
ImageProcessor.cs: https://pastebin.com/6qYMvp9N (https://pastebin.com/6qYMvp9N)

So, this is basically a derivative formula art generator. Looks like a cool program!

Here's a fractal generator that people can play with, not the same thing, but the visual effects are memorable:

https://anvaka.github.io/pplay/?tx=0&ty=0&scale=1 (https://anvaka.github.io/pplay/?tx=0&ty=0&scale=1)


Mmhmm, actually if you look within the source code my visualizer is also capable of computing iterative functions like mandlebrot, so its capable of fractal generation as well.
Title: Re: Visualizing Mathematical Equations
Post by: Timmy Fox on April 21, 2018, 06:03:08 PM
Hmmm .... How about uh


f(z) = iz^(pi*e)

(I zee pie)
Title: Re: Visualizing Mathematical Equations
Post by: George on April 21, 2018, 09:39:43 PM
Might wanna move this to an art board

I understand your concern, actually I wasn't exactly sure where this would belong so I did what you always do when you're unsure, I asked the rest of the staff team. General was the overall consensus so I placed it in general, artwork is mainly for hand drawn furry art and photos is for real life photos. If this isn't what the staff team is expecting though, I'm happy to remove it if there is a re-evaluation! The point is whether you're an admin, staff admin, moderator or member, the best thing to do when unsure of something is to ask!


In case you missed it, that was a subtle compliment. :P
Title: Re: Visualizing Mathematical Equations
Post by: anoni on April 22, 2018, 07:07:51 AM
Hmmm .... How about uh


f(z) = iz^(pi*e)

(I zee pie)

Well this one should look somewhat similar to the other polynomial ones
(https://i.imgur.com/3EI0kK8.png)
And of course it does! But notice there are only Pi*e rainbows, one of the rainbows is incomplete!

...
In case you missed it, that was a subtle compliment. :P


Ah! Thank you then, I think the pictures do look really pretty
Title: Re: Visualizing Mathematical Equations
Post by: Oriaan on May 24, 2018, 09:01:54 PM
Woah,
I suck do math but this looks damn cool
Title: Re: Visualizing Mathematical Equations
Post by: Trixsie Vixen on June 01, 2018, 05:16:06 PM
I wish I could use this to help visualise music scales...

But I don't really understand it properly.
Title: Re: Visualizing Mathematical Equations
Post by: flurry on June 03, 2018, 08:39:19 PM
This is beautiful, visual mathematics is nice.

Title: Re: Visualizing Mathematical Equations
Post by: anoni on June 05, 2018, 10:54:10 AM
I wish I could use this to help visualise music scales...

But I don't really understand it properly.

Is there an equation that helps define visual scales? Are there multiple equations? (IF you have multiple I might be able to use some MATHE-MAGIC to turn them into single)
Title: Re: Visualizing Mathematical Equations
Post by: Trixsie Vixen on June 06, 2018, 06:55:10 AM
There's a couple of different ways to approach it. Either as a series of intervals or as 7 notes of 12 possible notes.


It's connected to that set of palindromic scales you helped with.


I could provide data in any format if you can give me an example to follow.