AROS Graphics Operations

[miker1264]

There are many graphics effects and transformations that can be introduced to AROS programs.

One such transformation is something I have wanted to do for some time but I couldn't begin to understand how to do it. It is called HSL Hue Rotation where a color group transforms to another one such as Blue to Green. How does that happen?

The IconEdit program I'm working on may be a great place to experiment with this. I only need two basic inputs which can be determined by mouse coordinates in the window. For ARGB images there is no colormap so I will display a colorwheel instead. From the menu select "Hue Rotate" to start the function. Select a pixel in the image in the source color group. Then pick a point on the colorwheel graphic as the second color value.

The central conversion is from RGB Colorspace to HSL and back again for each color in the original image. I found two such Algorithms in C++ but it is basically the same code for C also. They are RgbToHsl and HslToRgb.

Once we have the source color and the reference color it's simple conversion and mathematics. The Hue is the base color value but in HSL it is actually a degree measurement from the HSL Colorwheel. So we find the degrees value for both hues to find the difference in rotation. For example, if we have a nice blue png drawer icon image and we select green as the reference color from the colorwheel then the degrees are roughly 260 for blue and 120 for green. So the rotation value is positive 220 or negative 140. This rotation is applied to each pixel in the original image trasnforming the blue drawer icon to a nice green one!

Note that every pixel is changed even ones we want to keep. To preserve underlying pixel values we use a white pixel mask but that's another topic for another day! 

[magorium]

How does that happen?

That is a nice summary of how that works.


What i am uncertain about though is if that was an explanation that requires some confirmation for you or if there is an actual question in there (sorry, i did not had my cup-a-tea yet    ) ?

We have a colorwheel, for an example see https://github.com/deadw00d/AROS/blob/master/developer/demos/colorwheel.c

For manipulating the individual pixels you can have a look at directory https://github.com/deadw00d/AROS/tree/master/developer/debug/test/graphics

