You can do this with a triangle strip but it requires duplicate vertices and, if you're doing this often, it may be better to just use separate triangles.
e.g.
I'll assume you have 8 vertices in the example and they are bottom0, top0, bottom1, top1, bottom2, top2, bottom3, top3.
You can use (12 vertices) bottom0, top0, bottom1, top1, top1, bottom1, top2, bottom2, bottom2, top3, bottom3.
This allows change of colour over the doubled vertices.
Note that this works because the doubled vertex as well as the previous (or next) vertex create an infinitely thin triangle so those two triangles (where the colour transitions happen) are invisible.
A possibly simpler versionIf you need each triangle pair to be the same direction then you can just duplicate the 2 vertices that represent the edge.
This works because, again, you're "drawing invisible lines".
That would be (12 vertices) bottom0, top0, bottom1, top1, bottom1, top1, bottom2, top2, bottom2, top2, bottom3, top3.
This could be more simple as you're still following the same bottom-to-top and left-to-right formula and you it looks a bit clearer in the code as you're effectively separating the vertices into groups of 4 (per quad).
Here's an image of all three of those examples with your original being the top one (number 1):
sf::VertexArray triangleStrip1{};
triangleStrip1.setPrimitiveType(sf::PrimitiveType::TriangleStrip);
triangleStrip1.resize(8u);
triangleStrip1[0u].position = { width * 0.f, bottom };
triangleStrip1[0u].color = colorA;
triangleStrip1[1u].position = { width * 0.f, top };
triangleStrip1[1u].color = colorA;
triangleStrip1[2u].position = { width * 1.f, bottom };
triangleStrip1[2u].color = colorA;
triangleStrip1[3u].position = { width * 1.f, top };
triangleStrip1[3u].color = colorA;
triangleStrip1[4u].position = { width * 2.f, bottom };
triangleStrip1[4u].color = colorB;
triangleStrip1[5u].position = { width * 2.f, top };
triangleStrip1[5u].color = colorB;
triangleStrip1[6u].position = { width * 3.f, bottom };
triangleStrip1[6u].color = colorA;
triangleStrip1[7u].position = { width * 3.f, top };
triangleStrip1[7u].color = colorA;
sf::VertexArray triangleStrip2{};
triangleStrip2.setPrimitiveType(sf::PrimitiveType::TriangleStrip);
triangleStrip2.resize(12u);
triangleStrip2[0u].position = { width * 0.f, bottom };
triangleStrip2[0u].color = colorA;
triangleStrip2[1u].position = { width * 0.f, top };
triangleStrip2[1u].color = colorA;
triangleStrip2[2u].position = { width * 1.f, bottom };
triangleStrip2[2u].color = colorA;
triangleStrip2[3u].position = { width * 1.f, top };
triangleStrip2[3u].color = colorA;
triangleStrip2[4u].position = { width * 1.f, top };
triangleStrip2[4u].color = colorB;
triangleStrip2[5u].position = { width * 1.f, bottom };
triangleStrip2[5u].color = colorB;
triangleStrip2[6u].position = { width * 2.f, top };
triangleStrip2[6u].color = colorB;
triangleStrip2[7u].position = { width * 2.f, bottom };
triangleStrip2[7u].color = colorB;
triangleStrip2[8u].position = { width * 2.f, bottom };
triangleStrip2[8u].color = colorA;
triangleStrip2[9u].position = { width * 2.f, top };
triangleStrip2[9u].color = colorA;
triangleStrip2[10u].position = { width * 3.f, bottom };
triangleStrip2[10u].color = colorA;
triangleStrip2[11u].position = { width * 3.f, top };
triangleStrip2[11u].color = colorA;
sf::VertexArray triangleStrip3{};
triangleStrip3.setPrimitiveType(sf::PrimitiveType::TriangleStrip);
triangleStrip3.resize(12u);
triangleStrip3[0u].position = { width * 0.f, bottom };
triangleStrip3[0u].color = colorA;
triangleStrip3[1u].position = { width * 0.f, top };
triangleStrip3[1u].color = colorA;
triangleStrip3[2u].position = { width * 1.f, bottom };
triangleStrip3[2u].color = colorA;
triangleStrip3[3u].position = { width * 1.f, top };
triangleStrip3[3u].color = colorA;
triangleStrip3[4u].position = { width * 1.f, bottom };
triangleStrip3[4u].color = colorB;
triangleStrip3[5u].position = { width * 1.f, top };
triangleStrip3[5u].color = colorB;
triangleStrip3[6u].position = { width * 2.f, bottom };
triangleStrip3[6u].color = colorB;
triangleStrip3[7u].position = { width * 2.f, top };
triangleStrip3[7u].color = colorB;
triangleStrip3[8u].position = { width * 2.f, bottom };
triangleStrip3[8u].color = colorA;
triangleStrip3[9u].position = { width * 2.f, top };
triangleStrip3[9u].color = colorA;
triangleStrip3[10u].position = { width * 3.f, bottom };
triangleStrip3[10u].color = colorA;
triangleStrip3[11u].position = { width * 3.f, top };
triangleStrip3[11u].color = colorA;
Note that I set each vertex explicitly so it you could see that. However, it is pretty simple to write an algorithm to set them all automatically in a loop.
Show Posts
