BoS - Shaping Functions

18th Nov, 2021

I’m at the “Mr. Miyagi's fence lesson.”

I think I’ll spend some time here to experiment a bit. has an interactive graph with example formulas. I want to see how many I can port to GLSL before continuing.

Trying a standard parabola:

I'm only seeing the positive quadrant though. Let's try to visualize all quadrants by moving the origin to the center.

Currently (0,0) is on the bottom left. I want it to be on the center (0.5, 0.5).

By multiplying the coordinates on the screen by (-0.5, -0.5) with the line st-=vec2(0.5,0.5);, I can have the bottom left corner have coordinates (-0.5, -0.5), and by extension, (0,0) is now in the center of the screen:

Further down the page, there’s a bit about manipulating a sine wave. This is basic stuff I’ve learned in high school, but I barely remember it so here’s a more thorough exploration of the subject:

The graph above is a line plotting the function y = sin(x) with the following code:

float motion = u_time; //moving the line left or right
float phase = 15.0; //distance between the peaks. Or how often it repeats. Bigger = closer together.
float displacement = 0.5; //movement up or down.
float amplitude = 0.2; //height of the wave.
vec2 line = vec2(st.y, sin(st.x * phase + motion) * amplitude + displacement);

(The values above were chosen to fit the graph within this tiny window.)

In this example, motion is already animated by “u_time”. Here’s how the rest would look animated using sin(u_time) + some adjustments:


phase = sin(u_time) * 10.0;


displacement = sin(u_time) * 0.5 + 0.5;


amplitude = sin(u_time) * 0.2;

That’s it for the sine wave itself, but there’s still some more cool functions we can apply to the wave:

Absolute value or abs():

abs() will return the absolute value of a value. It basically folds the graph along the x axis.

Fractional value or fract()

fract() will extract the fractional value of the function.

ceil() and floor()

ceil() "returns a value equal to the nearest integer that is greater than or equal to x." - It rounds up.

In the graph it looks like it's shifted up from the X axis, but it's actually only giving us values of either 0 or 1, because it's the ceil() of a sine wave.

floor() "returns a value equal to the nearest integer that is less than or equal to x." - It down up.

Again, it's not shifted down but actually just giving either 0 or -1 values.

And if we add the two, we get a wave of -1 and 1 values.

I think this is enough for one post, and I'm not even at the end of the BoS article.