[CHERCHE ALGO] simuler une transparence

Elegie

07/03/2007 à 14:34

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="alpha2" value="0.5"></td>
<td><input type="text" name="color2" value="#0000cc"></td>
</tr>
</tbody>
</table>
<input type="button" value="Run!" onclick="foo(this.form)">
</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>
---

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="alpha2" value="0.5"></td>
<td><input type="text" name="color2" value="#0000cc"></td>
</tr>
</tbody>
</table>
<input type="button" value="Run!" onclick="foo(this.form)">
</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>
---

Vous avez filtré cet utilisateur ! Consultez son message

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="alpha2" value="0.5"></td>
<td><input type="text" name="color2" value="#0000cc"></td>
</tr>
</tbody>
</table>
<input type="button" value="Run!" onclick="foo(this.form)">
</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

08/03/2007 à 07:54

Elegie wrote:

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 :

<http://www.yvon-thoraval.com/Events/event_listener.xhtml>

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 :

<http://www.yvon-thoraval.com/Colors/colorscheme2/index-en.html>

en version"Triad"

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

Elegie

08/03/2007 à 12:10

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.

<URL:http://jibbering.com/faq/#FAQ4_12>

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

Mon dieu !

<http://www.yvon-thoraval.com/Events/event_listener.xhtml>
<http://www.yvon-thoraval.com/Colors/colorscheme2/index-en.html>

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

08/03/2007 à 14:38

Elegie wrote:

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.

<URL:http://jibbering.com/faq/#FAQ4_12>

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

merci !
--
Une Bévue

[CHERCHE ALGO] simuler une transparence

4 réponses

Veuillez sélectionner un problème