I have several connected bars (like a circuit). Once a bar is filled, the next one should start filling up as well. The player drags their mouse in different directions (predefined by the circuit) and fills or depletes the bar based on the direction they move the cursor. Like the The Witness:
I figured out how to fill/animate one bar in GLSL:
1) I created a quad mesh
2) Animated the red color in the fragment shader.
...but not sure what I should do to fill several bars placed in different orientations. Or should I even use multiple quads or one single mesh that represents the circuit:
So far I thought of two different ways but not sure if they're good ideas:
a) Each bar is a game object sharing the same mesh (quad) and shader. Also keep a record of which bar is filled and which is one is the next to fill. This one idea I'm sure I can figure out how to code.
b) A circuit is one single mesh, but I map the color animations using the uv coordinates in the frag shader? I'm not sure how to do this one.
I don't need code, but just proper guidance Oh and I'll share how I animated that one bar, just in case there's a better way. Thanks all! I'm only using OpenGL 4. Not using a particular engine.
// How I animate one bar in the frag shader
void main () {
vec3 barColor = vec3(1.0, 0.0, 0.0);
// Vertical bar
if (uvs.x < 0.5) {
barColor.r = 0.0;
}
color = vec4(barColor, 1.0);
}