Math function visualization in a single row

Math function visualizations are a powerful tool in mathematics and data analysis. These visualizations help us understand how mathematical functions behave by representing their outputs on a grid-like plane. Each point on the grid corresponds to a set of input values, and the function's output is depicted as color, height, or contour lines, allowing us to see patterns, relationships, and changes in the function's behavior. Whether studying simple linear equations or complex multidimensional functions, 1D and 2D grid visualizations provide valuable insights, aiding in problem-solving, optimization, and decision-making.
We start simple. We focus on a single row of tiles (a grid of dimensions n,1) so we can use only the x axis of each tile. Each tile has two main forms of positional information in 2D systems, known as x and y. The position in x of a tile is mapped using a function f(x) with range 0 - 255, because that is the range that any color channel (R,G,B) can take. The value f(x) is transform into color.


The parameters of the Algorithm

  • RES: int - Size of each tile
  • DIMS: (int,int=1) - Number of columns and rows that make the program
  • SCREEN: (int,int) - Dimensions of the screen given as a width and height in pixels
  • TILE: Tile() - Basic unit of information in the program
  • TILEROW: [TILE, ..., n=DIMS[0]] - 1D array of TILE
# MODULES
import pygame
import math


# DD.

RES = 4
DIMS = (250, 1)
SCREEN = (DIMS[0]*RES, DIMS[1]*RES*100)
display = pygame.display.set_mode(SCREEN)

# DD. TILE
# tile = Tile()
# interp. a tile in a one row system


class Tile:
    def __init__(self, c, r):
        self.c = c
        self.r = r
        self.x = self.c * RES
        self.y = self.r * RES
        self.rect = pygame.Rect(self.x, self.y, RES, RES * 100)
        self.color = "black"

    def draw(self):
        pygame.draw.rect(display, self.color, self.rect)


# DD. TILEROW
# tileRow = [TILE, ..., n=DIMS[0]]
# interp. the total number of tiles placed next to each other forming a row
tileRow = []
for c in range(DIMS[0]):
    tile = Tile(c, 0)
    tileRow.append(tile)

# TEMPLATE FOR TILEROW
# for tile in tileRow:
#   ... tile

The Algorithm

  • For TILE in TILEROW:
    • TILE color is f(x)

Let's implement this algorithm using Python! 
# MODULES
import pygame
import math


# DD.

RES = 4
DIMS = (250, 1)
SCREEN = (DIMS[0]*RES, DIMS[1]*RES*100)
display = pygame.display.set_mode(SCREEN)

# DD. TILE
# tile = Tile()
# interp. a tile in a one row system


class Tile:
    def __init__(self, c, r):
        self.c = c
        self.r = r
        self.x = self.c * RES
        self.y = self.r * RES
        self.rect = pygame.Rect(self.x, self.y, RES, RES * 100)
        self.color = "black"

    def draw(self):
        pygame.draw.rect(display, self.color, self.rect)


# DD. TILEROW
# tileRow = [TILE, ..., n=DIMS[0]]
# interp. the total number of tiles placed next to each other forming a row
tileRow = []
for c in range(DIMS[0]):
    tile = Tile(c, 0)
    tileRow.append(tile)

# TEMPLATE FOR TILEROW
# for tile in tileRow:
#   ... tile

# CODE


def draw():
    display.fill("green")
    for tile in tileRow:
        tile.draw()
    pygame.display.flip()


def fn0(x:float) -> float:
    return x % 255

def fn1(x:float) -> float:
    return (math.sin(x) + 1) * 127

def mapFromFn(tile,fn):
    value = fn(tile.x)
    return(int(value))

def update():
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()

    for tile in tileRow:
        c = mapFromFn(tile,fn1)
        tile.color = (c,c,c)


while True:
    draw()
    update()