Researching: Generating highlights and lowlights with javascript — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

Researching: Generating highlights and lowlights with javascript

This page's ID: 29989

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	[Edit: just as I suspected... poi has beaten me to the punch, and with more helpful advice. Feel free to ignore this post.] I'm not sure how much help I can be, but I'll give it a shot. This post is not going to provide you any hard and fast answers, because I don't have any, but I'm going to try to think through the problem with you and hopefully point you in the right direction. Given the speed at which replies are being offered in this thread, someone else may already have gotten to this. For starters, I haven't heard the term "lowlight" before. Usually it's referred to as "shadow," I think. And the color you have up there as a "lowlight" isn't a shadow, it's a different color entirely. I pulled these colors up in Photoshop to take a closer look at some of the values. If you look at the HSB values you get this: Original color: H = 30, S = 100, B = 100 "Lowlight" color: H = 17, S = 99, B = 100 So we can see that the saturation and brightness are pretty much the same for both colors, and the only difference is the hue. So it's not really a shadow at all. If we take the original color and drop the brightness to 80, we get this color: Shadow: R = 204, G = 102, B = 0 Original: R = 255, G = 126, B = 0 We basically dropped each RGB value by a certain amount. Red was dropped by 41, green was dropped by 24, and blue wasn't dropped at all because it was already zero. Is there a rhyme or reason to these numbers? You'll notice that each of these numbers is approximately 80% of the original. 80% of 126 would actually be rounded up to 101, not 102, so there's obviously something else going on here, but for our purposes multiplying each number by .8 seems to work. At any rate, in order for the two colors to be shades of each other, the RGB color values have to maintain basically the same ratio to each other. If you look at the HSB values, you'll see that both colors have a hue of 30. So we have a true shadow here. But what about the highlight? Let's take a look at the HSB values again for the colors you have up there: Original: H = 30, S = 100, B = 100 Highlight: H = 42, S = 100, B = 99 Again, we see the same problem--saturation and brightness are more or less the same, and only the hue has changed. So we don't have a real highlight, we just have a different color. But this time we can't just raise the brightness because it is already at 100. And we can't just increase each value by 20% because blue is currently at zero and increasing it by 20% would give us zero! Try multiplying each RGB value by 1.2 and you'll find that only the green changes, giving us a different hue (basically the same problem we have with the colors in your image). What to do? We go to the Lab values. Lab stands for Luminance and "a" (red-green spectrum) and "b" (yellow-blue spectrum). We're not interested in either a or b, since we don't want to change the color or hue, but we are interested in luminance. And if you look at the luminance value for your base color you'll see that it is 67, so we have some room to maneuver. Let's raise the luminance to 80 (approximately a 20% increase) and see what happens, using the HSB values: Original: H = 30. S = 100, B = 100 Highlight: H = 32, S = 80, B = 100 The hue is a bit off, but we notice that the saturation has been decreased by 20%. Let's bring the hue back to 30 and see what we get in RGB: Original: R = 255, G = 126, B = 0 Highlight: R = 255, G = 153, B = 51 The green has increased by in value by 27, and blue has increased in value by 51. Because blue started at zero, we can't really measure a percentage increase, but a pattern is emerging: the closer a color value comes to either end of the black-white spectrum, the more it has to change to produce a highlight or a shadow. This is where the math comes in, and maybe someone better at math can help with the algorithm necessary to produce these highlights and shadows. The basic principle, though, is this: to maintain the same color and just change the shading, all RGB values need to be either lowered or raised together, and the changes need to be proportional to each other. Changing only one value or changing the values disproportionately will give you a different color entirely, not a different shade of the same color. OK, that was a whole lot of words for what is probably very little help, but I gave it a shot. I may try to tackle this problem again later if you're still struggling with it, but maybe this will be enough to get you going in the right direction. [img]http://www.liminality.org/asylum/sigs/suho_text_factory_02.gif[/img] ___________________________ Suho: [url=http://www.liminality.org]www.liminality.org[/url] \| [url=http://www.ozoneasylum.com/4837]Cell 270[/url] \| [url=http://www.ozoneasylum.com/5689]Sig Rotator[/url] \| [url=http://www.ozoneasylum.com/22173]the Fellowship of Sup[/url] [small](Edited by [url=http://www.ozoneasylum.com/user/2031]Suho1004[/url] on 02-14-2008 02:57)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu