I have a shader that creates a grid of squares where the lowest corner is black and the top right corner is blue, everything in between is a combination of floor functions. What I would like to do is that the square move in the x axis with time, and that the colors of the next square goes from black to blue. The example can be found here:
https://editor.p5js.org/ekageyama/sketches/IIVqab1QH
Here is the frag part that is causing me problems:
precision mediump float;
varying vec2 pos;
uniform float millis;
void main() {
float squareNumber = 10.;
float millisNorm = millis / 10000.;
float tmp = (floor(abs(sin(millisNorm + pos.x)) * squareNumber) + floor(pos.y * squareNumber)) / (2. * squareNumber);
vec2 newPos = vec2(tmp);
gl_FragColor = vec4(0., 0., tmp, 0.);
}
I have been trying to figure out why this is not working, the tiles do move in the correct direction, but they get elongated when reaching towards one and they stop being square.
I suspect the problem is here floor(abs(sin(millisNorm + pos.x)) * squareNumber)
This does almost what I want, but it bounces back instead of continue moving to the right float tmp = (floor(abs(pos.x + abs(sin(millisNorm))) * squareNumber) + floor(pos.y * squareNumber)) / (2. * squareNumber);
The sine function is the obvious candidate here, but I dont know how or where it should be put to generate a whole image translation. Any help would be very appreciated.
You seem to be using sin just to keep the value from zero to one? But that provides a curving value, not a linear value, so multiplying that by x will provide non linear results, which is your stretching.
If you change that sin() to fract() so that it loops back to 0.0 as soon as it goes over 1.0, I think that’s closer to what you want:
float tmp = (
floor(abs(fract(millisNorm + pos.x)) * squareNumber) +
floor(pos.y * squareNumber)
) / (2. * squareNumber);