AuthorTopic: Ramblethread! A brainstorm approaches!  (Read 125782 times)

Offline Helm

  • 0110
  • *****
  • Posts: 5142
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides

Re: Ramblethread! A brainstorm approaches!

Reply #20 on: March 11, 2009, 11:37:58 am
Banding Primer

If you use pixels to draw something, it is inevitable that some banding will occur. Banding is when pixel clusters 'hug' each other to create visible resolution lowering. Since the pixel artist will be putting clusters of pixels close to each other in order to communicate certain shapes that are one way and not any other, it is inevitable that they will run against situations where they must create minor banding to convey succesfully what they're drawing. This is a risk that the artist should be willing to take. However there occurs a lot of banding by the inexperienced artist (or the experienced artist in a hurry) that has no artistic merit. Let's look at art by an experienced pixel artist that seemed to be a bit in a hurry that is to his benefit to go over and eradicate. This from the amazing videogame Spelunky which I've been playing a lot as of late and as such I've had the time to look at its art a lot and I've spotted the bandings. The artist is Derek Yu.

(note I do not use my own art to spot banding because I can no longer create STRONG banding by mistake, it sticks out like a sore thumb to me and if I draw it up on purpose it seems disingenuous. Also note that the following examination is in the interest of learning and not meant at all as a disrespect for the artist.)



Here is a play-screen of Spelunky. The art is pretty beautiful in my opinion, but it shows signs of 'working fast'. This makes sense as Spelunky is still in beta form, not finalized and Derek did what any smart artist would do, he created assets to put in the game and left time for fixing the little things at the end of the project. It is a very useful circumstance for us however because we can go in and look at it in it's intermmediate shape and examine the methodology that creates common errors such as banding. Let's zoom in and check the main sprite and the basic rock tile next to him.




In red I have blocked the places where (I submit) unintentional banding occurs. In purple I have outlined further cases of banding that are not fatal (because they are artistic compromises made by the artist in order for him to convey the shapes he intends to) but are best addressed also. As you can see the unifying characteristic of banding is that it conveys a lower resolution than intended. The viewer spots fat pixels, or rows of fat pixels.

In the attempt to move around pixels in such a tight little place, until the banding is resolved, the design points of the character move around a lot, whereas the rocks next to him are very easily rid of the banding without many changes. Why does this occur? It occurs because the character has a higher semiotic value for the viewer, because he has a face, and arms, and a torso, and all these things must be communicated clearly, whereas a bunch of rocks are just a bunch of rocks and there's not much problem just moving around a few pixels here and there. But the whole demeanor of the character sprite can change by a single pixel's worth of alteration. I posit this argument:

1. the more semiotically charged what the artist is trying to rid of banding is, the more costly in terms of characterization single pixel changes are.
2. the smaller (in pixels) the size of the item the artist is trying to rid of banding is, the more costly in terms of characterization the single pixel changes are

Therefore

3. The smallest the character sprite is in resolution, the more difficult it is to remove banding while retaining it's intended characteristics.

Proof of concept: Go change a single pixel on the pacman open mouth frame. Or a single pixel from a NES final fantasy battle sprite. Just a single one. See how much the idea of the character changes. But change a single pixel in a 64x64 sprite. Not much difference. Furthermore, change a single pixel in an 64x64 ground tile. Almost no emotional impact to the change.

Consider here the informative qualities of a single pixel in the different contexts. If a pixel is supposed to inform the viewer of a character's eye, it is extremely important. If a single pixel is supposed to convey that this is a bit of shading on a rock, not so important. This ties with the Information versus Detail qualities of pixels, something to write about more later on.

Anyway, here I deal with the banding on that sprite:



I urge the viewer to open the animation in their animation program and inspect every change closely. Smaller changes around the banding that seemingly make no sense will start to once the viewer starts to see how every change impacts the areas around it holistically. How removal of banding also triggers the impulse to alter and fix manual anti-alias. This process, is what refining ones pixel art entails. This, in my opinion is, what it means to take something composed of pixels, and make it pixel art. This is the zen stage of pixel art, where antialias, dithering, banding-removal and other minute handlings of pixels bestows on the piece the blessings and limitations of pixel art. Not everything made of pixels is pixel art. Not even all art made of pixels is pixel art. The full immersion in that state of definition and refinement outlined briefly above usually and optimally, creates results that are very much great pixel art. It's not a binary switch "PIXEL ART / NOT PIXEL ART", it's a gradual slope. The more time the artist spends in that zen state of minutely switching around placements of pixel clusters, the more his end result will be graced by the benefits of great pixel art.

Let's also look at a bigger piece, again from Spelunky. This is part of the intro splash screen:




Nice and big so banding can be spotted. Here's a challenge. Go over it in your pixel art program and spot the banding just on the Indy character in the middle. Then check below for my take.



