# How to bend a 2D rectangle in an animation?

It is something done often in 3D but I've never heard of it in 2D. I want to bend a 2D rectangle looking a bit like that:

I've seen people adding lots of vertex around knees and elbows of 3D models for that purpose. Should I make my 2D rectangle be lots of smaller triangles in order to bend it, just like in 3D? I feel like it's overkill just to bend a rectangle. Is there a better way to do this? I'm using LibGDX. I would like the rectangle to stay proportioned. Is there common algorithms to do that?

• The vertex solution should work perfectly in this case Commented Aug 6, 2017 at 11:51

# Background info on rendering textured polygons using the GPU

The approach you mention, adding extra vertices is the correct one. In 3D animation, it's the vertices of a mesh that are adjusted during animation. Your GPU simply takes these vertices and their connectivity (e.g. to interpret the verts as a list of triangles) to render textured polygons on screen. The GPU creates these triangles by linearly connecting the vertices.

In your example image, the rectangle can be drawn just fine using two triangles. The bended rectangle cannot be drawn using only 2 triangles, as there is no way to tell the GPU you want to connect the vertices using the curved lines you've drawn.

The reason your GPU can't draw curved triangles is optimization. GPU's are super optimized at one specific task: rasterizing triangles, at the cost of flexibility. If you were to render your rectangle using the CPU, you could implement your of rasterization algorithm that does allow polygons with curved lines. Here, you would use the CPU. CPU's aren't very optimized at anything, but they have a ton of flexiblity (aka. they can run a way bigger variety of operations).

# A similar problem: rendering curves and smooth surfaces

There actually exists a similar problem to the one you ask: rendering surfaces/curves not specified as a set of polygons. There are many ways to describe surfaces/curves that don't rely on polygons, e.g. implicit mathematical equations (e.g.: r^2 = (x - x1)^2 + (y - y1)^2, https://en.wikipedia.org/wiki/Implicit_surface), NURBS surfaces (https://en.wikipedia.org/wiki/Non-uniform_rational_B-spline), Bezier curves (https://en.wikipedia.org/wiki/B%C3%A9zier_curve), parametrized primitives (e.g. Circle(x=10,y=12,r=4)), ...

Let's say you want to render one of the above using the GPU's rasterization capabilities. The approach most graphics software uses is to simple create a polygonal mesh that approaches the "smooth" surface closely enough (https://en.wikipedia.org/wiki/Subdivision_surface). This "close enough" criterion can even depend on the distance to the camera, which is where "lodding" comes into play (https://en.wikipedia.org/wiki/Level_of_detail). So in case of a curve, you just render a lot of tiny straight line segments to get it to look smooth. In case of a a surface, you draw a lot of tiny triangles to make the surface look smooth.

So to get back to your problem, you probably want to add extra vertices indeed, so that the bended rectangle can be approached by a polygonal mesh. If you look at the image, you'll see it only has straight lines. By adding enough straight lines, it'll start to look like a smooth curve.

As you mentioned, it is for this exact same reason that artists add extra vertices to the knees of a character. It gives the knee some extra polygons to approach the smooth surface of a bended knee.

I added a lot of background info here, so you can understand the reason why the extra vertices are necessary. The big clue of the story is this: rendering using GPU rasterization is based on polygons with straight edges! It is exactly this inflexibility that makes GPU's lightning fast. GPU's can't really do a lot, but boy are they good at drawing polygons with straight edges.

# How others do it

A popular piece of software for animating 2D graphics with the bending behavior you described is Spine (http://esotericsoftware.com/). You can check out their video's to get a feel of how adding extra vertices works!

# Alternatives

As you'll understand from the above, the only away to avoid the extra polygons is to use a different method of rendering, e.g. raytracing using implicit equations for shapes. Or, you could develop your own algorithm. The downside, you won't be able to use the GPU's blazing fast rendering speed, because it known only one method: rasterization of polygons.