AuthorTopic: Color balancing your pixel art  (Read 25089 times)

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: Color balancing your pixel art

Reply #20 on: February 22, 2015, 11:52:37 am
Another way to think of it is as strategic JPEGification. Which I'm sure you are horrified by, but I'm just trying to hit something you understand here -- JPEGification, especially at high compression levels, generates a lot of noise in high contrast areas, and hue distortion. It's not as close a match as simply sharpening the hue channels, but perhaps you can relate to it easier?

Anyway, I took a likely looking image from PJ over here, and applied various sharpening filters on the Hue or a+b channels (these are roughly equivalent). This is easy to do with GMIC, don't know another tool that lets you do that easily.


This includes the original for comparison.

Various degrees of resemblance to your color choice are apparent. It is most accurate, IMO, on the rocks. The rocks retain their overall color identity but, when zoomed in, the hues near edges are exaggerated in a way that increases contrast. In one frame the mammoth in the background gets a green highlight on its tusk, which struck me also as a choice you would make.
The overall effect is IMO better than just a standard sharpening (much more common, pretty much everyone does -that- AFAICS). It might be especially helpful for partially colorblind people.


A simple explanation of Sharpening might be:  it looks at the values in an area, and moves the resulting pixels 'apart' visually in proportion to how different they are. It increases local contrast, as compared to using, say, Contrast/Brightness tool.
Contrast/Brightness affects global contrast/brightness because all pixels of a given color are output as the same color -- the pixels around them do not affect the result. Neither of them need to be applied on any particular kind of channels, they are completely channel agnostic. Applying them on the three channels R,G,B is just the most commonly useful choice.

(I don't know what I definitely need to explain here, so don't be offended if I explain something you already know. I'm not really sure who knows what, though I'm getting the impression that a technical understanding of filters an artist might commonly use is relatively rare.)

EDIT2: I guess another point worth making is that this effect that you do with colors works better than it might otherwise because you tend to choose more faded/greyed colors as base colors to start with.. Kind of like squeezing most of the color to the edges like water in a sponge.
« Last Edit: February 22, 2015, 09:47:07 pm by Ai »
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline 0xDB

  • 0011
  • **
  • Posts: 873
  • Karma: +0/-0
  • Dennis inter-is.
    • dennisbusch_de
    • http://pixeljoint.com/p/1287.htm
    • 0xdb
    • View Profile
    • 0xDB

Re: Color balancing your pixel art

Reply #21 on: February 22, 2015, 08:53:36 pm
It'd be cool if someone ported the color balancer to pro motion as some sort of plugin. I'd use it more often if I didn't have to swap programs all the time.
I have had "look into Pro Motion plugin development" on my things-I-want-to-try-sometime list since forever, so this might just be the thing I will use to get into it. Here's an early work in progress screen (in spoiler along with ramblings):


I think I will need at least another day or two to get even a rudimentary working version done (it involves some archaic Win32-API programming which means 90% of the time, I am not writing any logic code but wading through old API documentation or writing system/initialization/cleanup code which is necessary but does not really have anything to do with the concept of color balancing or communicating with pro motion).

I have no clear concept of how the color balancing works in other applications though, so I have a straightforward approach in mind on how to do it. I will normalize the slider position to a value ranging from -1.0 to +1.0. Then I will modify each RGB triplet by multiplying each component with a factor derived from the slider value as mf = (1.0 + sliderValue) and cap the result at 255.

This will probably need some tweaking though because component values above a certain level would quickly climb towards their maximum as the slider gets pulled further to the + side.

And what happens for example if the R component is already capped at 255 (e.g. by starting at 170 and being multiplied with 1.5 (first slider halfway towards full red)). Pulling the slider further from that point forward would leave the R capped at 255 and unchanged... should the "excess energy" then be used to pull down the G and B components to make the RGB triplet more red as a whole?