Here's most, but not all, important banding errors in this part of the image (extra challenge! spot the additional minor banding errors! I can see at least 3 more). They show a few different types of banding. Let's go over them:

A, H :  Just basic 'Fat Pixel' banding. An illusionary effect of where 4 real pixels convey a shape that seems like a double-res pixel. It is very important to note that the Fat Pixel, when used intentionally and intuitively creates specific effects that are very controlled and worthwhile. It does remain a lowering of the resolution but sometimes that's exactly what the pixel artist needs.

B: Row of Fat Pixels. This is the worst, especially when there's a row followed by a row just a pixel displaced lower or higher. I mean this:



Or even worse, stuff like this:



This is BANDING THE ULTIMATE (or more handily I dub it 'staircase banding') and it makes my heart bleed. Obviously these are not spotted in the Spelunky art because wherea Derek Yu might or might not be very theoretically aware of the banding effect as discussed in this text, like any good pixel artist, he certailny must find gross errors like the above aesthetically insulting even on an artistic-instinctual level.

C: Skipping-One Banding. When an additional cluster is banding with a section that isn't directly touching it. This isn't a big problem, but once the eye is trained to spot these alignments, they cannot be unseen.

D, E: This is an amazing bit of banding. Check how It's two Fat Pixels, Skipping-One row to create a Row of Fat Pixels. I show this to explain to the reader that they should train their eyes to not only notice banding on immediate pixel rows, but even 'higher level' banding. Essentially, the viewer must learn to project horisontal, vertical, and 45 degree lines from every piece of banding cluster in their art and see how it effects the pixels in these directions all the way to the edges of their piece. This sort of training makes the artist holistically aware of how their piece is structured also, and this is a great artistic skill to have regardless of pixels. (Should I write a Banding 202 article here for this or is it beyond the scope of this tutorial?)

F: This is the most common type of banding. It's when a full outline of a shape is hugged by close shading. There's much worse examples than this in most amateur pixel art (like the awful staircases I showed above) but Derek is not an amateur by any chance so it's not a very pronounced example. Check below for how when fixing it this takes a lot of extensive reworking and aa of the shape.

G: This is banding as well. 45 degree lines band pretty horribly in fact.

Here's some suggestions for fixes:



Again, I suggest the reader takes this in their animation program and checks the choices made to remove banding.

--------------

I stress that some degree of banding is inescapable in pixel art. Don't obsess over erasing every little bit of banding all the time, but keep in mind that the most glaring errors effectively destroy the illusion of increased perspective on your art and most importantly (since a lot of symbolist pixel artists simply don't care about hiding the actual resolution/ increasing the effective resolution) banding betrays sloppiness. Why? Because when someone draws in a non-digital medium, where there is no grid,they can go from general shape to specific detail without creating visual effects such as banding. But on the computer screen, when the artist places a general, rough shape, and then later on puts another cluster of pixels somewhere closeby, it is very probable that exactly because of the small resolution, some edges of these clusters will have lined up, creating banding. When this ends up in finalized pixel art, it tells the discerning viewer that the artist didn't spend the time to optimally place every pixel cluster in his image. And that is a big part of what makes pixel art a potent artistic medium.

{...}
« Last Edit: March 11, 2009, 11:41:16 am by Helm »

Offline Ai

  • 0100
  • ***
  • Posts: 1071
  • Karma: +2/-0
  • finti
    • View Profile

Re: Ramblethread! A brainstorm approaches!

Reply #21 on: March 11, 2009, 01:47:53 pm
A, H :  Just basic 'Fat Pixel' banding. An illusionary effect of where 4 real pixels convey a shape that seems like a double-res pixel. It is very important to note that the Fat Pixel, when used intentionally and intuitively creates specific effects that are very controlled and worthwhile. It does remain a lowering of the resolution but sometimes that's exactly what the pixel artist needs.
Swords are a good example here (although banding typically only appears once rendered onto a background)
Quote
--------------

I stress that some degree of banding is inescapable in pixel art. Don't obsess over erasing every little bit of banding all the time, but keep in mind that the most glaring errors effectively destroy the illusion of increased perspective on your art and most importantly (since a lot of symbolist pixel artists simply don't care about hiding the actual resolution/ increasing the effective resolution) banding betrays sloppiness. Why? Because when someone draws in a non-digital medium, where there is no grid,they can go from general shape to specific detail without creating visual effects such as banding. But on the computer screen, when the artist places a general, rough shape, and then later on puts another cluster of pixels somewhere closeby, it is very probable that exactly because of the small resolution, some edges of these clusters will have lined up, creating banding. When this ends up in finalized pixel art, it tells the discerning viewer that the artist didn't spend the time to optimally place every pixel cluster in his image. And that is a big part of what makes pixel art a potent artistic medium.

{...}
I'd like to mention that drawing starting from dark (black?) and adding shades, finally adding the lightest shade, helps keep this problem down for me. I believe this is because likely trouble areas stand out with better contrast.

I appreciate the way you've avoided reference to specific methods so far. I think possible helpful methods (in the vein of the above) might be useful via footnotes.
« Last Edit: March 11, 2009, 09:21:17 pm by Ai »
Obviously minimalism isn't everything -- but regarding learning art, yeah, it is pretty much everything.

Confidence is an attitude, not a feeling. Directed failure is the engine of confidence.

Offline Hugo

  • 0001
  • *
  • Posts: 25
  • Karma: +0/-0
    • View Profile

Re: Ramblethread! A brainstorm approaches!

Reply #22 on: March 11, 2009, 01:53:27 pm
"The realist pixel artist will often make large areas where the resolution is practically infinite (like the shoulder of the girl in the above Lazur bit)"
i don't understand. Would you mean that Lazur places meticulously shaded areas (like the soulder) to make the apparent resolution finer ?

Offline Arachne

  • 0010
  • *
  • Posts: 309
  • Karma: +3/-0
    • View Profile
    • Retinal Eclipse

Re: Ramblethread! A brainstorm approaches!

Reply #23 on: March 11, 2009, 02:50:38 pm
(Should I write a Banding 202 article here for this or is it beyond the scope of this tutorial?)
Personally, I think any elaboration would be a good thing. Not necessarily for the beginners, but for those who will be offering them critique. :)

Offline Helm

  • 0110
  • *****
  • Posts: 5142
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides

Re: Ramblethread! A brainstorm approaches!

Reply #24 on: March 11, 2009, 03:09:02 pm
Quote
I'd like to mention that drawing starting from dark (black?) and adding shades, finally adding the lightest shade, helps keep this problem down for me. I believe this is because likely trouble areas stand out with better contrast.

I don't see that as relevant to banding in any way really.

Hugo: I cannot speculate on Lazur's conscious intention, but yes, I believe a lot of the demoscene artists were of two subconscious minds when they made pixel art. On one hand they were 'woo, pixels! I like pixels, here let me emphasize a section of pixels stylistically' and on the other - the more dominant one - they were IF I MAKE THIS SUPERSMOOTH AND AWESOME AND IT LOOKS LIKE A PHOTO I WILL WIN THIS COMPO.

Arachne, alright. Perhaps after I tackle the next bit that comes to mind which is about pixel clusters and aa/tapering/fading which I think will be very useful.


Keep the feedback coming, it is very important to keep me motivated in writing the blocktexts.

Offline NaCl

  • 0010
  • *
  • Posts: 437
  • Karma: +0/-0
  • When it rains it pours
    • View Profile

Re: Ramblethread! A brainstorm approaches!

Reply #25 on: March 11, 2009, 09:18:07 pm
I'd consider getting rid of the Go analogy. Not only because the average reader will have no idea how to play Go, but also because the analogy feels a little forced.

Offline blumunkee

  • 0010
  • *
  • Posts: 324
  • Karma: +1/-0
  • We glub but glob.
    • View Profile
    • blumunkee tumblr

Re: Ramblethread! A brainstorm approaches!

Reply #26 on: March 11, 2009, 09:38:10 pm
I don't find it forced so much as under-utilized and undeveloped. A claim is made that they are similiar, but there's no real proof. Are there really similarities between Go strategy and pixel clusters, banding, and dithering?
ALL CREATURE WILL DIE AND ALL THE THINGS WILL BE BROKEN. THAT'S THE LAW OF SAMURAI.

Offline Gil

  • 0100
  • ***
  • Posts: 1539
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: Ramblethread! A brainstorm approaches!

Reply #27 on: March 11, 2009, 11:19:23 pm
What Helm is suggesting, to me, is that pixel art is a delicate equilibrium of forces. As explained in one of his later posts, these can be simplified to symbolism, abstraction and realism. Just as in a game of Go, one move can alter the entire balance of the artpiece by a single move, which is why pixel art is as much of a game of strategy as it is an art form.

He could have made the analog with chess, but then you'd lose the wonderful visual analogy, where you can see the whole equilibrium shift when placing a go piece, just as we can visually follow the consequences of placing a single pixel.

Offline NaCl

  • 0010
  • *
  • Posts: 437
  • Karma: +0/-0
  • When it rains it pours
    • View Profile

Re: Ramblethread! A brainstorm approaches!

Reply #28 on: March 12, 2009, 02:33:16 am
I see what he was getting at with the analogy, but I still feel my two points are valid. The average reader will not know enough about Go to get more from the analogy then they would from the idea being plainly stated, and I feel the similarities are too few to consider it a good analogy.

If you want to keep it, I wouldn't use it as the hook. Maybe put it elsewhere in the article.

Offline Gil

  • 0100
  • ***
  • Posts: 1539
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: Ramblethread! A brainstorm approaches!

Reply #29 on: March 12, 2009, 03:11:44 am
Let's agree to disagree then, it stays a very strong analogy to me. Some other people's ideas on this perhaps?