# RGB code to HEX conversion code, need to speed it up!

• Novice
• Posts: 29

3+ Months Ago

there is a code i wrote that converts 256 bit RGB color code to hex to use with lines and such, but i got a problem... it is damn slow...

i am aware of the transform to RGB conversion code which is something like:

mcColor.getRGB().toString(16);

which is alot faster, but the use is limited...

i do not understand the mathematics of hex too well, so if anyone is aware of converting numbers above nine to their respective letter bits then i am positive it will speed it up like crazy...

this is what i got right now, if anyone can think of any clever ways of cutting it down some more lemmie know...

Code: [ Select ]
function rgb2hex(rgb1,rgb2,rgb3){
//1 is r, 2 is g, 3 is b, variables are named liie that for less processing...
for(var i=1;i<=3;i++){
//divide number
if(rgb!=0){
rgb=rgb/16;
//split it
rgb=String(rgb);
this['split_rgb'+i] = rgb.split(".");
//check if it is an integer
if(this['split_rgb'+i].length==1)this['split_rgb'+i]=this['split_rgb'+i].concat(0);
}else{
this['split_rgb'+i] = [0,0];
}
//strip any pre zeros (though there is only one floating number that begins with a 0 that i am aware of).
stripzeros = String(this['split_rgb' + i][1]);
if(stripzeros.length>1 and stripzeros.charAt(0) == 0){
stripzeros=stripzeros.substr(1);
this['split_rgb' + i][1] = stripzeros;
}
//multiply the float
this['split_rgb' + i][1]=this['split_rgb' + i][1]*16;
//slice where the 0's begin
rgblength = String(this['split_rgb' + i][1]);
rgblength = rgblength.slice(rgblength.indexOf("0"));
//divide according to the amount of 0's
if(rgblength.length==1)this['split_rgb' + i][1]=this['split_rgb' + i][1]/10;
if(rgblength.length==2)this['split_rgb' + i][1]=this['split_rgb' + i][1]/100;
if(rgblength.length==3)this['split_rgb' + i][1]=this['split_rgb' + i][1]/1000;
if(rgblength.length==4)this['split_rgb' + i][1]=this['split_rgb' + i][1]/10000;
//set numbers 10-15 to a-f for hex recognition
for(var j=0;j<=1;j++){
if(this['split_rgb' + i][j]==10)this['split_rgb' + i][j]='a';
if(this['split_rgb' + i][j]==11)this['split_rgb' + i][j]='b';
if(this['split_rgb' + i][j]==12)this['split_rgb' + i][j]='c';
if(this['split_rgb' + i][j]==13)this['split_rgb' + i][j]='d';
if(this['split_rgb' + i][j]==14)this['split_rgb' + i][j]='e';
if(this['split_rgb' + i][j]==15)this['split_rgb' + i][j]='f';
}
}
}
1. function rgb2hex(rgb1,rgb2,rgb3){
2. //1 is r, 2 is g, 3 is b, variables are named liie that for less processing...
3. for(var i=1;i<=3;i++){
4. //divide number
6. if(rgb!=0){
7. rgb=rgb/16;
8. //split it
9. rgb=String(rgb);
10. this['split_rgb'+i] = rgb.split(".");
11. //check if it is an integer
12. if(this['split_rgb'+i].length==1)this['split_rgb'+i]=this['split_rgb'+i].concat(0);
13. }else{
14. this['split_rgb'+i] = [0,0];
15. }
16. //strip any pre zeros (though there is only one floating number that begins with a 0 that i am aware of).
17. stripzeros = String(this['split_rgb' + i][1]);
18. if(stripzeros.length>1 and stripzeros.charAt(0) == 0){
19. stripzeros=stripzeros.substr(1);
20. this['split_rgb' + i][1] = stripzeros;
21. }
22. //multiply the float
23. this['split_rgb' + i][1]=this['split_rgb' + i][1]*16;
24. //slice where the 0's begin
25. rgblength = String(this['split_rgb' + i][1]);
26. rgblength = rgblength.slice(rgblength.indexOf("0"));
27. //divide according to the amount of 0's
28. if(rgblength.length==1)this['split_rgb' + i][1]=this['split_rgb' + i][1]/10;
29. if(rgblength.length==2)this['split_rgb' + i][1]=this['split_rgb' + i][1]/100;
30. if(rgblength.length==3)this['split_rgb' + i][1]=this['split_rgb' + i][1]/1000;
31. if(rgblength.length==4)this['split_rgb' + i][1]=this['split_rgb' + i][1]/10000;
32. //set numbers 10-15 to a-f for hex recognition
33. for(var j=0;j<=1;j++){
34. if(this['split_rgb' + i][j]==10)this['split_rgb' + i][j]='a';
35. if(this['split_rgb' + i][j]==11)this['split_rgb' + i][j]='b';
36. if(this['split_rgb' + i][j]==12)this['split_rgb' + i][j]='c';
37. if(this['split_rgb' + i][j]==13)this['split_rgb' + i][j]='d';
38. if(this['split_rgb' + i][j]==14)this['split_rgb' + i][j]='e';
39. if(this['split_rgb' + i][j]==15)this['split_rgb' + i][j]='f';
40. }
41. }
44. }
• Guru
• Posts: 1402

3+ Months Ago

Are you trying to accomplish something like these?

http://www.lostinbeta.com/kirupa/getRandomHex.html

http://www.lostinbeta.com/kirupa/colorSlider.html

???

If so, I pulled these off using something like this...
Code: [ Select ]
function rgb2hex(r, g, b) {
col = new Color(this);
col.setRGB(r << 16 | g << 8 | b);
return col.getRGB().toString(16).toUpperCase();
}
trace(rgb2hex(144, 55, 243));
1. function rgb2hex(r, g, b) {
2.     col = new Color(this);
3.     col.setRGB(r << 16 | g << 8 | b);
4.     return col.getRGB().toString(16).toUpperCase();
5. }
6. trace(rgb2hex(144, 55, 243));
(roughly, not exact code, just basic idea... I don't feel like searching for the .flas for actual code... hehe)

And they use the same method you mentioned in your previous post, but I can't say as it is limited, it has always worked A-OK for me :-\
• Novice
• Posts: 29

3+ Months Ago

limited in the sense that it only works if you are using a MC to transform the color...

i mentioned that i am already aware of the string conversion.

i got a question tho, what is this line doing?

col.setRGB(r << 16 | g << 8 | b);

there are methods of coloring lines and text using the toString function, but i want to create something independent of this... also i plan on using it on more than just flash...

what i accually came up with before this code was->

Code: [ Select ]
function rgb2hex(r,g,b){
var color = new Color(this);
color.setTransform({ra: r*(100/255), rb: r, ga: g*(100/255), gb: g, ba: b*(100/255), bb: b, aa: 100, ab: 255});
}
trace(rgb2hex(255,0,255));
1. function rgb2hex(r,g,b){
2. var color = new Color(this);
3. color.setTransform({ra: r*(100/255), rb: r, ga: g*(100/255), gb: g, ba: b*(100/255), bb: b, aa: 100, ab: 255});
5. }
6. trace(rgb2hex(255,0,255));

i think your
Code: [ Select ]
col.setRGB(r << 16 | g << 8 | b);

line is doing what my
Code: [ Select ]
color.setTransform({ra: r*(100/255), rb: r, ga: g*(100/255), gb: g, ba: b*(100/255), bb: b, aa: 100, ab: 255});

is doing...

it seems like a faster solution to my transform method, but less changeable...

definitely a better method if you are only changing colors, thnx for that.
• Novice
• Posts: 29

3+ Months Ago

hmm, your

r << 16 | g << 8 | b

could be my hero man...

i gotta mess around wit it some more... tnx again
• Guru
• Posts: 1402

3+ Months Ago

<< is a bitwise left *plum*

| is a bitwise "or"

It's kind of confusing to explain, you should be able to check them out in the actionscript dictionary for more information.

I don't have much time on my hands, but I will see if I can figure something out.
• Guru
• Posts: 1402

3+ Months Ago

Code: [ Select ]
function rgb2hex(r, g, b) {
return String(r.toString(16)+g.toString(16)+b.toString(16)).toUpperCase();
}
trace(rgb2hex(143, 55, 233));
1. function rgb2hex(r, g, b) {
2.     return String(r.toString(16)+g.toString(16)+b.toString(16)).toUpperCase();
3. }
4. trace(rgb2hex(143, 55, 233));

No Color() Object used this time....
• Novice
• Posts: 29

3+ Months Ago

ok the << and >> are bitwise operations... i have no idea what the hell it does but it apparently these operators shift binary code... i dont know jack about no binary but i am curious if you could explain it to me...

there is one thing i dont understand, why do u gotta set the RGB in the first place? cant we just take that outta the equation all together with something like:

Code: [ Select ]
function rgb2hex(r,g,b){
var color=(r << 16 | g << 8 | b);
}
1. function rgb2hex(r,g,b){
2. var color=(r << 16 | g << 8 | b);
4. }

what is going on here?

what does the setRGB code do?

this is very efficient, we've eliminated all functions in this example...
• Novice
• Posts: 29

3+ Months Ago

seems like we produced similar codes, but you win -_- one line is sweet man...
• Guru
• Posts: 1402

3+ Months Ago

I wish I could explain, but as I stated before its quite complicated, I wouldn't be able to explain it clear enough to make sense of anything.

One thing I can help with though, i with your use of "add". Using "add" to combine strings is Flash 4 syntax, you can use a regular "+" symbol to connect strings now

And on a side note, the code you posted works just the same as the code in my previous post before that.... no color object declaration required (as usual I make things difficult on myself given that your code is actually more efficient
• Guru
• Posts: 1402

3+ Months Ago

elibol wrote:
seems like we produced similar codes, but you win -_- one line is sweet man...

Yes we did, and yours can be one line too
Code: [ Select ]
function rgb2hex(r, g, b) {
return '0x'+(r << 16 | g << 8 | b).toString(16).toUpperCase();
}
1. function rgb2hex(r, g, b) {
2.     return '0x'+(r << 16 | g << 8 | b).toString(16).toUpperCase();
3. }
(note how I keep using toUpperCase(), I prefer my hex codes to be written uppercased, but thats a personal preference)
• Novice
• Posts: 29

3+ Months Ago

props on your quick makeup, but your code is flawed... if you figure out a one line solution that'd be great, in the meantime i will figure this out =]

tnx
• Novice
• Posts: 29

3+ Months Ago

i tried that but for some reason it didnt work when i did it... weird huh? thnx man...

the uppercase is an unecessary function, it seems to produce the result regardless... will slow it down in flash, it may be necessary in other code though, i donno...

still donno why your original solution doesnt work though
• Guru
• Posts: 1402

3+ Months Ago

My original solution produces all the same results as the second solution... for me at least :-\

Oh well, whatever works
• Novice
• Posts: 29

3+ Months Ago

well, now i see that your solution just doesnt fit in with this other code i wrote, maybe u could help me with that too, it makes a spectrum of all the colors...

Code: [ Select ]
function spectrum(maxlength, currval){
var curcol=int((1275/maxlength)*currval);
if(curcol>=0 and curcol<255){
r=255;
g=curcol;
b=0;
}
if(curcol>255 and curcol<510){
r=255-(curcol-255);
g=255;
b=0;
}

if(curcol>510 and curcol<765){
r=0;
g=255;
b=(curcol-510);
}

if(curcol>765 and curcol<1020){
r=0;
g=255-(curcol-765);
b=255;
}

if(curcol>1020 and curcol<=1275){
r=(curcol-1020);
g=0;
b=255;
}
return rgb2hex(r,g,b);
}
1. function spectrum(maxlength, currval){
2. var curcol=int((1275/maxlength)*currval);
3. if(curcol>=0 and curcol<255){
4. r=255;
5. g=curcol;
6. b=0;
7. }
8. if(curcol>255 and curcol<510){
9. r=255-(curcol-255);
10. g=255;
11. b=0;
12. }
13. if(curcol>510 and curcol<765){
14. r=0;
15. g=255;
16. b=(curcol-510);
17. }
18. if(curcol>765 and curcol<1020){
19. r=0;
20. g=255-(curcol-765);
21. b=255;
22. }
23. if(curcol>1020 and curcol<=1275){
24. r=(curcol-1020);
25. g=0;
26. b=255;
27. }
28. return rgb2hex(r,g,b);
29. }

it is run like this:
Code: [ Select ]
for(var i=1;i<=500;i++){
attachMovie('colorme', 'colorme'+i,i,{_y:0,_x:i});
mcColor = new Color(this['colorme'+i]);
mcColor.setRGB(spectrum(500,this['colorme'+i]._x));
};
1. for(var i=1;i<=500;i++){
2. attachMovie('colorme', 'colorme'+i,i,{_y:0,_x:i});
3. mcColor = new Color(this['colorme'+i]);
4. mcColor.setRGB(spectrum(500,this['colorme'+i]._x));
5. };

colorme is a linked mc that is a block thats 1x10 in dimension...

i am almost sure there is a better method for this as well, but, i don't know one...

also if u figure out why this works:
Code: [ Select ]
function rgb2hex1(r,g,b){
return '0x' + (r << 16 | g << 8 | b).toString(16);
}
1. function rgb2hex1(r,g,b){
2. return '0x' + (r << 16 | g << 8 | b).toString(16);
3. }

and this doesn't:
Code: [ Select ]
function rgb2hex2(r, g, b) {
return '0x' + r.toString(16)+g.toString(16)+b.toString(16);
}
1. function rgb2hex2(r, g, b) {
2. return '0x' + r.toString(16)+g.toString(16)+b.toString(16);
3. }

when i trace the latter it produces a valid hexed color... but for some reason doesnt produce the spectrum... it is all messed... tnx 4 ur help

lemmie know what the dil is if u figure it out =]
• Guru
• Posts: 1402

3+ Months Ago

I'm sorry, but I don't seem to be getting any errors with the function...
Code: [ Select ]
function rgb2hex(r, g, b) {
return '0x'+(r << 16 | g << 8 | b).toString(16);
}
function spectrum(maxlength, currval) {
var curcol = int((1275/maxlength)*currval);
if (curcol>=0 and curcol<255) {
r = 255;
g = curcol;
b = 0;
}
if (curcol>255 and curcol<510) {
r = 255-(curcol-255);
g = 255;
b = 0;
}
if (curcol>510 and curcol<765) {
r = 0;
g = 255;
b = (curcol-510);
}
if (curcol>765 and curcol<1020) {
r = 0;
g = 255-(curcol-765);
b = 255;
}
if (curcol>1020 and curcol<=1275) {
r = (curcol-1020);
g = 0;
b = 255;
}
return rgb2hex(r, g, b);
}
for (var i = 1; i<=500; i++) {
attachMovie('colorme', 'colorme'+i, i, {_y:0, _x:i});
mcColor = new Color(this['colorme'+i]);
mcColor.setRGB(spectrum(500, this['colorme'+i]._x));
}
1. function rgb2hex(r, g, b) {
2.     return '0x'+(r << 16 | g << 8 | b).toString(16);
3. }
4. function spectrum(maxlength, currval) {
5.     var curcol = int((1275/maxlength)*currval);
6.     if (curcol>=0 and curcol<255) {
7.         r = 255;
8.         g = curcol;
9.         b = 0;
10.     }
11.     if (curcol>255 and curcol<510) {
12.         r = 255-(curcol-255);
13.         g = 255;
14.         b = 0;
15.     }
16.     if (curcol>510 and curcol<765) {
17.         r = 0;
18.         g = 255;
19.         b = (curcol-510);
20.     }
21.     if (curcol>765 and curcol<1020) {
22.         r = 0;
23.         g = 255-(curcol-765);
24.         b = 255;
25.     }
26.     if (curcol>1020 and curcol<=1275) {
27.         r = (curcol-1020);
28.         g = 0;
29.         b = 255;
30.     }
31.     return rgb2hex(r, g, b);
32. }
33. for (var i = 1; i<=500; i++) {
34.     attachMovie('colorme', 'colorme'+i, i, {_y:0, _x:i});
35.     mcColor = new Color(this['colorme'+i]);
36.     mcColor.setRGB(spectrum(500, this['colorme'+i]._x));
37. }

It all works fine for me :-\ Unless of course you weren't having problems, just enquiring on a more efficient way?

As for why mine doesn't work... no clue, but it doesn't matter because as I stated before, mine is the less efficient one
• Novice
• Posts: 29

3+ Months Ago

well, i was kind of asking a combination of those... thanks though man... u know of any tutorial or documentation that i could absorb some bitwise related info?
• Guru
• Posts: 1402

3+ Months Ago

Well I can't really think of an "efficient" way to code this... However I have seen a gradient-esque method from Keith Peters (Bit-101) and it goes a little something like this... (changing the for loop in the current code)
Code: [ Select ]
for (var i = 1; i<=500; i++) {
red = Math.sin(ra += .03)*127+128;
green = Math.sin(rb += .02)*127+128;
blue = Math.sin(rc += .01)*127+128;
myCol = red << 16 | green << 8 | blue;
attachMovie('colorme', 'colorme'+i, i, {_y:0, _x:i});
mcColor = new Color(this['colorme'+i]);
mcColor.setRGB(myCol);
}
1. for (var i = 1; i<=500; i++) {
2.     red = Math.sin(ra += .03)*127+128;
3.     green = Math.sin(rb += .02)*127+128;
4.     blue = Math.sin(rc += .01)*127+128;
5.     myCol = red << 16 | green << 8 | blue;
6.     attachMovie('colorme', 'colorme'+i, i, {_y:0, _x:i});
7.     mcColor = new Color(this['colorme'+i]);
8.     mcColor.setRGB(myCol);
9. }

But the gradient fade doesn't come out the same. I don't know if you play around with it if perhaps you will get similar results or not.
• Novice
• Posts: 29

3+ Months Ago

ok, well the reason "efficiency" is so important is because there are is alot of code weighing down what i want to be doing in the first place. so please...

hmm, the ra, rb, and rc variables are defined within the expression?

i thought i should mention, isnt it annoying that you cannot define variables in expressions in AS2.0 ? so annoying... but there is a way around this when using for loops...

the less the amount of defined variables, the higher the efficiency. furthermore the only reason variables should be used is if you will be working with what is going on in the variable, which in this case is irrelevant since this is an algorithm we're working with variables and functions should be kept at a minimal...

the reason im saying this is i felt you didnt see it necessary to bother with efficiency...

the more efficient my algorithms are, the more i can do with my code.

here it is refined:
Code: [ Select ]
for (var i=1, ra=0,rb=0,rc=0; i<=500; i++) {
attachMovie('colorme', 'colorme'+i, i, {_y:0, _x:i});
mcColor = new Color(this['colorme'+i]);
mcColor.setRGB((Math.sin(ra += .03)*127+128) << 16 | (Math.sin(rb += .02)*127+128) << 8 | (Math.sin(rc += .01)*127+128));
}
1. for (var i=1, ra=0,rb=0,rc=0; i<=500; i++) {
2. attachMovie('colorme', 'colorme'+i, i, {_y:0, _x:i});
3. mcColor = new Color(this['colorme'+i]);
4. mcColor.setRGB((Math.sin(ra += .03)*127+128) << 16 | (Math.sin(rb += .02)*127+128) << 8 | (Math.sin(rc += .01)*127+128));
5. }

cool gradient... thanks man i will mess around with this =]

incase your interested in the things i wish to color->
http://huseyin.kicks-ass.net/htdocs/spacewarpdeus.html

there is an index of other stuff here ->
http://huseyin.kicks-ass.net/htdocs/
• Novice
• Posts: 29

3+ Months Ago

i looked around but i couldnt find jack that explained how i could implement my own incrementation ratio based on some maximum range...

if u know of any i'd like the hook up =]
tnx
• Guru
• Posts: 1402

3+ Months Ago

Oh, I definitely think efficiency is always something important to include in code... I was just saying that I personally have no clue how to make your current code more efficient.

And I have never used AS2.0 (still a Flash MXer), so I have no idea about the variables in expressions dealy.

Excellent stuff on your site btw :thumb:

## Post Information

• Total Posts in this topic: 20 posts
• Users browsing this forum: No registered users and 7 guests
• You cannot post new topics in this forum
• You cannot reply to topics in this forum
• You cannot edit your posts in this forum
• You cannot delete your posts in this forum
• You cannot post attachments in this forum