DIR Return Create A Forum - Home
---------------------------------------------------------
Wonky College
HTML https://adventuregames.createaforum.com
---------------------------------------------------------
*****************************************************
DIR Return to: Art Theory
*****************************************************
#Post#: 12--------------------------------------------------
Tangents, and why they should be avoided
DIR By: Pam
Date: May 20, 2021, 6:59 am
---------------------------------------------------------
(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.
HTML https://2.bp.blogspot.com/-up6I-CcB7a4/WKfb2FxRQaI/AAAAAAAAAzY/0iQz3h7mWB0k1kfehvnfjRZkxLEGu2qFQCLcB/s400/Discworld.png
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.
HTML https://2.bp.blogspot.com/-D5M6gBVV1aI/WKfb5MWCLmI/AAAAAAAAAz8/IpnHw8IvVycpDri8GwAXZJ6g0_0jaKQVQCEw/s400/The%2BDig.png
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.
HTML https://2.bp.blogspot.com/-3tq3Zvtjmr8/WKfb4R6vZxI/AAAAAAAAAz8/5QKQ4dxIt98iJC5bxkVJnTn2BAEbWyqzQCEw/s400/QFG.png
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.
HTML https://2.bp.blogspot.com/-oTCUDrwOO1U/WKfb4NDgnpI/AAAAAAAAAz8/BzQPnXcCK4sxp2uYSBqEJkTCSjR15-X_ACEw/s400/Police%2BQuest.png
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.
HTML https://1.bp.blogspot.com/-rxj4J4c_k-I/WKfb3bX1tBI/AAAAAAAAAz8/xAsOvs5oXSousQ7OtEAMgrTrDcoTHvYSgCEw/s400/Gabriel%2BKnight.png
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.
HTML https://4.bp.blogspot.com/-I-VCDV9ALrQ/WKfb44tmOzI/AAAAAAAAAz8/NEKaH_U7MwIKVWLdRFblZqTitgUPsuO5wCEw/s400/Simon2.png
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.
HTML https://3.bp.blogspot.com/-VsybSzY2hxA/WKfb3yUDp0I/AAAAAAAAAz8/stpiPOI8BnsU8UjHRroYOiOoCijENqVEwCEw/s400/King%2527s%2BQuest.png
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.
HTML https://3.bp.blogspot.com/-hcW8w_b0ZtY/WKfb3cSxtjI/AAAAAAAAAz8/fdT5n_AD638v0muJadW2vaKsBtxaoa5QwCEw/s400/Curse%2Bof%2BMonkey%2BIsland.png
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.
HTML https://4.bp.blogspot.com/-VyLCc7c5U-Y/WKfb20lU0xI/AAAAAAAAAz8/FuTuqhfvS_YEV3GCjgA9W4jCArZKHWHWQCEw/s400/BS1.png
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.
*****************************************************
Page 1 of 1