I’m at the “Mr. Miyagi's fence lesson.”
I think I’ll spend some time here to experiment a bit. desmos.com/calculator 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:
abs() will return the absolute value of a value. It basically folds the graph along the x axis.
fract() will extract the fractional value of the function.
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.