There are two specific examples there (sorry, i can't recall their exact names) that opens a window and 'fades' the colours depending on the location of the mouse pointer. One doing so using matte colours and another doing so transparently.

( I linked to deadw00ds github but those files could be taken from any AROS repository ).

I take it the transformation from rgb to hsl (and back again) is known to you. Which only leaves the actual rotation (and i assume the c example you are using takes care of that part) ?

Note that every pixel is changed even ones we want to keep. To preserve underlying pixel values we use a white pixel mask but that's another topic for another day! 

Ok, so are you talking about rotating certain parts of the picture only then ? Because if you rotate in hsl colorspace (for the whole picture) then the only thing you need to keep track of is the rotating angle (and rotate back when restoring the original image colors). Yes, there is an error-margin there that screw things up, but multiplications are cheap    (but perhaps i misunderstood what you wrote).

[miker1264]

Ah the AROS Colorwheel or ColorRequester.

Maybe there is code there for returning a color value in rgb ?

I have both algorithms for rgb to hsl and hsl back to rgb. I just need ReadPixel to return an rgb value I can use instead of ULONG pen value.

I've already done color rotation by swapping color channels.

Imagine swapping all 'g' values for 'b' values such that each rgb is now 'rbg'. The blue image turns green. 

I just don't know the exact color rotation. I will come up with a test for that to make a tables of rotation values.

[magorium]

Ah the AROS Colorwheel or ColorRequester.

Not meaning that your own colorwheel implementation is any less than this one. I mentioned it because it is probably more standard and convenient to use for your use-case.

Maybe there is code there for returning a color value in rgb ?

I have both algorithms for rgb to hsl and hsl back to rgb. I just need ReadPixel to return an rgb value I can use instead of ULONG pen value.

That is why i directed you to those two examples that i mentioned 

Perhaps even better, some documentation, see https://en.wikibooks.org/wiki/Aros/Developer/Docs/Libraries/CGFX (readrgbpixel/writergbpixel).

Working with something other then planar bitmaps requires a bit of a different approach. You can determine the 'type' of the bitmap when you load it and act accordingly (so that you are able to support both planar and rgb bitmaps, or ignore planar altogether if you wish to do so).

I've already done color rotation by swapping color channels.

Imagine swapping all 'g' values for 'b' values such that each rgb is now 'rbg'. The blue image turns green. 

Yeah, i am familiar with the concept of messing up the color-values ... wrongfully 

[miker1264]

 :Pmagorium

One day I was working with the Amiga Clown. You may know him. 

I was trying to get the right colormap for an ilbm. But all I had for reference was a png PLTE chunk. So natural I used a hex editor and copied the color values. BUT I forgot that png puts the chunksize before or after the chunkid, but ilbm was different.

So my ilbm colormap was 4 bytes off...imagine my horror and surprise when the clown turned GREEN.

But why did it turn green? We shifted the colormap 4 bytes so we disregard the the first rgb. So we basically shifted it 1 byte to the right so r becomes g, g becomes b, and b becomes r.  It shifted.

It's almost like you know what I'm thinking. 

Yes. I intend to use ReadRGBPixel and compare output to ReadPixel.

Of course, the HSL Colorwheel I refer to is different than a color requester.

I suppose the interesting question is: Can I use HSL Color Rotation on an ILBM image then save it as ILBM ? Yes. Because it is an indexed image. And we only need to change the rgb colormap values. That would be super exciting! 

[miker1264]

Success! The RGB to HSL algorithms I'm using are working. And my IntuiText is also working for Icon Class. I wish I could change the font and whether it is bold or italic.

In the screenshot you see the rgb color sample. Then it is converted to hsl. You see those values. As a test I converted hsl back to rgb to compare.

The hue value is one degree off from the on-line calculator. I suspect it is a rounding error in the calculation for hue. The value is stored as a double but it gets converted to int.

In the real world if we see 35.59 we would naturally Round Up to 36. But when you cast as (int) it truncates the value to just 35. A true method to Round Up/Round Down is needed to correct the Off by One Error. That also throws off the G value in the output rgb value as you can see. It's very precise mathematics.

[miker1264]

Here is the conversion code I am using. It is heavily modified by me to fit the icon program.

[miker1264]

What exactly is an "HSL Color Rotation" then ?

If you have a green icon image selected and you want to do a color rotation you must have three components. First the image to modify. Second choose a source color from the image. Third choose a reference color from the HSL ColorWheel as you see in the attachment.

If our source color is a shade of green and we select golden orange as our reference color the program will convert each pixel to HSL then add the Rotation Value in degrees to rotate each pixel around the wheel. The result looks amazing!!

Changing the "color theme" of icon images is especially useful in making new icons or new iconsets from an original set. If you have blue drawer icons and you want a nice set of green or purple icons, just do hsl color rotations. Sounds easy enough. 

[miker1264]

This is a sample of HSL Hue Rotation.

The source color group is light brown. The reference color group is light blue.

ALL pixels in the image including the background are rotated by adding the rotation value to each. You see the result.

To mitigate changing backround colors masks can be used. In addition to masking individual colors such as white, black, shades of grey can be skipped, or selectively filtered out. In our case we can filter out the white and yellow in glow borders so they won't be processed in the hsl hue rotation.

[miker1264]

Hmmm. I kinda like the chocolate brown drawer icon. 

This is what is possible with HSL Color Rotation. It's a color rotation because I now realize we must adjust Saturation and Luminance as well as Hue to get the desired effect. The original icon was a plum purple from Amiga OS 3.5 days gone by.

The same type of color rotation is possible with Dual-PNG. 

For the processing I rotated the hue 80 degrees and adjusted saturation to 50% and luminance -10. I will continue to experiment and to incorporate these cool functions in IconEdit.

[magorium]

One day I was working with the Amiga Clown. You may know him. 

I was trying to get the right colormap for an ilbm. But all I had for reference was a png PLTE chunk. So natural I used a hex editor and copied the color values. BUT I forgot that png puts the chunksize before or after the chunkid, but ilbm was different.

So my ilbm colormap was 4 bytes off...imagine my horror and surprise when the clown turned GREEN.

I am indeed familiar with the Amiga clown-face.... judging on my own story with it, it could have been my personal face 

For some reason i made 2 mistakes at once. One being the fact that i didn't took endianess into account properly and my code was off by one byte. At the time i truly wondered if the clown had been drinking a bit too much alcohol because his nose was a bit blue 

It's almost like you know what I'm thinking. 

Nah... we are just both stupid in the same way 

Yes. I intend to use ReadRGBPixel and compare output to ReadPixel.

You'll be amazed of the outcome... ah well, seeing your follow-up post, you did manage to conclude that on your own 

Of course, the HSL Colorwheel I refer to is different than a color requester.

True, indeed.

I suppose the interesting question is: Can I use HSL Color Rotation on an ILBM image then save it as ILBM ? Yes. Because it is an indexed image. And we only need to change the rgb colormap values. That would be super exciting! 

Sure you can. It is a bit different to implement than your average rgb color-shifting but it should be do-able.

With Free Pascal i can load the image in a special 16 bit per colorgun format (so 64 bits per pixel if you include alpha channel) and to any translation or filtering. That offers more than enough fire-power to do some precision color-shifting.

[magorium]

Poor kitten, turning up all blue 

Hmmm. I kinda like the chocolate brown drawer icon. 

that color should go well with some vanilla ice-cream 

This is what is possible with HSL Color Rotation. It's a color rotation because I now realize we must adjust Saturation and Luminance as well as Hue to get the desired effect.

ah..... yes, indeed there are other things that make color rotation work a bit better :-)

For the processing I rotated the hue 80 degrees and adjusted saturation to 50% and luminance -10. I will continue to experiment and to incorporate these cool functions in IconEdit.

Thank you for the progress report and thank you for adding that to the icon-editor. It is a welcome addition that one can play with.

Congratulations on yet another great job !

[miker1264]

magorium

Although HSL Color Rotation is nice for producing Glow Icons...

[miker1264]

magorium

It's even nicer with 32bit Dual-PNG Icons...

And Icon Alias would make replacing these drawers easier with new iconsets. 

Better yet when I introduce the Wu Algorithm in IconEdit to produce Hybrid Icons from PNG like ILBM2ICON does the 8bit Glow Icons will be nearly flawless even on AROS 68k. 

[AMIGASYSTEM]

miker1264 it would be useful and exceptional if in system startup you could change the color of all the icons of the system, in order to adapt them to the theme