[CHERCHE ALGO] simuler une transparence

Le
unbewusst.sein
je cherche un script, un algo, qui simulerait une transparence dans un
cas spécifique :

- j'ai deux couleurs C1 et C2 l'une, le fond à alpha = 1, l'autre à
alpha 0.5.

et je souhaite obtenir la couleur C3 qui résulterait de la superposition
de ces deux couleurs

est-ce que ce serait "bêtement" :

C3=(C1*alpha(C2)+C2)/(1+alpha(C2)) ????

--
Une Bévue
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Elegie
Le #725201
Une Bévue wrote:

Bonjour,

je cherche un script, un algo, qui simulerait une transparence dans un
cas spécifique :

- j'ai deux couleurs C1 et C2 l'une, le fond à alpha = 1, l'autre à
alpha 0.5.

et je souhaite obtenir la couleur C3 qui résulterait de la superposition
de ces deux couleurs...

est-ce que ce serait "bêtement" :

C3=(C1*alpha(C2)+C2)/(1+alpha(C2)) ????


A priori non, cette formule sert surtout dans le calcul de l'âge du
capitaine, je vous recommande plutôt de décomposer les couleurs en RGB,
et pour chaque partie, de sommer les valeurs de chaque couche en
pondérant par l'alpha réel de la couche... :)


Cheers,
Elegie.

---
<style type="text/css">
th, td {
background-color:#dff7a8;
font-family:Courier New;
font-size:0.9em;
}
input[type=text] {
background-color:transparent;
border:1px solid #0c0;
text-align:center;
}
input[type=button] {
background-color:#0c0;
color:#eee;
font-weight:700;
}
div { position:absolute;}
#div1 { height:20px; width:200px; top:150px; left:10px; }
#div2 { height:20px; width:200px; top:150px; left:110px; }
#div3 { height:20px; width:300px; top:170px; left:10px; }

/*Fix zIndex - this could also be parameterized*/
body {z-index : 0;}
#div1 {z-index : 1;}
#div2 {z-index : 2;}

/*fix body backcolor - this could also be parameterized*/
html, body {background-color:#fff}
</style>

<form>
<table>
<tbody>
<tr>
<th>Element</th>
<th>Alpha</th>
<th>Color</th>
</tr>
<tr>
<td>Background</td>
<td><input type="text" name="alpha1" value="1"></td>
<td><input type="text" name="color1" value="#cc0000"></td>
</tr>
<tr>
<td>Foreground</td>
<td><input type="text" name="color2" value="#0000cc"></td>
</tr>
</tbody>
</table>
</form>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

<script type="text/javascript">
function foo(frm) {
var
div1=document.getElementById("div1"),
div2=document.getElementById("div2"),
div3=document.getElementById("div3"),
color1=frm.color1.value,
color2=frm.color2.value,
alpha1=frm.alpha1.value,
alpha2=frm.alpha2.value;

// check input
if(!(
/^(0.dd?|1)$/.test(alpha1) &&
/^(0.dd?|1)$/.test(alpha2) &&
/^#(d|[a-f]){6}$/i.test(color1) &&
/^#(d|[a-f]){6}$/i.test(color1)
)){
alert("Invalid input - please Check.");
return;
}

// apply parameters
div1.style.backgroundColor=color1;
div2.style.backgroundColor=color2;
if(typeof div1.style.filter!="undefined") {
div1.style.filter="alpha(opacity="+alpha1*100+")";
div2.style.filter="alpha(opacity="+alpha2*100+")";
} else if(typeof div1.style.MozOpacity!="undefined") {
div1.style.MozOpacity=alpha1;
div2.style.MozOpacity=alpha2;
}

// calculate the third color
div3.style.backgroundColor = "#" +
getPart(color1.substr(1,2), alpha1, color2.substr(1,2), alpha2) +
getPart(color1.substr(3,2), alpha1, color2.substr(3,2), alpha2) +
getPart(color1.substr(5,2), alpha1, color2.substr(5,2), alpha2) ;

function getPart(c1, a1, c2, a2) {
// assume body's white background, #ffffff
return padl (
Math.floor(
parseInt("ff", 16)*(1-a1)*(1-a2) +
parseInt(c1,16)*a1*(1-a2) +
parseInt(c2,16)*a2
).toString(16),
"0",
2
);
}

function padl(what, ch, count) {
while(what.length<count)
what=ch+what;
return what;
}
}

window.onload = function (evt) {
foo(document.forms[0]);
}
</script>
---

unbewusst.sein
Le #722690
Elegie
C3=(C1*alpha(C2)+C2)/(1+alpha(C2)) ????


A priori non, cette formule sert surtout dans le calcul de l'âge du
capitaine, je vous recommande plutôt de décomposer les couleurs en RGB,
et pour chaque partie, de sommer les valeurs de chaque couche en
pondérant par l'alpha réel de la couche... :)


bien sûr ce n'était qu'une expression symbolique cette formule je l'ai
appliquée 3 fois donc à chaque composante... ;-)


