Vanaf kleur/kleur+overlay de kleur van de overlay berekenen?

[Xthemes.us]

Ik weet niet of dit uberhaupt wiskundig mogelijk is, dus vandaar de vraag.. weet iemand hoe je de 'kleur' van een overlay berekend?

Om te kijken of ik er een patroon in zag heb ik in de gimp even snel een plaatje gemaakt met 2 layers. De eerste layer als groen, de tweede layer als rood en op 25% 'opacity'. Vervolgens de resulterende kleur op een aparte laag geplakt (layer 3). Ik dacht dat 1 van de kleurmodellen wellicht simpelweg ergens 75% of 25% kon worden berekend om tot een resultaat te komen maar ik zie nog niet echt een patroon.

Kan hier ook niks over vinden op het internet dus ik vraag me af of het uberhaupt wel mogelijk is of dat er meerdere mogelijkheden zijn als je enkel deze 2 gegevens hebt (bijvoorbeeld een donkerde 'overlay' kleur met lagere opacity geeft hetzelfde resultaat).

Het mag best rekenintensief (semi-bruteforce) zijn maar elke mogelijke kleur in elke mogelijk doorzichtigheidsgraad uitproberen leek me zelfs voor een test een beetje teveel van het goede te zijn.


een plaatje zegt meer dan duizend woorden.

Voor de wiskundigen onder ons die goed zijn in het herkennen van patronen (sluit ik mijzelf twee keer buiten) is dit wellicht nog handig:

code:

+------+------+-----+
|   l1 |  l2  |  l3 |
+------+------+-----+
|K  75 |   0  |  55 |
|V  87 |  87  |  85 |
|W  90 |  90  |  76 |
+------+------+-----+
|R 181 | 230  | 193 |
|G 230 |  29  | 180 |
|B  29 |  29  |  29 |
+------+------------+
|H  75 |   0  |  55 |
|S  80 |  80  |  74 |
|L  51 |  51  |  44 |
+------+------------+
|H  75 |   0  |  55 |
|S  87 |  87  |  85 |
|V  90 |  90  |  76 |
+------+------------+

Horizontaal de 'layers', verticaal de waarden in de verschillende kleurmodellen

[Crayne]

