Tangents, and why they should be avoided (and how hard it is to avoid them)

A common term when discussing art and composition is 'Tangents'. These occur when masses or lines are grouped in a way that's visually confusing and hard to read. There are many great examples of tangents, and how to spot and avoid them around the place, but one of my goals is to be able to look at traditional technical artistic knowledge in the specific context of adventure games, because I think it helps to be able to see the problems directly in the medium you're interested in working in.

With that in mind, I've compiled a list of examples, with the goal of showing a variety of types. Something I want to stress is that tangents happen to everybody - I recall watching a lecture about composition during which the lecturer noticed a bad tangent in one of his examples, and had to laugh and say that he'd hoped to avoid any. They happen to everybody, particularly as compositions get more complex, and it's always worth double checking once you've got fresh eyes and stepped away from a finished piece for a while. They'll still slip through, if you're anything like me, but a double check can help to minimize them.

I've tried to make the tangents in these examples as clear as possible with the use of arrows, but towards the end of this post they grow quite numerous. It might be worth opening each image in a new tab, so you can see them at a larger size, and read along this way.

A great starting point is the banners in this scene from Discworld. Notice how the right edge of the banner indicated by the second red arrow aligns perfectly with the right edge of the column behind it. This flattens the banner terribly - it's much harder to read the depth, because it feels like it's a continuation of the column, rather than a separate form. Similarly, notice how the bottom of the flag to the left of it, as indicated by the other red arrow, aligns perfectly with the line running horizontally through the column. Once again, the continuation of this line makes it harder to read. 

In reality, none of the banners in this scene are placed particularly well against the columns behind them. The ideal goal is to have two object edges either overlapping by a substantial amount, or not at all, with a decent gap between them. Placing lines as close as they are here puts a scene at risk of tangents and near-tangents.

It's not just straight edges, either. Notice how in this scene from The Dig, the angled curve from the edge of the alien craft's cockpit follows on the same curve and angle as the edge of the foreground object that touches it. This can make them hard to read, as at a glance it can give the illusion that they're somehow connected. It's a particular shame when tangents happen in such abstract forms such as these, as there's no real architectural or practical reason that these forms align in this unfortunate way, and it would be quite simple to fix.

In this scene from Quest for Glory you can see not a foreground detail but a background detail forming the tangent. The edge of the building ends, and clearly goes to a downwards wall, but the dirt in the background makes this much harder to read, and unless one looks closely, it's hard to see that the wall ends and the brown to the left of it is dirt. This case is particularly unfortunate because it's not just the fact that the lines meet in this way, but the colours match so closely that it's hard to distinguish them anyway.

Sometimes it might not be the background artist that made a tangent happen, but an object artist or someone else who placed the objects in the engine. In this scene from Police Quest, we can see two fairly unfortunate examples - one where the edge of the red police light just touches the edge of the wall, and another where the line of the car's front left fender runs along the same line as where the asphalt meets the concrete. Because the car is an object, not a painted in background element, it would've been very easy to move it up further, so that it overlaps these edges more completely, and these tangents could be somewhat minimized.

Sometimes, though, it's much harder to avoid. It's hard to see how the two points where the wooden supports of the attic wall align in awkward ways with the balusters of the stair's balustrade. No matter how things get rearranged, putting repeating patterns in front of similar repeating patterns always runs the risk of forming nasty tangents like these. The one shown by the right arrow here is particularly bad, looking as though it's a recoloured part of the baluster, nullifying the depth that should be apparent here.

This scene from Simon the Sorcerer 2 has some fantastic examples of tangents that really confuse the eye. The tangent shown by arrow number 1 shows a stand whose leg should read fairly clearly - but the fact that it meets at another junction of angles makes it quite hard to see depth here, compounded by the fact that the colours are very similar. The lines at arrow number 2 have the same problem, to an even worse extent. The top of this stand genuinely looks like part of the edging of the rug, and is even the right colour to be, and meets it in two places. This is a very beautifully bad set of tangents, and very indicative of how confusing they can be to the eye.

Arrow 3 shows how different colours reduces the impact somewhat - the bases of the chandeliers runs directly along this wooden trim, but because they're so different in hue and lightness, it's much less confusing to the eye. It's still worth avoiding tangents like this, though, because so much more depth can be achieved by overlapping them more or less so that the lines don't run along each other. The fourth arrow doesn't so much show lines touching as it shows two areas of the same colour touching in a way that they bleed into each other a bit. It's not as bad as the first two examples here, but still misleads the eye a little.

