Author Topic: Ramblethread! A brainstorm approaches!  (Read 66609 times)

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Ramblethread! A brainstorm approaches!
« on: March 05, 2009, 12:21:08 am »
This is an idea repository thread for a tutorial I'm planning to do that deals with fundamental aspects of pixel art. At first it will seem like an incoherent mess. I will post here when I have ideas I want to come back to and put in order. Feel free to discuss them with me or offer counters and examples. Eventually the text will be pruned and images will be made to explain the vaguest points and something useful might eventually occur.

Please keep in mind that these are thoughts constantly under consideration, not my religion. It is possible I might discard some or most of the fundamental ideas behind this before I'm done with a final text. This is why it's titled 'brainstorm'.

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

Pixel art is like a Go game. Every pixel placed contributes towards a struggle between intentions that will eventually end in an state of variable equilibrium between the opposing forces. Anyone that has played Go knows of the feeling of immense mental strain when they place one piece down on the board and they ponder on the eventual ramifications of that single move towards all the clusters of pieces across the board. A piece feeds on the vital space around it, you see. Not all pixel clusters can live, some will have to die for the purposes of other, more important - towards the whole of the game - clusters. Go is a holistic game, a game about sacrifice and a game about grace. Likewise, drawing with pixels results to similar concerns of balance between clusters of pixels and their optimal positions are again about sacrifice and grace.

Let's consider what a cluster of pixel is as opposed to a single pixel.

This is a single pixel: .
This is a cluster of pixels: _ or that: ,

The cluster of pixels is made from single pixels. However, a single pixel is most of the time near-useless and meaningless if not touching pixels of the same color. 
The pixel artist is concerned with the shapes that occur when pixels of similar color touch each other and convey an opaque, flat, shape.
Most of the defeats and possible triumphs of pixel art occur in that exact moment where the artist makes a cluster of pixels.

What are the defining characteristics of a cluster of pixels on the morphological level? Besides those obvious and common with other types of art (like the information inherent to the color in terms of value/brightness, chroma/saturation or hue/tint that the cluster possesses) we are interested in the particular characteristics of that body of color as pixels. The characteristics of the shape are defined by its outline. It could be made out of straight lines, 'perfect' angled lines (will return to perfect lines later), implied curves or irregular (or jaggy) lines. A cluster has often many of these attributes around its outline. The prime job of the pixel artist is to find the ideal shape for every cluster while considering how they all come together to represent the item they are rendering. It is my belief that there are almost ideal shapes for clusters of pixels and they are those that achieve a twofold, yet holistic goal: how to optimize the resolution of the image. "What's this?" I hear you say "but isn't the resolution set anyway?" The real resolution of the image certainly is. But the fake, that is, the perceived resolution of an image is in the hands of the capable pixel artist, higher than the real one.

There it becomes important to realize what the available fineness of resolution exists for the piece of art the artist is trying to render. The less colors the artist has to convey his image, the more the available resolution tends towards 1 pixel = 1 pixel. The more colors the artist has, the more they can approximate, fake essentially, higher resolutions by proper buffering. Look at this image:



The 256 color gradient makes it impossible to even notice a pixel. The effective resolution here is considerably larger than if the artist had 4 indexes to convey the range between black and white.

In pixel art we do not deal with 256 color gradients, however and therefore the effect isn't anything bigger than perhaps 1 real pixel = 0.75 fake pixels, but it is still a very important thing to consider and makes or breaks great pieces. When looking at a piece of pixel art, the artist should be able to evaluate how many colors can be used to blend clusters of pixels better so as to optimize towards a finer resolution. This is not a point of stylistics, this is what pixels long to be, that is their ideal form. Any style can benefit from this process.

A beginning pixel artist should always start with very constrained palettes, where hue and saturation do not matter, just value. Gameboy 4 colors is excellent. Small sizes, small palette. 1 pixel = 1 pixel there and they can worry more about dealing with how clusters of pixels long for their perfect shapes together rather than care about anti-alias or dithering and other advanced resolution-upping techniques. If you can't render your item with 4 colors in a gameboy screen, you will not be able to do any better at 800x600 with 256 colors or more.

What is the perfect shape of a cluster? It has to do with its outline. The juggling act here is to think of what you're trying to represent with your pixels and then try to retain its essence while at the same time making the clusters you're using to draw it become as close as they can to 'perfect' lines. Perfect lines are the 90 and 45 degree ones. Curves can be assembled from smaller segments of perfect angles also. Avoid single pixel noise. Using perfect lines, before the artist even starts to anti-alias manually, the contours of his clusters should be as close as they can be to 1 pixel = 1 pixel resolution.



A is a freehand doodle line of pixels. This is an implied cluster too, even if it's a line. B is the same line, cleaned manually until it's made of the safest couplings of pixels possible while still retaining the intended curvature.

On the detail of A we see that the jaggies hurt the resolution of the image by conveying larger pixels than our computer monitors are capable of displaying. This is effectively, the bane of pixel art. Banding does this. Bad AA does this. Bad dithering does this. Pillow shading does this.

--

to be continued. Let's discuss while I think.
« Last Edit: March 05, 2009, 12:25:38 am by Helm »

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #1 on: March 05, 2009, 12:36:59 am »
{...} While perfect vertical and horisontal lines are an amazing help to the pixel artist that is trying to refine their resolution as much as possible in some ways, they do the exact opposite than what they intend to in others



Here in A we have Ideal clusters of black and yellow. The resolution is practically infinite. Then on B we have two lines of buffer between the two colors. The artist might have thought they were making their image softer and therefore the resolution finer (a correct principle generally) but what they've done instead is completely give away the actual dimension of their smallest-possible pixel line. Pixel drawing is about the art of obfuscation of the single pixel. The more you can hide the actual dimension of the prime building block of the image by presenting perfect clusters of pixels in harmony, the finer the resolution of the image becomes. Of course it's impossible to completely avoid the side-products of buffering, but this principle should be kept in mind regardless.

Banding is horrible partly because of the above explained principle and also due to the 'breaks' in the bands that are ever-so amplified the more the artist piles on bands, effectively lowering the resolution of his image {...}

Offline Doppleganger

  • 0010
  • *
  • Posts: 270
  • Karma: +2/-0
  • Fall!
    • View Profile
