I am trying to figure out how to achieve a smooth transition between two colors.
I.E. this image is taken from Wikipedia.
When I try to do the same using my code (C++), first idea that came to mind is using the HSV color space, but the annoying in-between colors show-up.
What is the good way to achieve this ?
This is going to sound weird, maybe... but vertex shaders will do this nicely. If that's a quad (two tris) then place one colour on the left 2 vertices, and the other on the right, and it should blend across nicely.
Caveat: Assumes you're using some kind of OpenGL.
The only part of your question I feel I can answer is that you must somehow be transitioning through too many values in the H part of HSV.
H is for hue (different colors, like the rainbow effect in your gradient). In this case, it looks to me like you are only merging 2 different hues.
S is for saturation (strength of color from highly saturated to
gray)
L is for lightness (more or less luminosity (from your
color to its most white)
This is caused by a lack of color in between, as black (or grey in your case) = desaturated. It is like putting two transparent fade images together, there is a see through area in the middle as 2 50% transparencies don't equal 100% solid color.
To avoid this, I'd suggest placing one color above the other and fading that to transparent. That way there is a solid color base with the transition above.
I dont know what your using to display (DirectX, Windows display or whatever ) but try just having two images, one solid color and a single color with a fade from solid to transparent infront. That might work.
Related
Anyone who frequently does UI likely knows that for a given color hsl(H, 100%, 50%) (syntax is CSS) not all values of H will produce a color suitable to be placed under arbitrarily black or white text. The specific fact I'm noting is that certain colors (green) appear especially bright and other (blue) appear especially dark.
Well suppose I would like a user to be able to enter a color hue and have the color always appear with a consistent brightness so that one of either white or black text is guaranteed to always be readable on top of it. I would like all colors to also maintain the most vivid level of saturation they can given the constraint on brightness.
Here is a quick example of what I've tried so far. I start with a grid of squared like this rendered using a bunch of html div elements. Essentially these are hue values roughly from 0 to 360 along the horizontal axis and lightness values from roughly 0% to 100% along the vertical axis. All saturation value are set to 100%.
Using a JS library library called chroma.js, I now process all colors using the color.luminance function, whose definition seems to be to do what I'm looking for. I just passed the lightness of the hsl value in as the parameter to the function. I don't know for sure that this is the best way to accomplish my goal though since I'm not familiar with all the terminology at play here. Please note that my choice to use this library is by no means a constraint on how I want to go about this. It just represents my attempt at solving the problem.
The colors certainly now have a more consistent lightness, but the spectrum now seems particularly vivid around the orange to cyan area and particularly dull everywhere else. Also the colors seems to drop very quickly away from black at the top.
Hopefully this example helps a bit to express what I'm trying to accomplish here. Does any know what they best way to go about this is?
I found the solution! Check out HSLuv. It balances out all the hues in the spectrum so that at any given saturation and lightness, all hues will have the exact same perceived brightness to the human eye.
This solved my problem because now I can just set my text color to white (for example) and then as long as the text is readable against a certain HSLuv lightness it is guaranteed that it will be readable against any hue and saturation used in combination with that lightness. Magic.
Assume that I've a gray image, and I want to draw e.g. text on it. Now the image has some dark and some bright regions. So if I choose for every character a separate color, in what way do I compute such a color to gain highest contrast of the text?
A pragmatic approach is to use yellow. (I don't know why, but its often used for subtitles in movies and documentaries)
Furthermore I could darken the yellow in regions of bright background, and highlight it in regions of dark background. But this may provide some layer-effects.
I know that the color space may be important. I start with an RGB gray value, but LAB, HSV, or HSL may be better suited to compute the optimal color.
EDIT:
As there was the question for a useful use-case: I really do not want to paint letters of text in different color. It is about color choosing for particular glyphs on gray textured background. (E.g. an MR image.)
The simplest answer to your question is to maximize the distance between the background and your text color.
If you convert to HSL, you can do this by maximizing the distance between L (V in HSV). And all that requires is to select white when the background lightness is less than 50% and black otherwise. Here is an example: http://jsfiddle.net/E2kU4/
if(bgLightness < 50){
color = "white";
}else{
color = "black";
}
I think that pretty much solves it, but on to a few other points:
I'm not sure what the use case is for this. A word with different colored characters might look really bad. Typically, subtitles select a single color for consistency.
Yellow does stand out against a black and white image because of its saturation. Furthermore (and I'm not sure how to put this into words exactly), yellow has a really high chroma compared to other colors with similar lightness. It is best demonstrated on the HUSL page; by the way, HUSL is a great library for creating readable colors.
Yellow easily contrasts with dark colors because it is very light. It doesn't contrast with light colors as well, but that is usually solved by adding a shadow/outline in subtitles. Another example: http://jsfiddle.net/E2kU4/1/
But you can apply the same technique (of applying a shadow or outline) to the black/white example for maximum contrast. Now, the outline has the maximal contrast against the text. The outline stands out from the background too, unless those colors are similar, in which case the contrast is already extremely high (e.g. Near black background, black outline, white text) http://jsfiddle.net/E2kU4/2/
Lastly, converting to and from HSL/RGB should be trivial. There are plenty of libraries to do it.
I'm using Raphael to draw the arcs as shown in the image below:
Z-index order is from lowest to highest: gray, blue, green.
Both the gray and the blue arcs start from the top, where the green one starts.
Is there any way to improve the edges? Especially the green over blue one.
Thank you.
I'm afraid there's not much you can do. How the shape is rendered depends on the viewer (browser, image viewer or importing application). You could play with the rendering properties and see if this gives you an improvement, but I believe hardly any SVG implementation supports them.
I am not sure exactly what you mean, and it is hard to know how you made the image without the raphael code. Are you talking about the way the outer edge of the green arc extends slightly beyond the outer edge of the blue arc? I would check that the corner points of the two paths are the same, and include the stroke-width in your calculations of the paths.
Perhaps you could try reducing the stroke-width to 0 to make things easier.
The problem is that you are overlapping the shapes. This causes some colors to spill out from underneath. To solve this you need to start each arc where the previous one ends.
You might get very faint gaps, this can easily solved by applying a 1px stroke to each arc.
I need to write some code (for a web.py webapp with a straight-HTML/JS client) that will generate a visual representation of a set of point-values. Each point has an X and Y coordinate, and the value is an integer. If I can use SVG to do this, then I can scale the image client-side with no extra code. Can I actually do this? I am concerned about a couple of things:
The points don't necessarily have any relation to each other. They aren't necessarily in a grid, nor can we say how many points are nearby, etc.
Gradients are primarily one-direction, and multiple gradients on the same shape seems to be a foreign concept.
Fills require an existing image, at which point, I'd be better off generating the entire image server-side anyway.
Objects always have a layering, even if it isn't specified, which can change how the image is rendered.
If it helps, consider a situation where we have a point surrounded by 5 others, where one of them is a bit closer than the others (exact distances and sizes can be adjusted). All six of the points have different colors (Red, Green, Blue, Cyan, Magenta, Yellow, with red in the center and Yellow being slightly closer), and the outer five points are arranged roughly in a pentagon. Note that this situation is not the only option, just a theoretically possible situation.
Can I do this with SVG, or should I render an image server-side?
EDIT: The main difficulty isn't in drawing the points, it is in filling the space between the points so that there is no whitespace, and color transitions aren't harsh/unpredictable if you know the data.
I don't entirely understand the different issues you are having with wanting to use svg. I am currently using the set up you are describing to render X-Y scatter plots and gaussian curves and found that it works great.
Regarding the last point about object layering, you have to be particularly careful when layering objects with less than 100% opacity which are different colors. The way the colors "add" depends on the order in which you add the objects to your svg drawing.
Thankfully you can use different filters to overlay the colors without blending them. Specifically I am using the FeComposite filter element. There is a good example of its usage here:
http://www.w3.org/TR/SVG/filters.html#feCompositeElement
I know that NES had 4-color sprites (with 1 usually being transparent Edit: according to zneak, 1 color is always transparent). How then did the original Final Fantasy have so many sprites with 4 colors + transparent? (Example sprite sheet -- especially look at the large ones near the bottom.)
I understand that you can layer sprites to achieve additional colors (For example: Megaman's layering gives him 6 colors: body=3+trans, face=3+trans). It's odd that these FF ones are all exactly 4 colors + transparent. If FF used similar layering, why would they stop at 4+1 instead of taking advantage of 6+1?
Is there another method of displaying sprites that gives you an additional color?
Also interesting is the fact that the big sprites are 18x26. Sprites are 8x8 (and I think I read somewhere that they're sometimes 8x16) but both 18 and 26 are [factor of 8] + 2. Very strange.
As far as I know, 1 isn't usually transparent: it always is.
As you noted, sprites are either 8x8 or 8x16 (this depends on bit 6 of the PPU control register mapped to memory address 0x2000 in the CPU's address space). Character sizes not being a multiple of 8 simply means there are wasted pixels in one or more of the constituting sprites.
For the colors, I beg to differ: the last sprite at the bottom, with the sword raised, has these 8 colors:
Final Fantasy sprite 8 colors: black, brown, beige, sky blue, navy, dark turquoise, turquoise, cyan http://img844.imageshack.us/img844/2334/spritecolors.png
I believe this is more an artistic choice, because each 8x8 block is limited to 3 opaque colors; maybe it just was more consistent to use fewer colors.
I found the answer. I finally broke down and downloaded the ROM and extracted the bitmaps with NAPIT. (btw: staring at extracted ROM bitmaps is really bloody hard on your eyes!)
I matched a few bitmaps and end-results here.
Each character has a color that is mostly relegated to top part of the sprite so I chased that idea a while. It turns out that's a red herring. Comparing the in-game sprites vs. the color masks, you can see that black and transparent use the same color mask. Therefore, IF a black outline is shown, then it must be on a separate layer. However, despite the black outlines on the sprite-sheet, I can't find any real examples of black outlines in the game.
Here's a video on YouTube with lots of good examples. When you are on the blue background screen (# 0:27), the outlines and the black mage's face are the blue of the background (ie: there is no black outline, it's transparent). In combat, the background is black. # 1:46 a spell is cast that makes the background flash grey. All black areas, including outlines and black eyes, flash grey. Other spells are also cast around this part of the video with different colors of flashes. The results are the same.
The real answer is that the black outlines on the sprite sheet don't seem to exist in the game. Whoever made the sprite sheet took the screenshots with a black background and scrubbed the background away.
You might want to check out Game Development StackExchange instead of here.
I've just had a quick glance at the sprite sheet, but it looks to me that sprites with more than 3 colors + 1 transparent either have weapons or use 3 colors + a black outline. Also, if you could show that sprite sheet with a grid separating tiles...
Maybe the extra 2 colors were reserved for the weapons.