Je hebt horizontaal en verticaal verwisseld. Een berekening die steek houdt voor RGB in dit geval (maar mogelijk niet voor andere kleuren is:

x13 = x11 + (x12 - x11) / 4, waarbij x voor R,G en B kan worden gebruikt.

Dus:

R13 = 181 + (230-181) / 4 -> R13 = 181 + 12,25 -> R13 = (afgerond) 193
G13 = 230 + (29-230) / 4 -> G13 = 230 - 50,25 -> G13 = (afgerond) 180
B13 = 29 + (29-29) / 4 -> B13 = 29 + 0 -> B13 = 29

@Feanathiel: dat zeg ik, Gamma.

[ Voor 6% gewijzigd door Crayne op 20-07-2011 15:51 ]

[Feanathiel]

In het geval dat je slechts twee kleuren hebt, heb je een ontbrekende factor. Ofwel de tussenkleur moet bekend zijn, of de itensiteit daarvan. Mocht je in bezit zijn van één van beide factoren, dan is de andere waarde te berekenen met:

code:

   C1   C2   C3
R  181  230  193
G  230   29  180
B  29    29   29

I  0.25

R2 = R1 + (R3 - R1) * 1/I = 229 (~230)
G2 = G1 + (G3 - G1) * 1/I = 30 (~29)
B2 = B1 + (B3 - B1) * 1/I = 29

@hierboven: Wellicht ook relevant om te noemen hoe je aan de 'magische waarde' 4 komt. Zo weet de TS ook waar deze vandaan komt, en kan daardoor ook andere berekeningen zelf opstellen.

[ Voor 18% gewijzigd door Feanathiel op 20-07-2011 15:54 . Reden: RGB2 variabelen toegevoegd, reactie Crayne ]

[.oisyn]

Je had niet gewoon zelf kunnen bedenken dat als a + b = c, dat je dan b kunt berekenen door c - a te doen?
.edit: oh wacht ik zie nu dat je niet snapte dat de überhaupt van de RGB color space uit moest gaan.

.edit2: jullie berekeningen kloppen overigens niet. Jullie gaan uit van additive blending, maar als je een overlay hebt met een opacity van 25% impliceert dat ook dat je maar 75% van de bron ziet.
[.edit3: nee wacht, ik snap jullie berekening niet a*(1-i) + b*i <=> a + (b-a)*i]

Oftewel
0.75*S_r + 0.25*O_r = D_r
Met S_r de roodwaarde van de source, O_r die van het overlay, en D_r die van het doel.

Daaruit volgt:
0.25*O_r = D_r - 0.75*S_r
O_r = (D_r - 0.75*S_r) / 0.25

Natuurlijk idem voor g en b.

[ Voor 98% gewijzigd door .oisyn op 20-07-2011 16:08 ]

[Verwijderd]

Als het goed is doet dit script wat je wil; je kunt de kleur van de overlay berekenen adhv de achtergrondkleur:

PHP:

function calculate_overlay( $fore, $back, $opacity = 100 ) {
    $rgb_fore = array(
        'r' => hexdec($fore[0].$fore[1]),
        'g' => hexdec($fore[2].$fore[3]),
        'b' => hexdec($fore[4].$fore[5])
    );
    $rgb_back = array(
        'r' => hexdec($back[0].$back[1]),
        'g' => hexdec($back[2].$back[3]),
        'b' => hexdec($back[4].$back[5])
    );
    
    $rgb_tmp = array(
        'r' => max($rgb_fore['r'], $rgb_back['r']) - min($rgb_fore['r'], $rgb_back['r']),
        'g' => max($rgb_fore['g'], $rgb_back['g']) - min($rgb_fore['g'], $rgb_back['g']),
        'b' => max($rgb_fore['b'], $rgb_back['b']) - min($rgb_fore['b'], $rgb_back['b'])
    );
    
    if($opacity == 100) {
        return dechex($rgb_tmp['r']).dechex($rgb_tmp['g']).dechex($rgb_tmp['b']);
    }
    
    $rgb_blend = array(
        'r' => blender( $rgb_back['r'], $rgb_tmp['r'], $opacity ),
        'g' => blender( $rgb_back['g'], $rgb_tmp['g'], $opacity ),
        'b' => blender( $rgb_back['b'], $rgb_tmp['b'], $opacity )
    );
    
    return dechex($rgb_blend['r']).dechex($rgb_blend['g']).dechex($rgb_blend['b']);
}

function blender( $old, $new, $opacity) {
    return round(($opacity / 100) * $new + (1 - ($opacity / 100)) * $old);
}

Voor andere talen zul je helaas bij iemand anders moeten aankloppen... Of zelf puzzelen

[Xthemes.us]

Bedankt voor de antwoorden, ik zal eens een klein programmaatje schrijven om te kijken of ik dan met een paar gokjes met betrekking tot de overlay kleur het gewenste resultaat kan behalen. Zolang het op het oog maar niet al te duidelijk afwijkt is het al goed.

Nogmaals, bedankt!

[.oisyn]

Verwijderd schreef op woensdag 20 juli 2011 @ 16:23:
Als het goed is doet dit script wat je wil; je kunt de kleur van de overlay berekenen adhv de achtergrondkleur:

Wat jij daar doet is de nieuwe kleur berekenen aan de hand van de achtergrondkleur en overlay

[Verwijderd]

.oisyn schreef op woensdag 20 juli 2011 @ 17:12:
[...]

Wat jij daar doet is de nieuwe kleur berekenen aan de hand van de achtergrondkleur en overlay

Dat is toch de bedoeling

Er zijn 3 kleuren; de voorgrond, een overlay en de achtergrond. + een transparantie.
De voor- en achtergrond zijn bekend, net als de transparantie, maar niet de overlay.

Ik bereken dus eerst het verschil tussen de voor- en achtergrond, en dan het verschil in transparantie tussen het verschil (voor/achter) en de achtergrond.

Ik houd dan de (werkelijke) overlay kleur over.

[.oisyn]

D'r klopt iig niets van je berekening. Je berekent eerst het absolute verschil (ipv het verschil met teken ) (en gebruik dan gewoon abs() ipv moeilijk te doen met min() en max() ). Vervolgens ga je met dat absolute verschil blenden. Dan krijg je echt niet je overlay eruit, hoor.

Voorbeeld:

achtergrond: 120
overlay: 40
opacity: 25%
voorgrond is dan .75*120 + .25*40 = 100

Jij berekent een verschil van abs(100-120) = 20, vervolgens ga je dat blenden met de achtergrond, dus 120*0.75 + 20*0.25 = 95. Niet echt bepaald de 40 die we hadden verwacht.

In plaats daarvan moet je het verschil berekenen met de geblende achtergrond, dus 100 - (0.75 * 120) = 10. Dat deel je door de opacity, dus 10 / 0.25 = 40. Tada, je overlay.

Een andere tip: werk intern gewoon met getallen, niet met representaties. Dus geen hex codes of een opacity in procentpunten, die hebben in feite niets te zoeken in je functie. Het omzetten van/naar representatie doe je pas aan het begin en eind.

[ Voor 87% gewijzigd door .oisyn op 20-07-2011 18:01 ]