# Visualization of a Function Through Time

(This post demonstrates the math behind the creation of some unusual math art. I got the idea from this tumblr post which I don’t even think works like this. But it was the inspiration behind the pictures.)

Take this function: f(x) = x^2 + a*cos(ax). When you take values of a between 0 and 8 and back to 0, you get the following: I’d like to make an image that represents the entire family of this function. Problem one: the function values get pretty large in this window, so find the remainder of the function output after dividing by 5. Here’s the gif of that output: Problem two: How do we represent this in one static picture? If you take the first image (where a = 0) and take the function values from 0 to 5 and make the pixels for row 1 colored based on the function value (0 being black, and 5 being white), then you get this row of pixels (expanded to 20 pixels high for ease of viewing): So this row of pixels represents a = 0. If you set a to be 0 at the top of the picture, a to be 8 at the middle of the picture, and a to be back to 0 at the bottom of the picture, stitch all these lines together you get: Click on image for full 4k by 4k resolution.

Here’s another with the function y=(10a)/(1+x^2) with a going from 8 to 0 to 8. Click on image for full 4k by 4k resolution.

Here’s another with the function y=ceil(ax) – ax + floor(ax) with a going from 0 to 5 to 0. Click on image for full 4k by 4k resolution.

And lastly, here’s the last one, but colorized. The 0 to 255 now controls the hue of the color (with full saturation and balance, using HSB color). Click on image for full 4k by 4k resolution.

Here’s the code for those who are interested (or view it live on openprocessing)!

```int max_a;

float mod(float a, float b)
{
//desmos mod and processing mod act differently.
//desmos mod always returns a positive value
return (abs(a % b));
}

float func(float x, float a)
{
//type 1
max_a = 8;
return (mod(x*x - a * cos(a*x),5));

//type 2 this counts from a= 8 to 0 to 8
//max_a = 8;
//a = max_a - a;
//return (mod((10*a)/(1+x*x) ,5));

//type 3
//max_a = 5;
//return(mod(ceil(a*x)-a*x+floor(a*x) ,5));
}

void setup()
{
size(1000,1000);
colorMode(HSB,255);
int w,h;
float x,a,f,hue;
max_a = 5;
for (int i = 0; i < pixels.length; i++)
{
w = i % width;
h = int(i / width);

x = map(w,0,width,-6,6);

if (h < height/2)
{
a = map(h,0,height/2,0,max_a);
}
else
{
a = map(h,height/2,height,max_a,0);
}

f = func(x,a);
hue = map(f,0,5,0,255);

pixels[i] = color(hue,255,255);
}
updatePixels();
//save("type3c.png");
}
```

edit 10/16/15:
Here are a couple more pictures for you (the code on openprocessing is up to date with these new types):  ## 3 thoughts on “Visualization of a Function Through Time”

1. Howard Phillips says:

I like these !
I guess that to incorporate time into the end result might just challenge my computer.

1. Dan says:

The good thing about computers: they don’t get bored and they are really really accurate.

2. Joshua says:

Sorry not to be very on-point, but the melting parabola in the f(x) = x^2 + a*cos(ax) family looks like a good intro to a math horror movie and the summary pic (your blah.png) is the movie monster (a child of Cthulu?) Other than the ominous curves, this graphic is an optical illusion where parts of the picture appear to move when they are in peripheral vision, making it seem like the image is getting closer.