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:

gifsmos

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:

gifsmos (1)

Problem two: How do we represent this in one static picture? If you take the first image (where a = 0)

2015-10-15_10h49_09

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):

blahfirstline

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:

smaller
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.

type2s
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.

type3s
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).
type3cs
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;
  loadPixels();
  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):
type5s

type4s

3 thoughts on “Visualization of a Function Through Time

  1. 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.

Leave a Reply

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