Or should the modification perhaps be non-linear, so that capping never happens? This could be done by subtracting or adding a fraction of the distance of the component towards its minimum or maximum value. e.g. if slider value is negative do: component = component - sliderValue*component, and if the slider value is positive: component = component + (255-component) * sliderValue.
This way, e.g. R 170 with slider 1.0 would end up at 255 and so would R 128. Hm... not sure if this sounds right though as then with a full red slider, each R component in every color would end up as full red no matter how not-red the R component is before the adjustment, even R 0 would become full red at +1.0 this way.

I will need to experiment with this... maybe even have different options in the end.

I think it should also have at least three palette states to store/restore upon clicking some extra buttons for that:
State A: The palette as grabbed from Pro Motion upon starting the plugin (so one can always undo any damage by sending that back to pro motion).
State B and C as two different sets of slider states which can be stored retrieved to quickly switch between alternatives for making a decision which one suits the piece more.

Thoughts?

Offline Helm

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

Re: Color balancing your pixel art

Reply #22 on: February 22, 2015, 11:15:20 pm

Offline 0xDB

  • 0011
  • **
  • Posts: 873
  • Karma: +0/-0
  • Dennis inter-is.
    • dennisbusch_de
    • http://pixeljoint.com/p/1287.htm
    • 0xdb
    • View Profile
    • 0xDB

Re: Color balancing your pixel art

Reply #23 on: February 24, 2015, 02:28:00 pm
Hm... not sure about the information in that link... seems to be a lot of wild speculation in there.

I am done hacking up something fairly usable now (oh how the hours melted away like minutes...in a bad way sometimes... the Windows-API is just so...yuck! (but I love Pro Motion so it was totally worth all the trouble)).

It does not have a proper website yet but here is a screenshot and links to the thing itself(<- download) and instructions (also included in the .zip). Let me know if anything needs clarification.



Offline 0xDB

  • 0011
  • **
  • Posts: 873
  • Karma: +0/-0
  • Dennis inter-is.
    • dennisbusch_de
    • http://pixeljoint.com/p/1287.htm
    • 0xdb
    • View Profile
    • 0xDB

Re: Color balancing your pixel art

Reply #24 on: February 25, 2015, 03:35:17 pm
Hm... color balancing is interesting. Took two old pieces of art and played around with the color balance plugin:

--after balancing-->

--after balancing-->

So... that looks like crap right (they have many structural/pixel-technical problems too but the focus is on the colors and tones now)? Why is it interesting then?
What I think is going on: the source images do not have a good range of lows, mediums and heights. Each of those source images has an overbearing tint to it(first one towards orange and the second one towards yellow and magenta) and some of the original color choices are, independent of tint, not what they should probably be in tone either (most obvious example is the lower side of the cloud which should be much darker).

So what did the color balancing do? It quickly revealed that strong tint (I honestly did not notice that before I started playing with the sliders) and on top of that also revealed the tone range problem. This leads to both color balanced variants to look a little washed out and the first one also ended up very dark (second one feels a bit dark as well). If the initial tone range was better, as in, had lows and heights that made more sense (e.g. much brighter sky in the first example and a better transition from mediums to lows), the color balanced versions could look a lot more natural.

The conclusion I draw from this is: If it is impossible to isolate a certain area I see within the image as either lows, mediums, or heights within the color balancing, then the primary problem is not with the tint of the colors in the palette as a whole but with the tone(brightness) of the object in the scene.

Does this makes sense?

Offline Helm

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

Re: Color balancing your pixel art

Reply #25 on: February 25, 2015, 04:02:33 pm
DANGGG you are a hero. Thank you very much. Can't believe a few days ago I was wishfully thinking for this feature and now it exists. I've tested it and it works fine for me. Actually, if I can do anything for you to pay back your work hours let me know, Dennis.

The values versus tones issue you brought up seems to be correct to me. A lot of issues with colors are often issues with values that people misunderstand as colors.

Offline 0xDB

  • 0011
  • **
  • Posts: 873
  • Karma: +0/-0
  • Dennis inter-is.
    • dennisbusch_de
    • http://pixeljoint.com/p/1287.htm
    • 0xdb
    • View Profile
    • 0xDB

Re: Color balancing your pixel art