j'ai aussi supposé un background à #fff

mais bon je n'ai pas du tout utilisé les :

divx.style.filter ou MozOpacity

si je comprend bien votre algo les an sont les opacités et donc les 1 -
an les transparences, ça OK mais ce que je ne pige pas c'est pourquoi
pour une couche donnée vous multipliez l'intensité de couleur par
l'opacity car en symbolique vous écrivez :

Cresultant%5*(1-a1)*(1-a2) + C1*a1*(1-a2) + C2*a2

ah oui, pigé si a1¢=0 ont retrouve le fond et il suffit d'avoir a2=1
pour ne voir que la couleur C2

j'ai découvert aussi le parsInt("ff",16)...
je connaissais le lycée de versailles .toString(16)...

bon, je dois donc corriger le tir de mon premier essi :


où je calcule aussi une sorte de permutation circulaire de C2 pour
obtenir C4 et C5 les couleurs du menu.

l'idée étant "d'accrocher" toutes les couleurs à une seule C1.

pour C3 et C4 j'utilise (en simplifié) un algo présent dans la page :


en version"Triad"


en tk, merci beaucoup pour l'algo!!!
--
Une Bévue


Elegie
Le #722688
Une Bévue wrote:

Hello,

bien sûr ce n'était qu'une expression symbolique cette formule je l'ai
appliquée 3 fois donc à chaque composante... ;-)


J'avoue l'avoir essayée sur chaque composante également, mais sans
obtenir le résultat attendu, d'où mon scepticisme initial :)

j'ai aussi supposé un background à #fff


En fait, l'algoritme, pour être bien cerné, suppose au moins
l'utilisation de deux alphas, donc de trois couches, la dernière
constituant le fond par nature opaque.

Mais vous pouvez bien sûr le généraliser en rajoutant 'n' couches, et en
tenant alors compte de la tranparence de ces 'n' couches.

divx.style.filter ou MozOpacity


En fait, ces propriétés servent surtout dans le cas de tests, pour
valider de façon visuelle la reconstitution des couleurs, et donc le
code en général.

Dans un exemple réel, le test de ces deux propriétés ne suffirait
toutefois pas, il faudrait également inclure des tests d'opacité
CSS3/Safari; mais j'avais la flemme de rechercher dans mes archives... :$

j'ai découvert aussi le parsInt("ff",16)...


Pour info, les "bonnes pratiques" javascript recommandent généralement
l'emploi systématique du second argument.


je connaissais le lycée de versailles .toString(16)...


Mon dieu !



Je constate que vous avez de bien jolis projets en cours ! Félicitations
pour ce bon travail, et bonne chance pour la suite.


Cheers,
Elegie.

unbewusst.sein
Le #722687
Elegie
divx.style.filter ou MozOpacity


En fait, ces propriétés servent surtout dans le cas de tests, pour
valider de façon visuelle la reconstitution des couleurs, et donc le
code en général.

Dans un exemple réel, le test de ces deux propriétés ne suffirait
toutefois pas, il faudrait également inclure des tests d'opacité
CSS3/Safari; mais j'avais la flemme de rechercher dans mes archives... :$



je chercherai ça pour tester sur safari.

j'ai découvert aussi le parsInt("ff",16)...


Pour info, les "bonnes pratiques" javascript recommandent généralement
l'emploi systématique du second argument.



ben j'ai eu du bol sans doute (jamais de "0n") ...

merci !
--
Une Bévue


Publicité
Poster une réponse
Anonyme