Re: Ramblethread! A brainstorm approaches!
« Reply #2 on: March 05, 2009, 05:16:25 am »
That's a good start. Something like this eventually need(ed/s) to be done anyways.

I think one *very important* aspect of pixel art to discuss is that of "perfect lines". Which, you kind of went over already, but it definitely could use its own narration. What I speak of, is the unspoken rule that in any particular curve the pixels that make up any straight line that are part of the collection of straight lines that define the curve should always contain a number of pixels relative to the other straight lines that neighbor it. ie; a simple hump in a horizontal line might be; 1, 2, 3, 5, 3, 2, and back to 1 pixels long per line. That is most definitely better displayed through images as it seems like a lengthy explanation is necessary to fully introduce it otherwise. Nonetheless, I feel that it is often overlooked with novice pixel artists, and I find that it is a rule that is almost always applicable.

edit:
Also, I thought I'd comment on how abstract your approach is thus far. For me, I find it to be an interesting and theoretical read that creates new avenues for me to expound on pixel art as an artform and beyond, but I believe that lesser experienced individuals will simply read it and leave with little more understanding than they started with. This, of course, assumes that every subject will be covered in this loquacious manner. Just something worth noting. I guess the better question would be this; who exactly is your target audience?
« Last Edit: March 05, 2009, 05:21:56 am by Doppleganger »

Offline Gil

  • 0011
  • **
  • Posts: 943
  • Karma: +0/-0
  • Gotta love me
    • View Profile
    • My Portfolio
Re: Ramblethread! A brainstorm approaches!
« Reply #3 on: March 05, 2009, 05:22:05 am »
I have a very interesting idea to add that I've not been able to formulate until I saw the other part of the equation, which is your well-written brainstorm here. I will try to show some examples with it, but I need to formulate it more in my head for now.

Basically, I've seen a lot of artists break their clusters with single pixels, it happens in lots of ways and it destroys what you call their heightened resolution in parts of the image, yet provides detail to an image. It happens in games like Symphony of the Night and Flashback most notably, but I've seen it in excellent isometric art and scene pieces too.

Consider for example edge highlighting with single pixel lines on mechanical parts in Flashback. It sometimes even ends with a single white pixel on the corner point of multiple edge highlights. The artist is breaking the infinite resolution by placing a single pixel line.

Here's a crude, badly done example that might or might not show you what I'm talking about. Left cube is definately near infinite resolution, right cube is what I'm talking about. It's very powerful to detail heightened resolution stuff with pixel level detail for some reason or another. Flashback mechanical parts are one example, but there is an abundance of similar methods that I might try to chronicle if it interests you.


Offline Jad

  • 0100
  • ***
  • Posts: 1041
  • Karma: +0/-0
  • -But a miserable pile of pixels!
    • View Profile
    • bomb boy dot se
Re: Ramblethread! A brainstorm approaches!
« Reply #4 on: March 05, 2009, 08:18:40 am »
Still, by using the pixels in an elegant manner and drawing lines that are harmonic and adhere well to the resolution, that way of creating detail is still in harmony with the clusters. In your example the single-pixel-width lines only define the clusters, and the single-pixel dots help define the lines. There is still harmony here O:

Doppleganger: I think it's a ramble thread because helm's audience is as of yet undefined and he just wants to ramble about, think and discuss this with us! O:
:]

Offline Feron

  • 0100
  • ***
  • Posts: 1124
  • Karma: +0/-1
  • Carpe Diem
    • View Profile
    • Pixelheart
Re: Ramblethread! A brainstorm approaches!
« Reply #5 on: March 05, 2009, 01:23:45 pm »
On the single pixel topic, one white pixel is quite often used as eyes of sprites and that is very noticeable.

Offline Gil

  • 0011
  • **
  • Posts: 943
  • Karma: +0/-0
  • Gotta love me
    • View Profile
    • My Portfolio
Re: Ramblethread! A brainstorm approaches!
« Reply #6 on: March 05, 2009, 07:04:36 pm »
Jad: while rim highlights are still pretty harmonic to the cluster theory, clothing detail in SOTN is not for example. I'm thinking that the contrast between heightened resolution and pixel level detail is just very visually pleasing and also makes simple detailing more powerful, since it isn't cluttered by more pixel noise around it.

Just a theory

Offline Arachne

  • 0010
  • *
  • Posts: 300
  • Karma: +3/-0
    • View Profile
    • Retinal Eclipse
Re: Ramblethread! A brainstorm approaches!
« Reply #7 on: March 06, 2009, 12:52:16 am »
Yay, lines. ;D

A mistake I see done every now and then, is to go from a [1 1 1] line straight to a [2 2 2] line.



The right way to draw a smooth curve in this case is not very intuitive if you think of lines merely in terms of number sequences. I like to think of it as AAing with angles instead of colors. You have two "colors", a [2 2 2 2] line and a [1 1 1 1] line. Halfway between the two would be [1.5 1.5 1.5 1.5], but we only have integers to draw the line with so we get [1 2 1 2] instead. Substitute the middle with that, like [2 2 1 2 1 1], as shown here,



I think it's always important to explain why you're using a rule or put it in some kind of context. If there's no other way to remember these rules than to memorize them to the letter, beginners might find themselves trying too hard to adhere to all the rules and forgetting to actually look at what they're drawing.

I think the most important thing you can do in pixel art is to look at the result after placing a pixel. Did it look better before or after and why? If you keep an eye out for a pattern in what looks good and what doesn't, you will find it in time (and after a few thousand iterations :P).

Offline Gil

  • 0011
  • **
  • Posts: 943
  • Karma: +0/-0
  • Gotta love me
    • View Profile
    • My Portfolio
Re: Ramblethread! A brainstorm approaches!
« Reply #8 on: March 06, 2009, 08:58:03 am »
In most cases (in my experience), it is better to go with example 1. Example 2 works perfectly here, but the broken sequence can sometimes do more harm than good. As you said, it's all a matter of trying it out and repeating until it looks good.

I usually go with 1 if I only have inner AA to work with (sprites for example), while I'll definately go with 2 if I can get outer AA too.

Offline Ai

  • 0011
  • **
  • Posts: 649
  • Karma: +2/-0
  • finti
    • View Profile
Re: Ramblethread! A brainstorm approaches!
« Reply #9 on: March 06, 2009, 10:40:35 am »
I usually go with 1 if I only have inner AA to work with (sprites for example), while I'll definately go with 2 if I can get outer AA too.
I totally agree. 1 is a more pleasant curve if you AA it in the right way, and is also more regular and easy to AA.

I think Arachne was talking about scenarios with no AA at all, though. In those situations, 2 is definitely nicer.
(IMO the ideal curve, in pixel art, is generally very close to a cubic spline (2 endpoints, 2 control points), and example #2 is almost perfect in this case. example #1 is like spline interpolation that is suffering from rounding errors)

I included some thoughts on this in my old advanced AAing tutorial, IIRC. (http://neota.castleparadox.com/aa_tutorial.html). IMO your technique, Arachne, is very similar to Staggering. It also mentions something else which is important for newbies, IMO: because of gamma, the midpoint of the RGB values of two colors usually *ISN'T* a 50% mix of the two. (eg black #000000, white #ffffff -> wrong result = #7f7f7f, right result = #bababa). Knowing this can help avoid ineffectual shading as well as ugly AA.

Offline Arachne

  • 0010
  • *
  • Posts: 300
  • Karma: +3/-0
    • View Profile
    • Retinal Eclipse
Re: Ramblethread! A brainstorm approaches!
« Reply #10 on: March 06, 2009, 11:32:06 am »
It also mentions something else which is important for newbies, IMO: because of gamma, the midpoint of the RGB values of two colors usually *ISN'T* a 50% mix of the two. (eg black #000000, white #ffffff -> wrong result = #7f7f7f, right result = #bababa). Knowing this can help avoid ineffectual shading as well as ugly AA.
This is a good tip. And it also makes decent monitor calibration a must.

I think what's mentioned in this post by Ilkke, with the principle of looking at diagonals, is a very good way to check if your AA makes sense. Most of the time, though, I have to compare what I'm working on with the previous step to make sure I don't over-AA. If it's actually blurrier than what I had, I have to redo it, and I haven't found a better way to make the AA look good than to go through this tedious process. :blind:

Offline Ai

  • 0011
  • **
  • Posts: 649
  • Karma: +2/-0
  • finti
    • View Profile
Re: Ramblethread! A brainstorm approaches!
« Reply #11 on: March 06, 2009, 01:08:00 pm »
It also mentions something else which is important for newbies, IMO: because of gamma, the midpoint of the RGB values of two colors usually *ISN'T* a 50% mix of the two. (eg black #000000, white #ffffff -> wrong result = #7f7f7f, right result = #bababa). Knowing this can help avoid ineffectual shading as well as ugly AA.
This is a good tip. And it also makes decent monitor calibration a must.

I think what's mentioned in this post by Ilkke, with the principle of looking at diagonals, is a very good way to check if your AA makes sense. Most of the time, though, I have to compare what I'm working on with the previous step to make sure I don't over-AA. If it's actually blurrier than what I had, I have to redo it, and I haven't found a better way to make the AA look good than to go through this tedious process. :blind:
Well honestly I think it really is all maths, especially when you're focusing on exact rendering as you seem to suggest above; you're basically just emulating an gamma-correct optimized AAed-polygon rasterizer (note that most polygon rasterizers are substantially wrong because they aren't gamma correct - Don't base your idea of correct AA on these!.)
Anyway, perhaps I should have also mentioned how I arrived at the 'correct' value: I gamma-adjusted the RGB values to gamma 1.0 (linear) before blending them, and gamma-adjusted them back to standard RGB gamma.

Roughly:
Quote
0.0 #black
1.0 #white
blackcorrect = 0.0 ^ (1/2.2)
whitecorrect = 1.0 ^ (1/2.2)
result = (black + white) / 2
finalresult = result ^ 2.2
The above is inexact, and close enough to perfect for pixel art purposes. I don't actually calculate, I eyeball it (it's good enough though that I hardly ever need to redo it); But this is because I have used examples of polygons rendered with accurate gamma treatment as examples to develop my sense for this; IMO pixel art itself is not a useful training aid here, nor anything but a plain flat gamma-correct antialiased shape rendered by computer. (Blender is a nice tool here, with a shadeless white material on a black background it's easy to experiment and get accurate renders.)

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #12 on: March 07, 2009, 07:24:47 am »
Doppleganger: I do think something like this needs to be done too. I don't know if I can do it but I think Pixelation on the whole can do a good enough job of it. To answer your questions:

I will explain perfect lines more.

As to the abstraction and who my target audience is: I've noticed most pixel art tutorials online are basically 'look how I am doing pixel art, try to do the same'. I think this avenue of approach is best left to video tutorials (now that the technology to do this has caught up with us) and that a 'real' tutorial should best approach the fundamentals of the artform from the abstract towards a workable hypothesis. Ostensibly, this has with one leg on academia and one leg on practical application and I will not say this might not be a bit troubling (I can hear the 'lol pretentus artfagllool's from now) for some but this is my target audience: people that have tried pixel art 'blind' for a few months/years and are sensing a lot of the truths of pixel art but canno formulate them exactly. These people that want a theoretical framework that will help their work process and augment their already existing artistic instincts. That's the target audience. Not the "10 easy steps to pixel a street fighter sprite" people, whom are best serviced by numerous other tutorials on the internet already.

I do not intend to cover every aspect of doing pixel art because a lot of that is just doing art art. I want to cover the specific things relevant to pixels in particular that you would not get from reading a good book on art theory for example. I will not cover for example, color selection or anatomy or even rendering in the abstract. I will cover pixel clusters, banding, dithering and the partaining effects of these things. Along with anything else you guys will find worth saying on the side. In short, this will not be all-encompassing. I can't write a book on this, I am not equipped enough. And I can't make you guys write a book on this all together either, heh. But these are thoughts I've been trying to pull all together for quite a while now so this time is good as any. I want to write this and then when someone bands I want to link them to this so they can get a full understanding of what I am saying.

Gil - and other people - : As I said - and perhaps I should stress this more later on in the text - it's a juggling act between expressing 'infinite res' and also conveying what you're trying to render. If you are drawing something with a hard edge that theoretically needs a specular that would be less than a pixel big but you don't have the colors to fake subpixelling then tough shit, singlepixel specular it is. Note in fact how in your example, the shinier the specular, the BIGGER the pixel in question looks around the various other more elegant forms. In fact I postulate that a two-pixel cluster of a less bright color will appear slimmer than that single superbright fatpixel. I am not in a computer with pixel art apps so you'll have to test this out for me. I will write more on the subject when I'm at home. Your further observations are very welcome.

Arachne: curves can never be perfect and in my opinion between perfect lines and more calculated curves the pixel artist should go with the perfect line and then attempt to convey the added curvature of the object he's trying to render via AA, if available. But when we get to that proper you should write about it more.

About looking at the pixel you placed and making a judgment call if it made the piece better than before, that sort of thing goes without saying and really I can't base such a text on these methods. It would just deteriorate to "place pixels until you like what you did" well... I'm sure most artists have tried this method extensively. Hopefully through codification why one likes this placement of pixels more than that one will be revealed. A lot of your trouble with aa-ing and then not liking it and redoing it comes from when you have a lot of colors, a small space to antialias and you also want to convey a sharp shape there so the aa-ing you do touches the contour of your cluster and hugs it so much it begins to band. Then you look at it at 1x zoom and it looks blurry, so you remove the much aa. My further text will posit that good clusters of pixels don't need a lot of aa to begin with and that the artist should first learn extensively how to aa with a single shade between two colors with single pixels or clusters of two pixels (we all know what I mean, here) before they go into tapering and blending their shapes with more shades. The problems begin to occur, I mean, when the artist is trying to combine their blending of clusters with their aa-shaping of clusters. More on this when I am on my own computer.

Thank you for the feedback so far. More soon.

Offline skw

  • 0010
  • *
  • Posts: 390
  • Karma: +0/-0
  • Stuck in the Nineties.
    • View Profile
    • Johnny Theodore Customs
Re: Ramblethread! A brainstorm approaches!
« Reply #13 on: March 07, 2009, 03:42:32 pm »
Very interesting topic.  I'm sure I'll learn a lot from it!

Gil:  I found out that with such an approach to the detail, pixel art is all about shortcuts and signals rather than presenting the form as it is in the real world.  That means, an artist symbolizes the shape of a given form by means of subtle details like e.g. the 1-pixel highlight you have going in your example.  I'll pull it forth, tweaking colors a bit, and leaving out the second highlight (colors have a heavy impact on how the piece comes out, and how well the tricks work):



Having three available colors for the faces, it's a waste not to use the brightest one at one of the faces! :)

Helm, I remember you've already covered banding in a very interesting academic fashion at some point back in time -- I can't, however, find the right post.  I recall it was some Santa Claus piece.
Quote
Even a common man by obtaining knowledge becomes a Buddha.
sexual content, click at your own risk! https://www.facebook.com/szumprodukcje /also known as skurwy

Offline blumunkee

  • 0010
  • *
  • Posts: 321
  • Karma: +1/-0
  • We glub but glob.
    • View Profile
    • Homepage of P. K. Mays
Re: Ramblethread! A brainstorm approaches!
« Reply #14 on: March 08, 2009, 07:52:29 am »
Quote from: Helm
...As to the abstraction and who my target audience is: I've noticed most pixel art tutorials online are basically 'look how I am doing pixel art, try to do the same'. I think this avenue of approach is best left to video tutorials...and that a 'real' tutorial should best approach the fundamentals of the artform from the abstract towards a workable hypothesis...

I like this approach. When done right, it can create a deep and engaging dialog. As an example, watch the first 4 minutes of this:

http://www.archive.org/details/halmit1a

This is probably very different from how the average teacher presents an introductory Computer Science course. Any instructor can be comprehensive (this is the history, this is the processor, this is source code, any questions?), but itís an entirely different thing to present the subject in a genuinely provoking manner. Your opening comparison of pixel art to Go hints at that style of teaching.

Quote from: Helm
...Ostensibly, this has with one leg on academia and one leg on practical application and I will not say this might not be a bit troubling...

There is an issue of straddling the gap between the theoretical and the pragmatic. Theory is fine as long as there are some concrete exercises to complement the hand waving. The video lecture above is meant to be used along side the SICP textbook, which provides specific exercises to work through.

Exercises along the lines of ďhere is an image with some serious issues, address them based off of what you just learnedĒ can solidify the material.

I also like Abelsonís comment that Computer Science is not really about computers in the same way that Biology is not really about microscopes and petri dishes, or in sense that Geometry is not really about using surveying instruments. He then argues that the essence of Computer Science is really about formalizing intuitions about process.

This sentence especially struck a chord with me:

Quote
...when some field is just getting started and you donít really understand it very well, itís very easy to confuse the essence of what youíre doing with the tools that you use.

In the same way, pixel art is not really about dithering, or banding, or anti-aliasing, or even individual pixels. I wish I could come up with a nice short sentence that sums up what I feel is the true essence of pixel art, like Abelson did with Computer Science. Something that explains a certain aesthetic and process of problem solving. One that is both singular and holistic; both minimal in implementation and maximal in application.

If Pixelation gets its own tutorial, I hope it is written in a way that can instill these values for use in other art forms.

Iíll try to amass more concrete feedback later.
ALL CREATURE WILL DIE AND ALL THE THINGS WILL BE BROKEN. THAT'S THE LAW OF SAMURAI.

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #15 on: March 10, 2009, 04:58:57 am »
{...}

As mentioned before, the goal of the pixel craftsman is twofold. On one hand he tries to make the apparent resolution finer. On the other he struggles to represent what it is he's drawing. The two goals are always in friction. Let's look at these two pieces of high art I just devised:



And this:




I posit that both images represent the same idea. A man shitting in a sine arch.

The first image has a high apparent resolution because the lines are perfect and also - more importantly - because as the viewer looks at this they cannot discern a pixel grid, they cannot see the single pixel almost at all.

In the second image the single pixel is very apparent. If we zoom in a bit more in fact,




That there is a very confined space in which to represent the human figure in its volumes and shapes means that the more colors and clusters we employ, the more the underlying grid of the image has to show.

The particular ambitions of the pixel artist, at this level, are paramount. If one wishes to convey a fully rendered object as realistically as possible, it cannot be helped that the apparent resolution will be lowered. As clusters of pixels come to interact, places where the pixels 'line up' and betray their resolution are inevitable. The trade-off is that the rendered object appears more realistic, with whatever benefits the artist might assign to that. Let's look at a schema:



Here we have a simplified model of aesthetic motivation for the pixel artist. It isn't very different from the motivations of artists in other fields, but there are some additional considerations to inspect that are very pixel-art relevant.  On this point I'd like to say that I am not using the above terms as they're usually meant in the history of art. I am appropriating the terms slightly so the layman can follow along.

With abstraction I mean that the realized object of the piece of art does not clearly refer to something in the natural world.
With realism I mean that the artist is attempting to render his object lushly enough that the viewer will interpret it relatively literally.
With symbolism I mean that the artist is attempting to convey objects with clear higher functions without allowing for literal interpretations.

Try to think of your favourite pixel artists, and place them in a space within the triangle. Try to assign specific works by them in the triangle and then make specific observations about how each artist is prioritizing their two goals: hiding the grid/increasing apparent resolution and conveying the volume, light and surface of their intended object literally. You will find that artists near the top of the triangle will have very high resolutions and very simple/naive objects, whereas artists near the left end of the triangle will have resolutions of moderate fineness while their objects will be meticulously shaded. Art towards the right edge of the triangle will both have very low resolutions and very simple shapes!

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) and then place single-pixel, low-resolution level detail on various specific pieces to rejoice in the pixel-ness of his work just a little (the highlights on the hair here for example). The ambition of the artist leans heavily towards removing the grid, but doesn't frown away from going 'hey, here's my pixel, do you love it? I love it!' once in a while.

The complete abstractionist has effectively destroyed the pixel in his work, it is in the place of Ideal Space. It could be vector art or anything else that isn't shackled to the limitations of a monitor really. We do not have examples of such pixel artists really because as you might imagine, that goal would be very self-defeating. However there are a few artists whose work is very very close to vector smooth, like Panda or Ilkke sometimes, but you can tell they're pixel artists at heart because they can't contain themselves from putting in pixel-level details in a few places after all.

The symbolist pixel artist creates art that is very informed about its being made of pixels and wants the viewer to know it also. All of the modern 'retro art' fits in that edge of the triangle for me, with the artificially low resolutions and the flat and fat pixel character designs. These retro artists are not interested in pixel art technique to make the resolution higher, they are interested in invoking nostalgia on the older viewer or to inform the younger viewer of the semiotic particulars of older video game art.


I do not judge any of these motivations. It is however my belief that regardless of which way the artist might feel drawn towards, for their art to maximize its capacity as pixel art, they should reconcile their different aspirations so as to retain a place within the relative center of the triangle (the grey circle area). The realist artist should not attempt to completely abolish the pixel-level detail and end up with a blurry mess of a piece with 250 colors in it. The symbolist artist should not completely forego the attempt to make their pixel clusters achieve their ideal state. The abstractionist should not make their resolution that fine so that in the single pixel no longer feels like it belongs.

« Last Edit: March 10, 2009, 06:04:05 am by Helm »

Offline Ai

  • 0011
  • **
  • Posts: 649
  • Karma: +2/-0
  • finti
    • View Profile
Re: Ramblethread! A brainstorm approaches!
« Reply #16 on: March 10, 2009, 05:35:37 am »
It's interesting to see some of the thoughts that have occasionally entered my mind be formalized (I tend to think more in terms of Realism VS Abstraction plus an axis of ehm.. involved pixelcraft? (the things that highlight pixeledness, like the 'demoscene/amiga-ish' exaggerated highlights, certain types of dithering, intentional resolution drop..))

I have to say, that the top image is so abstract I have trouble thinking of it as anything but well.. maybe a floating house viewed through a doorway. (viewed sideways)
I presume you mean 'Abstractionist' where you say 'symbolist' for the last and repeated time :)

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #17 on: March 10, 2009, 06:00:06 am »
I was joking about the top image portraying the man shitting... or indeed, much of anything. It is in the Kandinsky/Mondrian sense that it conveys (badly, as I have no real creative interest in this sort of abstract naive geometricisim) a primal vitality through motion, color and shape. Check the writings of Kandinsky and Mondrian for more. The point was that it wasn't really representational. Perhaps I should take that joke out.

