GLBasic forum

Codesnippets => 2D-snippets => Topic started by: CW on 2013-Mar-25

Title: Custom Color Wheel
Post by: CW on 2013-Mar-25
It is with great pride that I share my new Custom Color Wheel function. What started out as a one-day project grabbed hold of me, and it took me 12 days to complete.

This function may come in handy for anyone who is working on a paint program, or any customization routine, or any program in which the programer would like to give the user more than a dozen colors to choose from. The demonstration program calls on the ColorWheel function so that you can choose a color for the screen. (Yeah, I know. It's a boring example. But I think you will recognize the potential.)

Rendering all of those colors was a real challenge as the SETPIXEL command is deathly slow. To manage this limitation, the Function attempts to load a PNG image of the colorwheels, and only if that file can not be found does it render a new set of color wheels and saves them to the PNG image file for next time. The down side to loading the PNG image is that the calculations for pixel color selection are highly dependent on the loaded image being in EXACTLY the right place, so if the screensize is changed, the image file will no longer map to the calculated values. Therefore, if you change the screen size, you will need to either delete the colorwheel PNG image from the CWFILES folder, or you will need to set Delete_ColorWhl_Flg = TRUE for a single run of the program. I apologize for the hassle, but it is worth it for the speed gained in loading the image rather than generating it from scratch.

The PNG image file is not included, so the first time you run this function, it will render the color wheels to match your system as you watch; and then it will save the PNG image to the CWFILES folder. I tried rendering the wheels off-screen, which was faster, but also much more boring. Rendering on screen gives you something to look at.

You may be interested in knowing that the GETPIXEL() command is not used. First of all, because it is far too slow for this function, and secondly because the colors it attempts to read from an image can be off. The beauty of this function is its speed and precision. Each pixel color is exact, for the algorithm which calculates the pixel color is the same algorithm which rendered the image in the first place.   

This brings me nicely to the next item. Parameters.
There are three parameters available to the programer at the start of the ColorWheel function.

The first, as I've already mentioned, tells the computer to delete the png image and render it anew.

The second allows you to turn on and display, or turn off and not display, an "OK" button on the main color wheel screen.
The OK button allows the user to exit with his or her chosen color immediately from the colorwheel screen. If this parameter is set to FALSE, the user must exit the function by way of the Slider Screen (which is obtained by clicking the Right mouse button.) Changing the setting on this parameter will require rendering the ColorWheel image anew, so that the button is displayed on the static screen image.

The third parameter sets a delay timer which is used on the Slider Screen, used for the RGB incremental buttons on either side of each R, G, and B sliders. Increase or decrease this timer (which watches the system clock) to your liking. The delay can be turned off altogether for a swift and smooth slide. But this can make setting exact numbers difficult.

I have allowed within the function, a place to accommodate additional features. This area is duly marked by comments. One feature which I may implement, if I find its absence annoying, is a way to enter numerical RGB values directly from the keyboard. But that is a feature for a future version which I did not feel the need for presently, given the size of the function in its current form and the time I have spent on it. (This started out as a feature for my Animation Spreadsheet project, and I am anxious to get back to this main project.)

In the course of writing this function I learned some really interesting things regarding to the Color Wheels and their color locations on the three-dimensional color-cube containing all possible colors which our computers can display. My next project will be to type up a post on these interesting, wonderfully mind-twisty things. When I do, I will post it to this thread.

Cheers!
-CW     

Title: Re: Custom Color Wheel
Post by: bigsofty on 2013-Mar-25
Very handy, for any situation that requires a colour selection. Thank you for sharing!  :good:
Title: Re: Custom Color Wheel
Post by: Moru on 2013-Mar-25
Wish I had that one four years ago, thanks :-)
I ended up just doing a simple polyvector thing with a different color in each corner and let GLBasic interpolate the rest but this is much better looking and exact.
Title: Re: Custom Color Wheel
Post by: fuzzy70 on 2013-Mar-25
Thanks for sharing that CW, I can see a few uses for that coming up  =D =D

Lee
Title: Re: Custom Color Wheel
Post by: erico on 2013-Mar-25
Looks really interesting, nice read!

I didn´t give a try yet, but 2 things come to mind (which might already be there :-[):
- numerical enter (ye in case it is used more into a technical app)
- the yellow color wheel (ye in case it is for an art app)



Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-26
Thank you, everyone, for the nice words.  =D

Hi Erico.

A way to enter numerical values will be the next improvement. You mentioned a yellow-wheel. I have no background in art, so can you please tell me about that?

Thanks!
-CW
Title: Re: Custom Color Wheel
Post by: erico on 2013-Mar-26
It is a color wheel that does not have white, I can´t seem to find the official name (but in a BR book here).
But it is like these here:
http://emptyeasel.com/2007/03/16/using-the-color-wheel-color-theory-tips-for-artists-and-painters/

It does not have white or black.
That is good for painting.
Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-26
I see what you mean. I could possibly adapt this method to displaying such a color wheel, but it wouldn't be easy.

It seems to me that there are three, and possibly more, fundamentally different types of color wheels. The one I did is based on a mixing of RGB colors, where Yellow is the opposite of blue and where all of the colors together form white. That is good for computer art.

Then there is the type of color wheel based on the primary (paint) colors, like the wheel you linked to, where yellow is the opposite of purple and where all of the colors together combine to form brown.

Then there is the type of color wheel based on light, where all of the colors together combine to form white, but where the colors, being of the light spectrum, have no opposites (unless the 'opposite' of a wavelength is that which combines to form no light at all.) Such a wheel (or rainbow?) could be useful in optics, I suspect.

Rather than expand on the current color wheel to include a yellow-wheel, I think it would be better to create an entirely different function for that, using some sort of reference matrix to convert from RGB format to RYB. Such a matrix probably exists, but it is beyond my current abilities to devise such a thing. Still, it could be a really neat learning challenge. The color wheel would display mixtures of primary colors with graduations of white and black along the radii to obtain pinks (and/or darker hues). The output would be listed as (R#,Y#,B#) instead of RGB. Anyway, that is a project for another day. I have other things to work on before then, but I hereby freely share my code and methods with anyone who thinks it would be an interesting project to tackle.

-CW
Title: Re: Custom Color Wheel
Post by: erico on 2013-Mar-26
You are totally right on the 3 methods of color sets. :O
I wont even bother you with LAB colors ;)

It is just I find what you did really soo amazing :good:
Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-26
LOL, well Thank You!  :booze:
-CW
Title: Re: Custom Color Wheel
Post by: Moru on 2013-Mar-26
What did you use for compressing the files? I can't seem to unpack all the files in the archive.
Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-26
I used the GL-Basic zip utility, found under the Tools tab to zip the folder. But the text on the utility is in German (two words). I don't know what it says, but it seemed to work.

Thank you for letting me know that you are having problems unzipping the folder. If people can't unpack it, that is very bad. Did you try right-clicking on it? or Left-Click Extract All? If those option are not available to you I will hunt down a different compression utility and redo the upload. I wonder if the fact that I'm running a 64-bit system is causing problems with the GLBasic zip. Has anyone else had trouble with the format I used? If so, don't be polite. Please let me know!

-CW

PS. At the end of this post is attached ColorWheel.7z, compressed using 7-Zip, a free utility which can be downloaded at:
http://download.cnet.com/7-Zip/3000-2250_4-10045185.html (http://download.cnet.com/7-Zip/3000-2250_4-10045185.html)
(Note that I have removed the 7zip file. Now that the problem is solved, that version is redundant.)

I can't explain why you wouldn't be able to unpack some of the files in the folder unless something was corrupted during the compression process. (Access conflict? Don't know.) anyway, I went back and compressed it using the GL-Basic zip utility again and updated the file attached to my original post. Please leave feedback about success/failure in opening my program.
Title: Re: Custom Color Wheel
Post by: mentalthink on 2013-Mar-27
Hi CW thanks a lot for this Code, sometime ago I needed something similar.... I think for the App 3D I have in mind this comes very very handy... (whit your permission I will add in my code)

And the UI it's very nice  :good:

Title: Re: Custom Color Wheel
Post by: Moru on 2013-Mar-27
I used 7-zip for opening and extracting. The gbas file was 0 bytes, some other files I got the message "compression not supported" Mabe it was cut off while uploading because the new file was 200 kb larger now. However the gbas file is still 0 bytes and three other files has "unsupported compression". If I use the windows XP unpack function I get "unexpected end of file". Most likely your upload is not complete. Compare the size of the file on the server with your file before uploading, are they the same size? Mabe remove the .exe-file from the file to make it smaller?

Tried Winrar now too, no luck.

Played with making my own colorwheel, used setpixel to display it and it is much faster than I was expecting. I get almost realtime display of a 300 pixel diameter disc following the mouse around. And I thought that command would be sooo slow according to what people keep saying :-) Ok, if you would expand that to the whole display...
Title: Re: Custom Color Wheel
Post by: fuzzy70 on 2013-Mar-27
Similar problems like Moru was having in that in the 7z file the .gbas was 0 bytes. Had no errors extracting though & the exe works fine.

Win7 x64 with 7z 9.20 x64.

Lee
Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-27
Mentalthink, Yes; Of course you can use my code for your applications. Modify it as you please. I'm happy to be of service.  :)
The same goes for all of our programers.  =D
-CW
Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-27
Update: The problem isn't with zip or 7zip or the website. The problem is on my end. When I copied the project folder from my programing workshop over to my desktop for compression, for some reason (which I am at a loss to explain), all of my .gbas files came over empty. O_O
I suspect that the three mystery files which gave problems are all .gbas source files containing my functions.

I don't know the cause (a permission conflict??), but now that we have identified the problem I can correct it.
-CW
Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-27
I have replaced the incomplete zip file with an updated file containing all of the source code. Look for 'ColorWheel_6.0.zip' at the bottom of my original post. That should solve it. But I'd like someone to give it a go and see if you can view the source code now. Give me a thumbs up if everything is good.

My thanks to everyone for your feedback and for the heads-up on this problem.  Cool beans.  8) 8) 8)
-CW
Title: Re: Custom Color Wheel
Post by: fuzzy70 on 2013-Mar-27
Sorry CW but I get the following error while extracting the latest one.