Reply #26 on: February 25, 2015, 04:50:14 pm
DANGGG you are a hero. Thank you very much. Can't believe a few days ago I was wishfully thinking for this feature and now it exists. I've tested it and it works fine for me. Actually, if I can do anything for you to pay back your work hours let me know, Dennis.

The values versus tones issue you brought up seems to be correct to me. A lot of issues with colors are often issues with values that people misunderstand as colors.
:)
I am equally surprised. I did not think I still had it in me to produce something useful and not get distracted, bored or fed up with it halfway towards the goal. I have been playing around with it a lot and having it is already a reward in itself. I am happy it works for you as well and I can not think of any payment. Just continue to make great art and to give great critique/advice and maybe spread the word that this exists where appropriate.

I am really happy right now and glad I could contribute something of use.

Offline DawnBringer

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

Re: Color balancing your pixel art

Reply #27 on: February 25, 2015, 05:10:21 pm
Impressive, but I assume you haven't implemented functions/options for brightness-preservation which is key to quality color manipulation (however that can be a tricky sucker, one of the most challenging problems I've encountered...I landed on an iterative error-correction)

Offline ptoing

  • 0101
  • ****
  • Posts: 3063
  • Karma: +0/-0
  • variegated quadrangle arranger
    • the_ptoing
    • http://pixeljoint.com/p/2191.htm
    • View Profile
    • Perpetually inactive website

Re: Color balancing your pixel art

Reply #28 on: February 25, 2015, 05:21:45 pm
This is the best shit ever! Go and write an email to Cosmigo so they put it on their page so people can dl it from there as well.
There are no ugly colours, only ugly combinations of colours.

Offline 0xDB

  • 0011
  • **
  • Posts: 873
  • Karma: +0/-0
  • Dennis inter-is.
    • dennisbusch_de
    • http://pixeljoint.com/p/1287.htm
    • 0xdb
    • View Profile
    • 0xDB

Re: Color balancing your pixel art

Reply #29 on: February 26, 2015, 07:44:02 am
@ptoing: Thanks. :)
I might send them an email but I should probably make a proper project page with a little description and screenshots first (I already tweeted about this @cosmigo but there was no reaction, so I guess they are just too busy anyway.) and let it rest for a couple of days or weeks to make sure I am really done with it and that I do not wish to suddenly add or tweak some feature(s).

@DawnBringer:
Yes that would be tricky because the task is to solve a single equation containing two unknowns after modifying each component of the color triplet... so there are three equations and six unknowns in total.

The relative luminance (I just call that brightness here) is calculated as:
yo = 0.2126 * Ro + 0.7152 * Go + 0.0722 * Bo
o = original
m = modified

In the Color Balancing Plugin I apply each modification sequentially, first red, then green, then blue, according to the user supplied slider values and depending on what the calculated brightness is.

So for example, when Ro becomes Rm, then the new brightness is:

ym1 = 0.2126 * Rm + 0.7152 * Go + 0.0722 * Bo

and to keep the brightness yo, so that yo == ym, the task is to modify Go and Bo or in equation form:
yo = ym1 = 0.2126 * Rm + 0.7152 * Gx + 0.0722 * Bx

One equation. Two unknowns. No unique solution to the equation. Could solve it for either Gx and keep Bx unmodified or solve it for Bx and keep Gx unmodified (or randomly keep "guessing" a solution where both are modified a little until ym1 is approximately the same as yo).

I decided against trying that because that would have an impact on the next two component modifications. The final Gm and Bm would end up being based on something else than the original color triplet, something which might be against the artists intent.

So I leave brightness preservation as an exercise to the trained eyes and capable hands of the artist who is in control of the sliders. If they pull down/up one component, they can tweak the other two components into the respective opposite directions a bit, in a weighting of their own choosing, to counter the decrease/increase in brightness manually and in a way that suits their intended result best (or even not do that if their intent is to darken/brighten via color balancing).

Pro Motion also already has palette editor where user selected ranges of colors can be tweaked by hue, saturation, brightness and contrast simultaneously, so using the built-in palette editor and the color balance in combination back and forth already provides the artist with all the control they need to reach the intended result (or to play and arrive at a visually pleasing result via happy accident).