The "it's interesting to see some of the thoughts that have occasionally entered my mind formalized" statement is exactly the point of this thread. To formalize these thoughts and enter them all into a single, applicable theoretical framework.

No I don't mean 'symbolist' when I say abstractionist the one time that it occurs in the text.
I found what you were referring to and fixed it. Thanks.
« Last Edit: March 10, 2009, 06:04:27 am by Helm »

Offline tocky

  • 0010
  • *
  • Posts: 365
  • Karma: +0/-0
    • View Profile
    • my blog
Re: Ramblethread! A brainstorm approaches!
« Reply #18 on: March 10, 2009, 07:26:47 am »
is the abstract/realistic/symbolic triangle borrowed from McCloud? is it something older?

thanks for this thread, helm. it's heady, handy.

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #19 on: March 10, 2009, 08:17:13 am »
It's certainly inspired. I don't think he used that exact schema though. I think 'abstract' and 'symbolist' might be a bit too close for it to be very handy... we'll see.

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • 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

  • 0011
  • **
  • Posts: 649
  • 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 »

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: 300
  • 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: 5058
  • 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: 406
  • 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: 321
  • Karma: +1/-0
  • We glub but glob.
    • View Profile
    • Homepage of P. K. Mays
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

  • 0011
  • **
  • Posts: 943
  • Karma: +0/-0
  • Gotta love me
    • 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: 406
  • 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

  • 0011
  • **
  • Posts: 943
  • Karma: +0/-0
  • Gotta love me
    • 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?

Offline Dr D

  • 0010
  • *
  • Posts: 404
  • Karma: +0/-0
    • View Profile
Re: Ramblethread! A brainstorm approaches!
« Reply #30 on: March 12, 2009, 05:25:38 am »
Hey, I decided I'd have a little try at spotting some other banding issues in the art, but don't expect expect too much.



Note: I am very much a beginner when it comes to pixel art, or art as a whole, and despite the rather well-explained tutorial, I am still not entirely sure when I see banding or not (except staircase banding), so forgive me if I am totally off base, which I most likely am.
Also, this is the original version, and it isn't animated. I didn't re-do Helm's error-spotting. And it is slightly larger than his, so I think I spotted a few that he didn't look at.

Anyways, some feedback is appreciated on this.

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #31 on: March 12, 2009, 07:34:38 am »
I will keep the Go analogy, but I will explain it more on a final piece, with visual aids. I aim to make a little mario sprite made of Go pieces on a go board (it is a 18x18 grid so he fits hehe) so that will help.

As Gil says, the Go analogy works for me because clusters feed on the space around them and most problems in pixel art occur where clusters 'battle' when they touch. Same as Go.

Dr D : Good work! Here's some more.



The one with the ! pointing at it I think is probably necessary banding. It's just a full outline. It could be broken with aa but I think in such a dark place a full outline is probably for the best.

EDIT: keep the ideas and criticism coming. I really appreciate the comments, but DEEG DEEEPER!! I can take it. I don't want this to be half-assed.
« Last Edit: March 12, 2009, 07:36:41 am by Helm »

Offline ptoing

  • Administrator
  • 0101
  • *
  • Posts: 2892
  • Karma: +0/-0
  • variegated quadrangle arranger
    • View Profile
    • ptoing bloing
Re: Ramblethread! A brainstorm approaches!
« Reply #32 on: March 12, 2009, 10:19:04 am »
(it is a 18x18 grid so he fits hehe)

19x19 actually since you play on the crossroads and not in the squares :)

There are no ugly colours, only ugly combinations of colours.

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #33 on: March 12, 2009, 10:51:11 am »
I was talking of how many squares there are. I'm sure there's more interesting things to remark upon in this thread than that, though.

Offline ptoing

  • Administrator
  • 0101
  • *
  • Posts: 2892
  • Karma: +0/-0
  • variegated quadrangle arranger
    • View Profile
    • ptoing bloing
Re: Ramblethread! A brainstorm approaches!
« Reply #34 on: March 12, 2009, 11:06:10 am »
Indeed there are. Very interesting thread so far. When I can think of something interesting to write here, I shalt.

There are no ugly colours, only ugly combinations of colours.

Offline Hugo

  • 0001
  • *
  • Posts: 25
  • Karma: +0/-0
    • View Profile
Re: Ramblethread! A brainstorm approaches!
« Reply #35 on: March 12, 2009, 01:49:35 pm »
"and then place single-pixel, low-resolution level detail on various specific pieces to rejoice in the pixel-ness of his work just a little (the highlights on the hair here for example)."
i don't think demosceners have used highlights for this purpose. lot of demosceners have copied Boris Vallejo's style (overhighlighted pics). specular-dot-highlights were overused to make pics more glows, magics, "flash", hypnotics.

If i correctly understand, you prefer to start pics with "clusters-of-pixels" rather than "flat colors" (like painters). Pixel artists should work "areas-by-areas", rather than "from general to details" ?

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #36 on: March 12, 2009, 01:57:49 pm »
As I said I cannot speak for the intention of the demoscene artists responsibly, just making educated guesses.

A flat color is a cluster of pixels as well. I start my pieces with silluette and then I break it up to volumes and then I light the volumes. Then the pixel artistry begins.

Offline Gil

  • 0011
  • **
  • Posts: 943
  • Karma: +0/-0
  • Gotta love me
    • View Profile
    • My Portfolio
Re: Ramblethread! A brainstorm approaches!
« Reply #37 on: March 12, 2009, 03:45:50 pm »
Hugo, I suggest a thorough reread on the cluster part, I think you misread.

Btw, Helm, I think this is a great thread. Pixel art needs a lot more study to be considered a real art form. I feel that for many it is still a pop art gimmick, especially seeing the books that appear on the subject (lousy eboy references and stuff)

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #38 on: March 12, 2009, 04:41:05 pm »
I don't think texts such as these will help in any way with the popular image of pixel art, it will always be video-game and nerd-nostalgia related in the eyes of the general public. This is more for us as already established lovers of pixel art that want to apply some... taxonomy to our various fleeting thoughts on how best to approach making pixel art.

I do thank you for the encouragement though.

The next piece I write will be exactly about pixel clusters and therefore aa, buffering, tapering etc, I think it'll help Hugo understand, amongst others. It's the piece I am most anxious to write because I am not exactly certain what it will be about (the banding piece on the contrary, wrote itself, I had considered these things fully for some time before writing them) and that means improvisation and hopefully point-counterpoint dialogue will arise. I will suggest a pretty grand idea about unification there. Perhaps tomorrow. Perhaps the day after. It'll be the last 'big piece' of raw text in here before I start refining and shaping the whole thing into one text.

Offline Gil

  • 0011
  • **
  • Posts: 943
  • Karma: +0/-0
  • Gotta love me
    • View Profile
    • My Portfolio
Re: Ramblethread! A brainstorm approaches!
« Reply #39 on: March 12, 2009, 05:39:12 pm »
I agree that this text won't help the public image, but if we want this to be a proper art form, we have to believe it ourselves first. We have the people with the background to elevate this to the next level for ourselves and we owe that to ourselves if we are going to make any convincing argument to friends that what we're doing is more than just a second rate form of creativity.

Anyway, I might contribute to this cause with some animation knowledge, but I'm not sure which techniques applied to pixel art animation don't appear in traditional animation. I have some important stuff though for low frame animation, which definately ties in to pixel art. I also feel that there is a strong connection between what you define as pixel clusters and their individual trajectory through animated frames, which can make or break delicate animations. Sometimes I deliberately shade pieces incorrectly on some frames to keep a fluidity in some important visual clusters, such as a specular part.

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #40 on: March 12, 2009, 06:00:16 pm »
I think mainly subpixelling is pixel-only relevant as far as animation goes... what else? You animation people think it over.

I appreciate your sentiment but I do not also share it, you know... I don't want to prove to anyone what I think is art should be art for them also. Pixel art is already an art for me, I am starting with that as a presupposition when I write this stuff, it's not an apologia towards the unbeliever. If someone doesn't think pixel art is art then I don't mind to engage in exploratory dialog but I am not really interested to change their mind. Pixelation is already my "vital space", a friendly environment in which I don't have to explain I'm not an elephant every 5 minutes. It's enough for me, I don't need to go out and stake claim to larger areas.

I do not shy away from that perhaps our status as pixel artists on the whole would benefit from a larger awareness and acceptance of the medium as a valid one, artistically. And if it helps people believe in themselves that this sort of relatively (and I stress this) 'deep' approach to the subject exists then alright... but perhaps it's best if it doesn't, heh. A love of artistry should come from the heart, you shouldn't have some academic source to back you up when the going gets tough. Oh well, I don't think I'm doing any harm at least. Even if my attempts spawn a few "Pixel-art-is-ART!!!!" drones that go around pontificating "HELM SAID IT IN THAT THREAD THAT THIS IS DEEP, SO IT'S ART" well... that would be groan-worthy and embarrassing. But I'll survive and we'll survive and Pixelation will have gained from the discourse in any case.

Offline Gil

  • 0011
  • **
  • Posts: 943
  • Karma: +0/-0
  • Gotta love me
    • View Profile
    • My Portfolio
Re: Ramblethread! A brainstorm approaches!
« Reply #41 on: March 12, 2009, 06:23:56 pm »
I do agree with your views on it, though I do have that sort of self-justification to go through. Mainly because I'm putting a lot on the line lately to make my way into a business (game design), partly fueled by a love for pixels (only about 10% though). I assume that you have to go through or have gone through this self-justification period as a professional comic artist.

I know that subpixeling is the obvious technique to cover, but I feel there are some other. I will meditate on it.

Offline ptoing

  • Administrator
  • 0101
  • *
  • Posts: 2892
  • Karma: +0/-0
  • variegated quadrangle arranger
    • View Profile
    • ptoing bloing
Re: Ramblethread! A brainstorm approaches!
« Reply #42 on: March 12, 2009, 06:49:22 pm »
Apart from subpixeling and perhaps colourcycling I can't think of anything pixelspecific as far as animation goes. The rest is just like what you have in traditional 2D animation.

There are no ugly colours, only ugly combinations of colours.

Offline Gil

  • 0011
  • **
  • Posts: 943
  • Karma: +0/-0
  • Gotta love me
    • View Profile
    • My Portfolio
Re: Ramblethread! A brainstorm approaches!
« Reply #43 on: March 12, 2009, 11:36:53 pm »
Well, as I said you can write some stuff about pixel cluster movement over different frames. You want to make sure your visible elements have some sort of persistence, so the mind can make an animation out of simple frames. It ties in with Helm's theory on clusters.

Subpixeling on the other hand ties in perfectly with the theory on AA. I'll see if I can write some interesting stuff later. I'm sure Conceit has some insights on the subject too.

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #44 on: March 13, 2009, 08:32:41 pm »
Pixel Clusters

Let's look at this sprite from a NES game from 1992, Little Samson:



In the loop I show the clusters that make up his face, headband and hair.

A cluster of pixels of the same color here, exactly because the NES could allow only 3 colors (plus one for transparency) for the sprite, becomes extremely important. The headband is just one, the hair is just one, the shape of the face is one. The eye is one, and the other eye is another. This is a very pure example.

If we change a single pixel of these important clusters, what they signify changes, along with their relationship with the clusters around them.
Here's what happens when we move a single pixel around on each frame in various places. Note how the balances and relationships between elements change



NES art is a very useful step in learning to do pixel art because it forces the beginner pixel artist to realize the power of pixel clusters and finding ideal shapes for them to work in unison to convey the intended characterization, without getting bogged down in dozens of colors and a huge resolution.

Let's look at something a bit more complicated:



This is a piece by the lovely Kenneth Fejer. You can see his work here.

Let's look at a detail of the piece up close:



The cluster of pixels outlined in red is where we aim our attention. Around it there is another color tone that is halfway between the bright green and the dark green. Single pixels smooth out the pixel cluster we're looking at. That is called buffering or manual anti-aliasing. I will not go into detail as to what antialiasing is here, more capable artists/german-aa-machines are working on texts to fulfill this purpose. Let's for now assume you are well aware of how anti-aliasing works. The reason I am showing you this piece in particular is because if you look at the buffer shade there between the two main colors, you'd think 'well... these pixels aren't a pixel cluster, are they'. They do not touch, they are - mostly - single pixels, so what are they exactly?

They are part of the meta-cluster that they are buffering towards, or from. For reasons of simplicity, it is best to think of them as always belonging to the smaller cluster that is touching the bigger cluster, but this doesn't really matter in applicative terms.

Once the artist realizes that the anti-aliasing around a cluster is nothing more than part of that cluster and its main purpose is to define that shape better, they stand to expel a lot of the anxiety and confusion that usually occurs to the beginner when they're faced with the near-infinite options of pixel placement that are available when they start a new piece. The artist can stop concerning themselves with just placing single pixels willy-nilly and replacing them and rearranging them by trial and error "until something looks right" and can instead apply a functional, progressive way in which to build their art. Pixel clusters are the tool that the pixel artist uses to convey 99% of the render of their object, not pixels themselves. The beginning artist should start a piece with a single pixel cluster shaped as the silluette of what they're trying to convey. Let's say, for example that I want to draw a face.



This is what I start with. Then the silhouette should be segmented to temporary planes. The experienced artist, once comfortable with visualizing his model might not have to do this stage and go directly to the next one, but for the purposes of this tutorial I'll go ahead and do it:




This is more or less a simplified 3d wireframe, with the planes of the face. This isn't lit yet, it just shows me a selection of shapes from which on the very next step I shall pick to make my pixel clusters. Naturally the smaller the piece the more difficult to actually pixel this stage, but it's not difficult to imagine it, and the artist should always imagine the factual planes of what they're attempting to render.



This is really the most important level in establishing ones pixel clusters. I have chosen a light-source and lit some of the planes. They have created pixel clusters of different colors that are competing in the small space for definition and information. Please note that I have not anti-aliased consciously, nor have I removed much of the apparent banding yet. If your pixel art doesn't look solid in this stage, no amount of pixel polish and tricks later on will save it. This is where your traditional skills come into play. Note also that the palette I'm using isn't very contrasted yet, this doesn't matter. If you light the planes correctly, you can then adjust the contrast as much as you want the the piece will still stand.


Here for example is a drastic contrast adjustment via fast remapping:


"The horror... The horror."

Look at the planes in this stage before we move on. Isn't it easy to tell where buffering should be applied? It's a matter of common sense. The sharper the edge, the less anti-alias needed. The smoother the transition, the more anti-aliasing will be needed. The buffer pixels should never overpower the cluster they belong to.



Here I have refined and antialiased the clusters into metaclusters. Keep in mind that Anti-aliasing can create banding! Look below:



