Resources and Support
 Pixel Joint Forum : The Lounge : Resources and Support
Message Icon Topic: Work in Progress Color Replacement Tool Post Reply Post New Topic
Author Message
lirmont
Seaman
Seaman


Joined: 12 January 2014
Online Status: Offline
Posts: 2
Quote lirmont Replybullet Topic: Work in Progress Color Replacement Tool
    Posted: 12 January 2014 at 7:40pm
Sprite Remixer





Hello! So, half a year ago, I had the need to write a feature that would automatically organize an image into a coordinated palette for a painting feature. In other words, load an image, group the colors, and let the end-user pick from them. I read this thread here on pixeljoint while I was trying to figure out how colors work during that process: http://www.pixeljoint.com/forum/forum_posts.asp?TID=10695

So, I want to say thanks for that first. To make a long story short, this is the step after that feature. This tool I've developed loads an image, analyzes its colors, groups them into ramps, and lets you make color changes based on a subset of those colors (so you're not forced to manually choose each color in a complicated image). It's still a work in progress, but some people that have seen it thought this community would be interested in what it does.

So, here's the video where I walk through the program (it's available in HD, so you might want to view it at 720 quality in fullscreen): https://www.youtube.com/watch?v=JzsbGfJTmkI

For those of you who are interested in how it does what it does, the second half of this post is an explanation. Thanks!

--

Understanding the Underlying Color Technology

When the program loads an image, first it removes all the parts that aren't requested by the user. Then it iterates over the image's pixels, storing unique colors. In other words, if the user is only concerned with the arms of a sprite, the program is only going to consider the colors that the arms use (as opposed to, say, the portrait). That's important, because the program can mix and match other sprites (in effect, remixing them). This color-specific example doesn't do that, but hopefully you get the idea.

From Unique Colors to Color Relationships

Step one is to get all the unique colors in a given part of the image, but just having all the colors in the sub-image isn't enough to simplify anything. Imagine if the program presented you with all 16 unique colors of a sprite. You'd have to set all of them, just as though you were doing it in a graphics editing program. I mean, imagine if the sprite had 160 unique colors or 1600 unique colors. So, to simplify that, the program goes about figuring out how the unique colors are related. Once it's got the colors laid out into color ramps, then we have a lot of interesting information at our disposal. Obviously, it's an easy thought to set out to replace the two colors at the edge of any given color ramp. That's the end points color replacement method.

End Points and the Codominant Pair Color Relationship

If we consider two colors in a pair, how are they related? In the codominant pair, it treats both ends of the color ramp as significant. In other words, we walk directly from the starting color to the ending color over a perceptual color space, and the program lets you set those two colors separately. Because both of the colors are significant, there's no extra information needed to make color choices.

Intersections and the Major-Minor Pair Color Relationship

Where intersections are concerned, if one intersection goes to another intersection, the relationship is a codominant relationship (where the colors at each intersection are significant). If the intersection goes towards an end point, the relationship is a major-minor relationship, where the change in hue and lightness are used in tandem to morph the significant color at each step (creating a new color at each point until you have a replacement for all the insignificant colors contained in the ramp). Effectively, you get a perceptually correct hue shift (based on the original colors).

Filling in the Gaps with Minor-Minor Pair Color Relationships

When two insignificant colors wind up next to each other in a color replacement method, they are put into a minor minor pair. It's exactly like the codominant pair relationship, but it happens after all the other more important pairs are set (and its values are set implicitly by other things in the color map).

Putting it all Together

So, behind the scenes, the program does a lot of complicated color analysis. However, that's exactly where you want the work to be done. Because it does all that analysis, you can set a couple of colors (check out the charcoal chocobo) and get a pretty good result in the intersections mode (with effectively no knowledge of color). You can also get a very controlled result with the "End Points & Intersections" mode. It requires a bit more knowledge of colors, but you can use the suggested color lightness (in association with the color select dialog) to gauge what might be an acceptable color (re: you can pick a color at random and set the lightness to the right range).
IP IP Logged
neota
Commander
Commander
Avatar

Joined: 27 November 2018
Online Status: Offline
Posts: 158
Quote neota Replybullet Posted: 13 January 2014 at 3:30am
Having flirted with this concept a little myself, I can understand how it works.
And I thank you for the related idea you gave me. I must point out one key point: You have explained what your software does, it's also important to explain why we should use it. So far, it presents a lot of complexity that we would have to learn, for a task that most of us achieve fairly quickly by simple manual tuning of palette colors.

absolutely.
IP IP Logged
lirmont
Seaman
Seaman


Joined: 12 January 2014
Online Status: Offline
Posts: 2
Quote lirmont Replybullet Posted: 13 January 2014 at 3:57am
From a purely artistic standpoint, you would use it at the very end of your workflow to experiment with different hues and saturations (rather than different lightnesses, but you can do that too) without having to manually set all the colors in a given ramp. This program has the ability to let you set only one color of the ramp to effect the whole ramp by using whatever work you already put into your pixel art, and ramps can be from 1 to any number of colors. In other words, you already did all the heavy lifting getting the perceptual relationships hammered out. This program just prevents you from having to do that part of the work again. 21 minutes into the video, I play around with a 30+ color piece of pixel art by Lijj that demonstrates this. Here are still frames of something like that (original first then a random recoloring).





From an outside standpoint, someone with no knowledge of the perceptual lightness of color (see: the L*a*b* color space and the science and experimentation behind it) can use this to recolor something in a way that wouldn't visually demonstrate that lack of knowledge. For example, here's another recolored piece of pixel art (original first then recolor).





The process for recoloring the "Bomb Lord" sprite took less than a minute, setting only 2 colors (but affecting 11). Out of curiosity (because I have no experience with pixel art), how long would that have taken on average to accomplish in your favorite program? I mean, thinking "I have this finished piece, but I want to see it in blue now", then making it happen. Or, would you even consider changing colors after you have a finished piece right now?


Edited by lirmont - 13 January 2014 at 3:59am
IP IP Logged
neota
Commander
Commander
Avatar

Joined: 27 November 2018
Online Status: Offline
Posts: 158
Quote neota Replybullet Posted: 13 January 2014 at 4:43am

Using the same base color you specified, here's my result. Stopwatch says 57 seconds.  (Tools : GrafX2, and my own 'advanced interpolate' script for GrafX2)

It's a good point you make that not everyone gets LAB. Although if they use something like GPick, perhaps they could get it.


Edited by neota - 13 January 2014 at 3:49pm
absolutely.
IP IP Logged
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum