hex-werte mischen?

hallo

ich habe zum mischen von farben bisher immer den 'umweg' verwendet, die hex-codes der farben zunächst in ein rgb-objekt mit dezimalwerten umzuwandeln..kann ich mir das nicht unter umständen sparen und gleich mit den hex-werten rechnen?

ich komm irgendwie nicht ganz dahinter, wie ich die zahlen handeln soll..

gruß,
Tante Amanda

[thebiz]

Hi.
Ich kann es nicht 100% nachvollziehen.
Vielleicht helfen Dir aber folgenden Beispiele:

PHP-Code:

trace((0xff));
trace((0xff + 0xff).toString(10));
trace((255).toString(16)); 


hi thebiz..

mh nein..das hilft mir nicht wirklich weiter...

die farbe die ausgegeben wird, entspricht der angegeben mischung. was mich nur stört ist der umweg über die dezimalwerte..was ich eigentlich bräuchte, wäre ein beispiel bzw. ein gednklichen ansatz, wie ich für die hexadezimalwerte, sofern möglich, genau so ein mischungsverhältnis berechnen kann...

//// COLOR METHODS
MovieClip.prototype.mixColor = function(b, m, p) {
    var b = hex2rgb(b), m = hex2rgb(m), nrgb = {};
    for (var n in b) {
        nrgb[n] = b[n]+Math.round((m[n]-b[n])/100*p);
    }
    return rgb2hex(nrgb);
};
MovieClip.prototype.hex2rgb = function(h) {
    return {r:h >> 16, g:h >> 8 & 255, b:h & 255};
};
MovieClip.prototype.rgb2hex = function(o) {
    return (o.r << 16 | o.g << 8 | o.b);
};
////
trace(mixColor(0xFFFFFF, 0x0066BB, 10).toString(16));
trace((0xffffff+Math.round((0x0066bb-0xffffff)/100*10)).toString(16)); // so gehts ja leider nicht :D 
 

gruß,
Tante Amanda

[thebiz]

Also man kann doch nicht Hexadezimal-Zahlen
druch Dezimal-Zahlen teilen und mal nehmen etc.

Man muss schon in einem Zahlensystem bleiben.
Also entweder alles nach Hexa oder alles nach Dezi
umwandeln um zu rechnen.

[elias]

also! du möchtest vermutlich einfach die hex werte miteinander verrechnen,
ohne vorher die einzelnen bytes (r,g,b) aufzusplitten. das wird so AFAIK aber
nicht funktionieren, weill drei einzelne byte werte (FF, FF, FF) was anderes
sind als ein wert (FFFFFF). (die werte werden ja nur in einen integer
gapackt um speicherplatz zu sparen) für deinen farbmixer musst du also
erstmal jedes byte extrahieren und dann neu berechnen.

ich sehe da momentan die einzige möglichkeit alles in eine funktion zu
quetschen und so die funktionen, objekte und schleifen zu sparen (zu
lasten der modularität).

ich habe die funktionen mal ein bischen gebenchmarkt. meine funktion
ist etwas mehr als doppelt so schnell. wobei die zweite version nicht viel
zuwachs hat.

möglich das es noch irgendwelche rechentricks gibt um die berechnung zu
vereinfachen, aber mathe ist nicht mein ding.

achso hier nen netter link zu bitweisen operatoren:
http://www.gamedev.net/reference/art...rticle1563.asp

und ja ich hatte langeweile!

var time, res;
var loops = 10000;
 
var one = 0xFFFFFF;
var two = 0x0066bb;
 
function rasMixColor1(a, b, f){
    var r1 = a >> 16 & 255;
    var g1 = a >> 8 & 255;
    var b1 = a & 255;
    var r2 = b >> 16 & 255;
    var g2 = b >> 8 & 255;
    var b2 = b & 255;
    var m = Math.round;
    
    var r3 = r1 + m( (r2 - r1) / 100*f );
    var g3 = g1 + m( (g2 - g1) / 100*f );
    var b3 = b1 + m( (b2 - b1) / 100*f );
    
    return (r3 << 16 | g3 << 8 | b3);
}
time = getTimer();
for (var i = 0; i < loops; i++) res = rasMixColor1(one, two, 10).toString(16);
time = getTimer() - time;
trace('rasMixColor1: ' + res);
trace('-- time needed: ' + time);
 
function rasMixColor2(a, b, f){
    var r1 = a >> 16 & 255;
    var g1 = a >> 8 & 255;
    var b1 = a & 255;
    var m = Math.round;
    
    return ((r1 + m( ((b >> 16 & 255) - r1) / 100*f )) << 16 |
            (g1 + m( ((b >> 8 & 255) - g1) / 100*f )) << 8 |
            (b1 + m( ((b & 255) - b1) / 100*f )));
}
time = getTimer();
for (var i = 0; i < loops; i++) res = rasMixColor2(one, two, 10).toString(16);
time = getTimer() - time;
trace('rasMixColor2: ' + res);
trace('-- time needed: ' + time);
 
MovieClip.prototype.mixColor = function(b, m, p) {
    var b = hex2rgb(b), m = hex2rgb(m), nrgb = {};
    for (var n in b) {
        nrgb[n] = b[n]+Math.round((m[n]-b[n])/100*p);
    }
    return rgb2hex(nrgb);
}
MovieClip.prototype.hex2rgb = function(h) {
    return {r:h >> 16, g:h >> 8 & 255, b:h & 255};
}
MovieClip.prototype.rgb2hex = function(o) {
    return (o.r << 16 | o.g << 8 | o.b);
}
time = getTimer();
for (var i = 0; i < loops; i++) res = mixColor(one, two, 10).toString(16);
time = getTimer() - time;
trace('Amandas - mixColor: ' + res ); 
trace('-- time needed: ' + time.toString()); 

hier die zeiten. wenns um geschwindigkeit geht sollte man wirklich den
code extrem reduzieren. allerdings sollte man von lokalen variablen gebrauch
machen, weil der code übersichlicher wird und nicht wirklich viel performance
drauf geht.

// Ausgabe (10000 Loops):

rasMixColor1: e6f0f8
-- time needed: 972
rasMixColor2: e6f0f8
-- time needed: 961
Amandas - mixColor: e6f0f8
-- time needed: 2172

danke für die erläuterungen, binary blade..

mh...wenn ich im gleichen zahlensystem bleibe...wieso funktioniert das hier dann nicht..:

0xffffff+Math.round((0x0066bb-0xffffff)/0x64)*0xa 

die hexadezimalwerte werden hier ja sowieso als dezimalwerte ausgegeben, insofern sollte die rechnung ja in sich stimmig sein. oder hab ich jetzt einfach ein brett vor dem kopf...ich mein..eigentlich ist das ja so etwas wie ein term und die werte beliebig austauschbar, wenn ihr verhältnis zueinander gleich bleibt...

gruß,
Tante Amanda

[elias]

da mathe bei mir eher ausm bauch kommt habe ich mal ein bischen
rumprobiert. und es kam die erleuchtung.

//test 1
 
function rasMixColor1(a, b, f){
    var r1 = a >> 16 & 255;
    var g1 = a >> 8 & 255;
    var b1 = a & 255;
    var r2 = b >> 16 & 255;
    var g2 = b >> 8 & 255;
    var b2 = b & 255;
    var m = Math.round;
    
    var r3 = r1 + m( (r2 - r1) / 100 * f );
    var g3 = g1 + m( (g2 - g1) / 100 * f );
    var b3 = b1 + m( (b2 - b1) / 100 * f );
    
    return (r3 << 16 | g3 << 8 | b3);
} 
 
trace(rasMixColor1(0xcccccc, 0xaaaaaa, 10)); //13224393
trace(
     0xcccccc + Math.round( (0xaaaaaa - 0xcccccc) / 100 * 10 )
      ); 
var a = 0xcc + Math.round( (0xaa - 0xcc) / 100 * 10 )
trace((a << 16 | a << 8 | a));
 
/*
rasMixColor1(0xcccccc, 0xaaaaaa, 10) = 13224393
ganze hex = 13198076
hex einzeln = 13224393
*/
 
 
//test 2
function rasMixColor1(a, b, f){
    var r1 = a >> 16 & 255;
    var g1 = a >> 8 & 255;
    var b1 = a & 255;
    var r2 = b >> 16 & 255;
    var g2 = b >> 8 & 255;
    var b2 = b & 255;
    var m = Math.round;
    
    var r3 = r1 + m( (r2 - r1)  );
    var g3 = g1 + m( (g2 - g1)  );
    var b3 = b1 + m( (b2 - b1)  );
    
    return (r3 << 16 | g3 << 8 | b3);
} 
 
trace(rasMixColor1(0xcccccc, 0xaaaaaa, 10)); //13224393
trace(
     0xcccccc + Math.round( (0xaaaaaa - 0xcccccc)  )
      ); 
var a = 0xcc + Math.round( (0xaa - 0xcc) )
trace((a << 16 | a << 8 | a));
 
/*
rasMixColor1(0xcccccc, 0xaaaaaa, 10) = 11184810
ganze hex = 11184810
hex einzeln = 11184810
*/ 

also eigentlich ganz simpel. es liegt daran das das dividieren oder
multiplizieren mit einzelnen bytes (0xff/100*10)andere werte hervorbring als
mit den drei bytes (0xffffff/100*10).