The .exe works fine & the project opens & compiles fine as well.

Lee
Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-27
WOW. That I don't understand. The file downloads, decompresses and runs flawlessly for me.
Maybe one of us has an outdated version of GLBasic?
I am using GLBasic IDE, Version: 10.283, and GLB says I'm up to date.

Can it have anything to do with me being in the US and you in Europe?
Which utility are you using to decompress? I used the GLBasic utility to compress to zip. And I use the Windows-7 interface to decompress. (It never shows the sort of window you took a snapshot of.) Let me try testing the file with whatever utility you use. Can you provide me with a link?

This really has me bothered.

The Media folder is empty. I saved nothing to it. All of the colorwheel files, code and fonts are in the CWFOLDER.

If the project opens and compiles fine, what is missing? Can you read the source code?
If everything works including the high-contrast font, and you can see can read the source code, then it's all good.
Maybe the errors don't mean anything.

-CW
Title: Re: Custom Color Wheel
Post by: fuzzy70 on 2013-Mar-27
It is a strange one thats for sure. Attached is a screenshot of the open project extracted using 7zip v9.20 64bit.

All seems present & correct in the archive as the project loads/compiles & executes without problems, other than the following compile messages which do not seem to affect execution.
Code: (glbasic) [Select]
"ColorWheel.app\CWFILES\ColorSlider.gbas"(37) warning : variable already exists : ButtonArray
"ColorWheel.app\CWFILES\ColorWheel.gbas"(77) warning : variable already exists : FontHold

I to am using the same latest version of GLBasic 10.283 & not the 11 beta which would point me to something in the GLBasic zip utility causing the issue.

If you have 7z could you right click on the project folder & use 7z's add to zip context menu to make another zip & post that. Then I can do a binary compare of the 2 archives to see if the contents are exact & nothing missing.

Lee
Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-27
Very good. I'll do that.
Using 7-zip to decompress, I just duplicated your errors. Apparently 7-zip isn't happy with something about GL-Basic zip, where Windows Zip handled it just fine.
Stand by for the 7-zip file. I'm curious about what your binary compare has to say. The screenshot certainly looks fine.
-CW
Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-27
Ok, here is the 7-zip. I did a direct download, decompress under Windows 7, then compile with 7-zip. The two decompressed files should be identical, error messages not withstanding. I'll keep my fingers crossed!  :P
-CW
Title: Re: Custom Color Wheel
Post by: fuzzy70 on 2013-Mar-27
Well everything matches up in amount of files, directory structure & even CRC check for all files. The latest post opens up with no errors so there is something in GLBasics zip that 7z does not like. Interestingly the error points only at the directories & not the files.

If I uncompress the zip that gives the error & rezip it via windows or 7z there is no error on extraction.

Hope any of this helps

Lee
Title: Re: Custom Color Wheel
Post by: CW on 2013-Mar-27
That helps a lot, and what a relief. LOL

So 7-zip has a bug which, while harmless, can cause confusion and is worth knowing about.
Thanks a lot Fuzz. The next round is on me.
-CW  :booze:
Title: Re: Custom Color Wheel
Post by: erico on 2013-Mar-28
I get "compression method not supported" on my end, but some files do seem to come out ok.
win 7 64b using 7-zip.
Title: Re: Custom Color Wheel
Post by: Brick Redux on 2013-Apr-30
Thanks for this, its mechanics have helped with my redevelopment of the sprite editor I was coding in 2012.  Nice one!