New Painting Tool. Colour Constructor!
polycounter lvl 10
Colour Constructor has been released. Check it out here!
https://gumroad.com/l/ColorConstructor
So i have had the idea to make this thing for a long time now, just getting around to it now though.
I am a nerd for colour and lighting theory, and i love that most lighting theory can be baked down into a simple equation, so i thought making a simple tool that would let you see this stuff happen in real time, without needing to resort to a 3d program would be great.
So ideally the way you would use this is to set up your light, ambient and a bunch of local colours for objects in your scene, and then copy and paste the swatches into your file so that you have a solid basis for drawing all the colours.
Currently it only has the bare essential features, but if you want to give this thing a try, send me a pm. I can also do a mac build if people are interested enough.
The current feature list im hoping to get implemented are
-preview window
-exposure control
-HSV sliders
-colour picker
-multiple ambients
-SSS component (for skin tones)
-Saving and loading
-metalic specular(this probably won't be very useful...)
Anything else that would be helpful?
I'll probably end up selling it on gumroad for a few bucks.
https://gumroad.com/l/ColorConstructor
https://gumroad.com/l/ColorConstructor
So i have had the idea to make this thing for a long time now, just getting around to it now though.
I am a nerd for colour and lighting theory, and i love that most lighting theory can be baked down into a simple equation, so i thought making a simple tool that would let you see this stuff happen in real time, without needing to resort to a 3d program would be great.
So ideally the way you would use this is to set up your light, ambient and a bunch of local colours for objects in your scene, and then copy and paste the swatches into your file so that you have a solid basis for drawing all the colours.
Currently it only has the bare essential features, but if you want to give this thing a try, send me a pm. I can also do a mac build if people are interested enough.
The current feature list im hoping to get implemented are
-preview window
-exposure control
-HSV sliders
-colour picker
-multiple ambients
-SSS component (for skin tones)
-Saving and loading
-metalic specular(this probably won't be very useful...)
Anything else that would be helpful?
I'll probably end up selling it on gumroad for a few bucks.
https://gumroad.com/l/ColorConstructor
Replies
Here is a test on a more complicated example image.
(HAZ hope you don't mind using Remi-7 for the test!)
I wasn't sure how to actually teach it, because it's math based, and artists are notoriously anti math, so I'll be doing an accompanying thing to explain what is going on, and how to use it
I'll make some proper example images when i get closer to an official release. Only spent a day working on this so far!
actually here is another example for you.
A pretty sunset.
Dado, really interested to hear about that tool in Clip Studio, Can't find much on it though? It seems to be more of a traditional colour blender rather than something for generating colors in a lighting situation.
EDIT:
Just another thought. This would be perfect for people handpainting a game where you want to keep all the colours consistent for the same lighting!!!!
Very much so ! Very cool stuff ...
Few pointers:
* See if you can implement HCY' sliders instead of HSV, HCY' uses Luminosity and Chroma, which is relative lightness and more easier to comprehend to an artist(and would make it similar to the Munsell system too).(You can try out HSY' in Krita or HCY' in MyPaint 1.1 to see what I mean)
* If you get HCY' calculation right, you can also start giving proper lightness feedback. As you may know a lot of artists use the greyscale as a sort of debugging mode, and it may help for them to see the contrast properly.
(Luminosity calculation uses the Y values of the XYZ values of the colorants of your colourspace. I am assuming you're using sRGB due to lack of any mention of CM, so you can just use rec 709)
I actually disagree with your statement that HSL is more intuitive than HSV. The reason for that is that Saturation is less effective when the lightness goes up or down. So while it is easier for an artist to pickup HSL, it's harder for an artist to make nice looking colours using it. But this is all opinion here. (when people bump or drop the brightness in HSL saturation drops, creating WEIRD colours)
But in the end all these are just convinience functions, the magic of this program is all in the RGB. A lot of us artists are actually painting completly with RGB these days as we don't have an algorithm in the rode of understanding colour properly.
That being said, HSY sounds very interesting, so i might have a go at implementing it and tell you what i think. (also maybe try it out in Krita)
The Krita algorithm is a HSL formula to adapted to HCY', so you may find it has the same issue. In which case use the normal HCY' formula, which can easily be found on wikipedia: https://en.wikipedia.org/wiki/HSL_and_HSV#From_luma.2Fchroma.2Fhue (And is probably best suited for a slider system)(The Krita algorithm is nicer for a system which expects cylindrical spaces, like selectors and curve adjustments, because the conical algorithm doesn't understand how to make a fully chromatic colour darker, LAB has the same issue.)
Also note that it may be interesting to look into linearising your input colours's components before doing the render calculation on them(and then gamma-correcting them on output). There should be plenty of sources on how to linearise the sRGB trc on the internet. Just to get the tone extra-right
Thanks!
And yeah i know all about gamma, it's an easy calculation to add, so I'll get around to it once i sort everything else out. I should be able to add in tabs for different colour selection modes, but that's pretty far down on my list on wanted features.
Dado: Ah! Ok gotcha. Kind of an interesting tool, but it's completely at ods with what I'm trying to achieve here.
The magic only makes sense when you start using the different materials all at the same time as each other, and all your shadow and light colours are correct compared to each other.
It will make more sense when I make some example images/get some example images form people beta testing it for me.
As a matter of fact I would even say that RGB slider mixing is way more efficient than both HSV and HSL when it comes to creating nice subtle colors, since "H-based" systems cause colors hues to cycle in a bruteforce manner. Ironically enough, even though HSV/HSL are inspired by the traditional color wheel like the wikipedia article states, they have very little in common with the actual useage of the color wheel by traditional artists, which is more like a compass to orient oneself within the color space, and less like a tool to pick colors to use on a canvas. After all, traditional painters (and paintings !) benefit from relying on a limited palette, as opposed to using all the tubes available at the art store.
Personally the only thing I am interested in in a HSV/HSL system is the V/L slider, which allows me to easily drag the overall value of a color carefully picked through RGB. That being said, one could argue that *not* having a quick and easy way to adjust value (thus having to manually drag the 3 RGB sliders up or down, one by one) can be a good way to generate vibrant color schemes with subtle hue changes ...
Ok here we go, a bunch more work has gone in.
New features-
-Light and ambient Exponents.
-New object button
-Make swatches, so far this just puts the swatches conveniently in a box for taking the screenshot, clipboard will take me some more work! (got to make a new panel if you add more objects after, i'll fix that later)
I'm trying to understand, if the light color is defined as something less than white, why is the highlight in those spheres white?
Good catch!
I'm actually using a game engine called LOVE2d. This started as an excuse to learn a UI toolkit, but then it kept going. As a side benefit, all the textures are running on the GPU. I just made a few hundred objects and swatch panels, with a few tens of thousands of dynamic objects. The performance is pretty damn awesome!
The only downside is i may need to venture into the C++ source code to add in some extra functions that aren't usually needed for game dev.
Also i looked into saving swatch files to photoshop, Seems super easy! So that is something i can do.
I've been trying it since you gave it to me on the Hangout yesterday and it's great so far. Looking forward to that piece of utility.
Keep up the good work
Still looking at options. QT is looking good. Lets see if i can make friends with c++ this time around >_>.
- http://www.cplusplus.com/doc/tutorial/ (all you need to know on C++, but take it slow, it'll take a couple months)
- Google searches for basic C++ questions (usually results in classic Stackoverflow threads which explain things clearly).
- https://www.ics.com/designpatterns/book/index.html (a full eBook on Qt and C++)
- http://zetcode.com/gui/qt4/
Once you understand how things work Qt can get really addictive. The documentation is amazing (example).
It's got its own IDE with a visual designer tool and you can use the LGPL version which is absolutely free, and build commercial software with it. Maya, MODO and Toon Boom are built with Qt.
If you need any help setting things up please send me a message.
The code uses this for each channel in RGB. It's easiest to normalise your colours to a 0-1 range, which lets you know that values of greater or less than 1 are out of gamut.
((cos(angle) * Light) * Albedo) + (Ambient * Albedo)
Cos(angle) determines the intensity of a light ray, based on if the pixel is facing towards or away from the light.
Eg
cos(45) = 0.7071
The rest should be pretty easy to work out.
Kryzon!
Thanks man. I think i may have spoke to soon, as somebody dropped a really interesting solution on me. Apparently using LUAJIT you can call a thing called FFI which lets you call native C code in a LUA environment.
If this works i'm going to keep on working on the LUA version of this application, and get it out there, but make the eventual move to QT in the long term. I'll report back in a few hours.
(man being subscribed to a thread makes me seem like a creepy forum stalker that is just waiting for a reply...)
EDIT:
Actually another reason, i would need to make two arrays and compare them against each other to get my final answer
The only reason we use dot product in 3d programming is that it is a mathematically simpler way to get the answer from vectors, because to get angles you need to do trigonometry.
http://content.gpwiki.org/D3DBook:(Lighting)_Cook-Torrance
The Cook-Torrance model seems very interesting. It not only has a specular term but also a 'roughness' term that can be used to represent a lot of matte materials.
I need to have a sit down and a proper read, and see if i can implement it.
So I have a dilemma. For the sake of prototyping, i have made it a 2d game engine that i already know. However it is lacking core features like being able to save files anywhere on the harddrive, drag and drop and the like. I thought i found a work around, but that seems to be a dead end.
Now i have two options. I could keep going and get out a functional version for people to use. I could get out a public build in the next few days if i do this, dev will be super rapid.
The other option is to move to a framework actually designed for making software like this, but there is a learning curve here, i have no idea how long it would take to even get back to the current stage i am in the current engine.
I want to keep going with the current engine, and treat it as a shippable prototype, and once i get that into a nice place, start work on porting it over to a more capable framework.
Regardless of what way i plan on going, the current plan is to sell it on gum-road for $5, and offer lifetime upgrades.
What do you guys think?
EDIT:
I guess it would be better if i said what i can and can't do.
I can't use the default windows save dialog, though i should be able to save a pallette png to an internal file where the game folder is. And loading in external images would be a pain, as i would need to code a file explorer.
I can't copy an image to the clipboard, but i can do text.
I'm not confident i would be able to the ACO swatch export like i would be able to.
So TLDR:
Can't do proper saving and loading to everywhere on the HDD
I think the best bet will be to develop to a version 1 in this engine then move on. After that point i should have a much better idea about what a version 2 will need and how to make it absolutley amazing.
Hell if i do well enough maybe i can afford a better programmer
Btw that colour ramps thing has almost nothing in common with what i am doing haha. Mine generates both photometrically correct colours + values. Like if you turn off saturation, this thing can be also used for value studies.
As far as extra features are concerned : while I could see the benefit of being able to write/read to files and give the user access to OS file browsing, I also feel like there might be a benefit in keeping the application as self-contained as possible. Having the ability to save files to a specific location can actually be a hassle for the user, especially when it comes to little companion apps like these. For instance, I would *not* want to be able to save my Spotify playlists to files since I benefit from the blissful ignorance of letting the app take care of it all on its own
The few things I could see being added to ColorConstructor in its present state are :
- Text fields, either in the UI space or as part of a right or left click context menu to display (and possibly copy to the clipboard, but that's really not necessary) a given RGB hexadecimal value. For instance I could see myself wanting to precisely write down the RGB values of the light and shade parts of a sphere.
Here are two possible solutions based on your most recent screenshot (I think I far prefer the popop solution, as it keeps the UI less cluttered and the popup can be as big as desired which is great for readability from the distance of a secondary monitor for instance - but there are of course benefits in leaving everything exposed at all times, as in the second mockup) :
- The option to tell the program to either remember the last session on startup, or start from scratch each time. That way you would bypass the problem of having to give the user access to file open and file save dialogs.
I hope this helps !
I'm currently doing a refactor of all the code, and making sure I layout everything is a much more elegant fashion.
For the object panels i want to have two sizes, one that shows the full controls and, then the ability to turn them to a smaller window, and also perhaps the ability to hide them and recall them through a list menu. Luckily this stuff is pretty easy to do with the UI library i'm using.
Top half of this is currently in engine, just haven't hooked up the numbers behind the scenes, but it's looking much nicer. Text inputs actually work! I'll put in a Hex Input as well.
The bottom half is just starting to think about how to layout a heirachy window. But i really don't want to make this program look too scary to people who open it for the first time. Any ideas here?
Saving, and loading works now, and it will load the last save on load.
For saving and loading presets, and your own, i might just put a scene name input, and have a drop-down for saved presets.
I'm thinking that saving lighting and preset panels should be separate?
That being said I can confirm that 10-digits hexadecimal values are not supported in CS5, even when pasted in. For instance 0x5e766fff gets clipped into 0x5e76, which in turn is R0 G94 B118 rather than R94 G118 B111.
I hope this helps !
I threw together a quick logo.
Is this a pet peeve talking or you actually have trouble reading it?
(the rainbow effect makes it hard to focus on what the word is.
my focus goes to each letter/colour instead of the whole word, but maybe that's just me.)
Ok here is a second attempt.
I initially did a dot as a placeholder, then i added the rainbow ball, and suddenly i think i have something
I also tried a building in construction.... but it just made the logo look like it's suited for choosing what colours for your interior decoration.
ALMOST THERE!!!
So currently i just need to make some new preview images, and make a way to change them, hook up ambient 2 to them, and make the save and load dialog properly. And we should be at our first release for gumroad after some usability testing.
Here are some more preview images. These are inspired by trying to make something that would help the two tone scenes Astrapho(User on another forum) has been painting.
This is also a great example of the new fake HDR system I'm using for the preview images. I managed to work out how to use multiple images, to extend the range of an 8bit image, that i am using for the lighting. I'm kind of amazed it even worked!
I'm still working out how to make the masks, as it's pretty difficult to get them looking good. I think i'll just get better at it as i do them.
Also if all goes according to plan we'll be able to have custom masks!!!!
You just need to make sure they are all the right size, and make sure that they have the correct tags in the name. Draw order is alphabetical, so that's what the number at the start is.
Those are the methods if you are curious. They are badly named so i'll have to rename them for readability. Though how i'm detecting the string names means i can't have a full name repeat with a second number on the end.
So one thing i am having trouble with is working just how much information to display in the swatches. These more advanced previews are showing a lot of complex colour interaction, but the swatches aren't quite showing that, especially in a high ambient scene like this example, where a lot of form is defined by ambient occlusion, and the shadow colors mixed with an ambient are still very bright.
Is having three ramps per material getting a bit rediculous?
I would so loooooooooove a program that calculates accurate color bleeding and radiosity effects.
But that being said, Looking over your cartoony thread. If you want to learn how to make more 3d looking paintings, the first step is to get your values the right levels, which is exactly what this tool is designed to do.
So no it doesn't do what you ask, but regardless would still be one of the best learning tools to wrap your head around how it all works
Also, I'm not sure what is Ambient 2 ?
It would be nice, instead of having a bunch of large windows showing every details, to be able to build a list of colors with just the resulting shading.
Nice work overall
It wasn't so much the 3D aspect I was looking for, but just predicting the results of one colored surface on another.
Example: If the beige plane in your scene were to bounce some of its color onto the red or orange cylinder, and showing the resulting color mixes. Brown and Red would make a tertiary color, but how much of it gets blended and making the result look natural, would have been amazing!
I think a secondary light would do the job
I needed a way to show both the initial light colour before the intensity modifier, and the light after the modifier. So the left shows the final light, and the part to the right shows the initial colour.
Ambient 2 is basically where you can put in a bouncelight colour, or a secondary light source. How it looks in the preview window just depends on the Masks. This is a painting made by a beta tester, but i'm pretty sure she needed to setup two scenes and combine the colours to do it. http://i193.photobucket.com/albums/z50/acosmist/frogwip04.jpg~original
Jordan, you'll be able to handle those cases pretty easily with this. Bounce light is fundamentally the same as normal light, so you can just setup your object colour, ambient and light colour to predict what you want to know.