This scene from King's Quest 5 shows tangents in a more organic setting. The first arrow indicates what should be two separate root structures, but the way they diverge from the same point makes it look like a single root split into 2 parts. Because they follow a similar angle, it's not that easy to tell the foreground shape from the background shape. Similarly, arrow two indicates an area where not only do two trees meet with a horizontal curve that looks like it continues from one to the other, but the rear root sits upon a path that matches it so closely in colour that the form gets lost a little. Just above the second arrow we see two branches, from two separate trees, appear to join due to a nasty tangent.

At point three, we see a small tree branch ending right where a pair of small tree trunks start. At a glance, it looks like these distant tree trunks are a continuation of the branch, an unfortunate illusion that ruins the depth somewhat by making it hard ot judge where the tree trunks start. Similarly, point 4 indicates two more tree trunks whose bases are obscured by shapes in front of them. Again, this makes it hard to judge their distance, and therefore flattens the image somewhat.

The fifth arrow points to a wonderfully clear example where the tip of the smaller foreground tree occurs right on the angle of the larger  one, making the two forms merge into a single form at a glance, another unfortunate ruining of depth.

As we move into more complex forms, such as those in this scene from The Curse of Monkey Island, the possibility for tangents increases. The edge of the chair at arrow number 1 aligns in a way with the stool behind it, and with such similar designs, that the depth here is lost once again. At arrow number 2 we see the curve of a lamp's brasswork touching several lines of the shelf, helping to make what should be a fairly deep, solid feeling design somewhat flat.

At arrow number 3 we can see the edge of the cabinet on the counter matching the edge of the shelf behind it perfectly, which makes the shelf feel like it's part of the cabinet here. Another flattening effect, as is common with tangents. At number 4 the other edge of the cabinet runs along similar lines to a portrait behind it, cluttering up the grouped mass in a way that's hard to read and doesn't feel very natural.

Arrow 5 doesn't actually indicate a tangent, but instead where a tangent nearly happened. The top of the chair's backrest and the edge of the bar are close enough that it would've probably been improved had the chair been moved further to the right to avoid this very close proximity. Arrow 6 shows a chandelier touching the edging similar to the earlier example in Simon the Sorcerer, but here it only touches in a couple of places. Nevertheless, it's an unfortunate meeting, and would've probably felt deeper and more easy to read had the chandelier overlapped the edging more boldly.

Here in this scene from Broken Sword we have similar levels of overlapping shapes, and once more feel the presence of tangents. At the first arrow the top of the wire mesh panel aligns perfectly with the trim on the wall, meaning the top here is basically lost, and hard to read. At point 2 we see a non-lit light fitting touching both the ceiling trim on one edge and a lit fitting on the other edge, flattening it somewhat.

The third point indicates the end of a curve in the chandelier that lines up perfectly with the edge of the ceiling trim. There's a couple of similar spots in this fitting where the curves touch the ceiling trim lines in similarly close ways, but this is the strongest, clearest example of a tangent. The fourth point is particularly unfortunate, where we see the curve of the arched doorway completely masked by the angle running across it. The fact that this angle is the same colour as the elements behind it can also give the illusion that the vertical bars in the foreground are connected to this angled foreground piece of wood, rather than the curved feature it's hiding. A lot of depth and readability is lost this way.

Arrow five indicates another point where a light fitting is just touching the edge of the wall trim, particularly frustrating when there's so much empty space to the right that the light could've been placed instead. As with most tangents, this could've been improved by moving it to either the right or the left - grouped masses should overlap boldly, or not at all. The sixth arrow shows the edge of the desk just overlapping the edge of a file cabinet - not enough to really flatten the image, but enough to make me wish the desk ended just a handful of pixels before, considering how much blank wall is between the cabinet and the shelf.

I deliberately tried to pick well loved, well known games here that have great art to prove just how hard it is to avoid tangents. Hopefully seeing these examples will show or remind us of the problematic nature of accidentally working tangents into a composition, and give some idea about what sort of scenarios they might crop up in. Knowledge on how to identify problems such as these is the first step in knowing how to solve the problem, and once we've gotten used to looking for tangents, it's much easier to identify them and, hopefully, solve the problems they present our compositions with.