Color computation

E

Evertjan.

wrote on 09 sep 2006 in comp.lang.javascript:
//I forgot: we need to convert it to hex string
var invertedColor=(0xFFFFFF-parseInt(hexColor,16)).toString(16)
//now we just have to add leading zeroes if needed

You forget the skipping of the #, and later the adding again,
and the adding of leading zero's,
[ff0000 would return ffff in your example, not 00ffff],
which makes it just as difficult, IMHO.

There is always the choice of string manipulation and number crunching.
 
A

ASM

(e-mail address removed) a écrit :
Wow!
I am so fashinated how one can do some complex task
in just a couple of lines of code in javascript !

Overall that do not resolve the problem with all browsers (FireFox and
IE aren't alone)

On my sens the best an easiest way is to use classes


<style type="text/css">

..colorYellow { color: #ffc }
..colorGold { color: coral }
..backBlack { background: rgb(111, 111, 111); }
..backWhite { background: whitesmoke }

</style>

<h1 id="here" class="colorGold backWhite">Yellow on dirty white</h1>

<a href="#"
onclick="var h = document.getElementById('here');
h.className = h.className=='colorGold backWhite'?
'colorYellow backBlack' :
'colorGold backWhite';
return false;">change title colors</a>


And to browsers to mix their one soup ... !
 
P

pamelafluente

Hi Stephane

ASM ha scritto:
Overall that do not resolve the problem with all browsers (FireFox and
IE aren't alone)

Why not Stephane? Are there other color representation other than
#aabbcc and
rgb(xxx,yyy,zzz) ?? Can you make an example of what you mean?
On my sens the best an easiest way is to use classes


<style type="text/css">

.colorYellow { color: #ffc }
.colorGold { color: coral }
.backBlack { background: rgb(111, 111, 111); }
.backWhite { background: whitesmoke }

</style>

<h1 id="here" class="colorGold backWhite">Yellow on dirty white</h1>

<a href="#"
onclick="var h = document.getElementById('here');
h.className = h.className=='colorGold backWhite'?
'colorYellow backBlack' :
'colorGold backWhite';
return false;">change title colors</a>


And to browsers to mix their one soup ... !

Hmmm. We are not assuming the original color be know.
Are you making that assumption?

-P
 
S

scriptguru

Evertjan. напиÑав:
wrote on 09 sep 2006 in comp.lang.javascript:
//I forgot: we need to convert it to hex string
var invertedColor=(0xFFFFFF-parseInt(hexColor,16)).toString(16)
//now we just have to add leading zeroes if needed

You forget the skipping of the #, and later the adding again,
and the adding of leading zero's,
[ff0000 would return ffff in your example, not 00ffff],
which makes it just as difficult, IMHO.
ok, let me try just for fun :eek:)

var hexColor="#af5601"
var
invertedHexColor=(0xFFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
invertedHexColor="#"+"00000".substr(invertedHexColor.length-1)+invertedHexColor

It really looks longer than before, but might be faster and still
shorter than your method.
(I don't telling that your method is wrong or bad!)
 
S

scriptguru

Dr John Stockton напиÑав:
In each case you might either treat the whole colour as being
represented by three separate components, and do three small
arithmetics; or you can treat it as one Hex number and use one large
arithmetic - XOR with 0x808080 or subtract from 0xFFFFFF.
I think that representing color as a one big number is better because
it require less computations: just XOR it once or substract. XORing is
a good way too, I thought about substraction just because of a phisical
nature of color models.

Val Polyakh ([email protected])
 
P

pamelafluente

It really looks longer than before, but might be faster and still
shorter than your method.
(I don't telling that your method is wrong or bad!)

Hi scriptguru,

at this point why do you not complete it all, so that we can make a
comparison ;)

If the script is not functionally equivalent is too soon to say if it
is shorter or faster...
To be functionally equivalent you need to take care of both formats,
hex (with case insensitive) and rgb.

-P
 
R

Richard Cornford

Hi Stephane

ASM ha scritto:

Why not Stephane? Are there other color representation
other than #aabbcc and
rgb(xxx,yyy,zzz) ??
<snip>

There are. There is a set of color keywords such as 'red', 'white',
'black', etc. And RGB values may be expressed in percentages in addition
to 0-255 numbers.

Richard.
 
S

scriptguru

(e-mail address removed) напиÑав:
Hi scriptguru,

at this point why do you not complete it all, so that we can make a
comparison ;)

If the script is not functionally equivalent is too soon to say if it
is shorter or faster...
To be functionally equivalent you need to take care of both formats,
hex (with case insensitive) and rgb.

-P
Hi Pamela,
I will not complete it because you already have all parts required to
make it yourself ;)
My approach is already case insensitive, but sure it can't handle
rgb(...) format :(
My post was just an *idea* how to make it smaller, not a full final
solution. Sorry if it is not enough.

Val Polyakh
 
A

ASM

(e-mail address removed) a écrit :
Hi Stephane

Ciao Pamela,
ASM ha scritto:

Why not Stephane? Are there other color representation other than
#aabbcc and
rgb(xxx,yyy,zzz) ?? Can you make an example of what you mean?

From memory, I think I've found some browser reading #fff
and sending back #FFFFFF, other the rgb() by numbers, other the rgb() by
percents, other something I could'nt understand.

Personally I use to use colors by names, and never the rvb() mode.
It is enough difficult to choice a color by #xyz or #abcdef without to
loose ourself in rgb.
On my sens the best an easiest way is to use classes [...]
And to browsers to mix their one soup ... !

Hmmm. We are not assuming the original color be know.
Are you making that assumption?

I said easiest way to change (known) colors.
Would you decide your colors eyes closed ?

I answered before reading the complete thread, and think some ones tried
to give you coloring inverter.
Probably would you need this kind of engine to help your web factory to
work better ?
 
P

pamelafluente

(e-mail address removed) ha scritto:
My approach is already case insensitive, but sure it can't handle
rgb(...) format :(

Hi Val,

actually I have the impression it's just the same thing, if not easier.
For each component you do: 255-R,255-G,255-B, or !R, !G, !B (with "!"
I mean "not"), as you suggested. Perhaps is even simpler than hex,
where the string could be truncated and that could be troublesome...

-P
 
E

Evertjan.

wrote on 10 sep 2006 in comp.lang.javascript:
Dr John Stockton напиÑав:
I think that representing color as a one big number is better because
it require less computations: just XOR it once or substract. XORing is
a good way too, I thought about substraction just because of a phisical
nature of color models.

I cannot find an internal exor function in javascript.

That's why I made mine with regex.

var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)

or better?:

var t1 = '0123456789abcdef#fedcba9876543210#'
var c =
c.replace( /./gi,
function (s) {
return t1.charAt(t1.indexOf(s)+17);
}
)
 
P

pamelafluente

Evertjan. ha scritto:
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}

Hi Evertjan,

Just waken up :) I have one doubt. Let's consider the case of color
that have been specified with an incomplete Hex string. For instance
"#aa00" or "#55" or "#2".

I think I have read somewhere, but I am not sure to remember well, that
browsers do something strange when filling up these incomplete strings.
Like filling them to the right (or left?) with "f" (do not remember
well, but probably you know that well).

I was just wondering if this fact could screw your algorithm where each
digit is transformed to its complementar. I am wondering if in case of
an incomplete string the number you obtain is actually the hex
complement of the original .. (??)

-P
 
P

pamelafluente

Evertjan. ha scritto:
I cannot find an internal exor function in javascript.

I do not know if I am mixing up with other languages, but I think to
remember I have read somewhere that there is an ^ operator to xor
integers ...

-P
 
S

scriptguru

(e-mail address removed) напиÑав:
Evertjan. ha scritto:


I do not know if I am mixing up with other languages, but I think to
remember I have read somewhere that there is an ^ operator to xor
integers ...

-P
Hi Pam,
it is true: ^ is a XOR.
About colors: there is only color formats in CSS as follows:
#RRGGBB
#RGB
rgb(RRR,GGG,BBB)
rgb(RR%,GG%,BB%)
+named colors.
Do you really want to manage with *all* these formats?
 
P

pamelafluente

(e-mail address removed) ha scritto:
About colors: there is only color formats in CSS as follows:
#RRGGBB
#RGB <--- what is this?
rgb(RRR,GGG,BBB)
rgb(RR%,GG%,BB%)
+named colors.
Do you really want to manage with *all* these formats?

:)) No just hex strings. The necessity to deal with rgb() also
came from the observation (jim) that Firefox does an automatic
conversion
to rgb().

It's unbeliavable how so much complexity stems from the fact that
there isn't a uniform way to extract the color components, as has been
suggested in this thread. (Why do they not ask programmers first?)

Sometimes a non foreseeing model making can become hell for the poor
programmers. I am currently facing a similar issue with CSS vertical
align of text. The css designers seems to have really screwed this up
and in still in the 2006 we are struggling to vertically align
middle/bottom
some simple multiline text within a DIV !!

Altro che 2001 Odissea nello spazio!!

-P
 
D

Dr John Stockton

JRS: In article <[email protected]>,
dated Sat, 9 Sep 2006 16:03:26 remote, seen in
var hexColor="#af5601"
var
invertedHexColor=(0xFFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
invertedHexColor="#"+"00000".substr(invertedHexColor.length-1)+invertedHexColor

If you subtract from 0x1FFFFFF then toString(16) will give 1xxxxxx and
a RegExp replace can easily change that to #xxxxxx. Untested.
 
S

scriptguru

(e-mail address removed) напиÑав:
(e-mail address removed) ha scritto:
#F5A = #FF55AA
It's unbeliavable how so much complexity stems from the fact that
there isn't a uniform way to extract the color components, as has been
suggested in this thread. (Why do they not ask programmers first?)
It is true. But in this case we just need to convert rgb() into #hex,
and then process only hex.
Sometimes a non foreseeing model making can become hell for the poor
programmers. I am currently facing a similar issue with CSS vertical
align of text. The css designers seems to have really screwed this up
and in still in the 2006 we are struggling to vertically align
middle/bottom
some simple multiline text within a DIV !!
Oh, I even don't want to think about vertical align :(
I hope it will be well supported soon.
Altro che 2001 Odissea nello spazio!!
Translate, please ;)

Val
 
S

scriptguru

Dr John Stockton напиÑав:
JRS: In article <[email protected]>,
dated Sat, 9 Sep 2006 16:03:26 remote, seen in


If you subtract from 0x1FFFFFF then toString(16) will give 1xxxxxx and
a RegExp replace can easily change that to #xxxxxx. Untested.
Great idea!
We even can manage with it without regexps:

var hexColor="#af5601"
var invertedHexColor =
(0x1FFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
invertedHexColor="#"+invertedHexColor.substr(1)

Val
 
A

ASM

Bart Van der Donck a écrit :
Yes, you'ld need to convert from hex to rgb (and back if necessary).
That shouldn't be too tough; see hyperlink at the end of my previous
post.

and where has gone your previous post ?
 
E

Evertjan.

wrote on 10 sep 2006 in comp.lang.javascript:
Evertjan. ha scritto:


Hi Evertjan,

Just waken up :) I have one doubt. Let's consider the case of color
that have been specified with an incomplete Hex string. For instance
"#aa00" or "#55" or "#2".

We were talking about ...style.backgroundColor, which shoeld always be
6 places in IE.
Even so in my example any number will be inverted.

I think I have read somewhere, but I am not sure to remember well, that
browsers do something strange when filling up these incomplete strings.
Like filling them to the right (or left?) with "f" (do not remember
well, but probably you know that well).

I don't think so. Only #abc will become #aabbcc, which does not do harm.
I was just wondering if this fact could screw your algorithm where each
digit is transformed to its complementar.

No, inversion is inversion.

I am wondering if in case of
an incomplete string the number you obtain is actually the hex
complement of the original .. (??)

Please be my guest and test.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top