If the buffering pixels line up with an edge below they will band. This is an extremely common error with anti-alias-happy artists and they can spot that something looks 'off' but can't put their finger on what it is exactly. Well, now you know. This is where a pixel artist expert in anti-aliasing shows their true skill. This is the thick of the fray, as it were. Adjusting single buffer pixels until they don't band, but yet represent the intended shapes.



Here I do more and introduce dithering. Not a lot of it is needed in most pieces of pixel art. Dithering isn't a mystery of any sort, think of it as the tapered, fading edge of a brush stroke... the dither belongs to a parent cluster. The places where one needs to dither following this methodology are self-evident, it's where I didn't have enough colors to make a transition smoother. Again this creates banding (dither-aa-clash) and it renegotiates some unclaimed space from the flat pixel clusters. Solving these problems elegantly is what pixel artistry is about.



Though color is beyond the scope of this tutorial, here's the final piece with a palette. It's very easy to colorize a solid grayscale construction. Then bits of banding around the outline were removed and a final refinement and it's done.


{...}

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

Still a lot to write, a lot to flesh out, but let's discuss this part before moving on.
« Last Edit: March 13, 2009, 08:43:47 pm by Helm »

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #45 on: March 14, 2009, 10:23:11 am »


Just making art I'm going to need.

Offline skw

  • 0010
  • *
  • Posts: 390
  • Karma: +0/-0
  • Stuck in the Nineties.
    • View Profile
    • Johnny Theodore Customs
Re: Ramblethread! A brainstorm approaches!
« Reply #46 on: March 14, 2009, 12:13:32 pm »
What on to the pixel clusters, well. . . this is a nice bit of good writing!  I like the meta-clusters theory -- never thought of it in this way, or even if, never been able to formulate my thoughts in this way.  One question:  Is buffering the same thing as manual aa, ot is this a special type of manual aa?

I'm reaching an obvious conclusion that pixel clusters are nothing different than paint daubs in any other media, such as paints, or even digital stuff -- Photoshop sort.  An artist starts with emphasizing the spatial relations by means of a stroke-play, then goes on to define the right shapes and volumes out of vague blots and spots -- just as a pixel artist, after polishing a particular cluster, apply aa to it to polish it even more.  Then the colors mingle, and the hue once used as a buffer can be utilized somewhere else as a main cluster color. . .

I think you should've picked a little bigger picture for this tutorial, something the size of e.g. the Kenneth's woodgirl piece, as the changes, though visible, aren't easily discernible.

. . . and BANDING.  I think MEGA-BANDING or ROUND BANDING:


A sky without stars by BlackZero

. . . type "moon" in the search engine at Pixeljoint and check some examples at the end of a list . . .

needs a description on its own, though technically it's just a ROW OF FAT PIXELS, occasionally transmuting into the STAIRCASE BANDING.  This would mix well with the part on aa, since aa-ing round shapes is something all of us have or had problems with at some point in time -- and it's easy to commit some "banding mistakes" just as the guy in the picture above did.  I remember some professional artists switching to the pixel art medium had those problems as well.
« Last Edit: March 14, 2009, 12:18:22 pm by johnnyspade »
Quote
Even a common man by obtaining knowledge becomes a Buddha.
sexual content, click at your own risk! https://www.facebook.com/szumprodukcje /also known as skurwy

Offline Hugo

  • 0001
  • *
  • Posts: 25
  • Karma: +0/-0
    • View Profile
Re: Ramblethread! A brainstorm approaches!
« Reply #47 on: March 14, 2009, 01:21:55 pm »
"I'm reaching an obvious conclusion that pixel clusters are nothing different than paint daubs in any other media, such as paints"
yeah, i think the same thing...


but it seems this is not what Helm means...  :blind:

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: Ramblethread! A brainstorm approaches!
« Reply #48 on: March 14, 2009, 02:04:40 pm »
Yeah that's what I mean obviously, but the specific thing in pixel art is that you can go in and make the shape of every cluster very very deliberate, whereas in most real-art cases when you put your drawing utensil down on the paper you're going to have to live with a degree of randomness in its shape. You can always go in and mess with it later on but not to the fineness you would with pixel art.

Yeah buffering is the same as manual aa though as a verb it sounds better.

Quote
Then the colors mingle, and the hue once used as a buffer can be utilized somewhere else as a main cluster color. . .

Yeah, exactly, that sort of optimization of the same color slot both for buffering work and to be used as a main color for other clusters also isn't as common in other artforms. In oils, the artist might have a very limited palette too, but just by the natural way the oil strokes work they can do fades and stuff without reaching for a different color, if you see what I mean...

I disagree on the 'round banding'. I think circular gradients that are levelled like that are common in other sorts of art as well and they do not convey a lower resolution if their edges are properly buffered.

I don't mind that the piece of art I used is small, I would expect the dedicated reader to take the art and look at it in his program of choice after all.

So what's left now is to take this from the top and fix the writing here and there and provide more examples where needed, along with a few points that will occur to me later on. I don't know when I will do this, as I have troubles 'finishing up' stuff that I consider I've already essentially done. The information is there. The formatting... heh, not a fun job.

Offline skw

  • 0010
  • *
  • Posts: 390
  • Karma: +0/-0
  • Stuck in the Nineties.
    • View Profile
    • Johnny Theodore Customs
Re: Ramblethread! A brainstorm approaches!
« Reply #49 on: March 14, 2009, 02:29:52 pm »
Quote from: Helm
I disagree on the 'round banding'. I think circular gradients that are levelled like that are common in other sorts of art as well and they do not convey a lower resolution if their edges are properly buffered.

I wanted to focus only on the moon outline, not the whole lunar-light-to-the-sky gradient.  So, just to clear things out: compare with the piece above, basically it's something like this:



The left example.  The right one is an effect of putting automatic 1-pixel circles one "on top" of another.  It looks displeasing and even worse, but notice -- they don't band like in the previous example!

PS:  This tutorial will be a pretty massive thing when you release it in one bit! :)  Keep it up!  /What on to the general formatting, I can help with that if you like.
« Last Edit: March 14, 2009, 02:49:27 pm by johnnyspade »
Quote
Even a common man by obtaining knowledge becomes a Buddha.
sexual content, click at your own risk! https://www.facebook.com/szumprodukcje /also known as skurwy