J'aime bien mettre des mots compliqués pour faire peur alors qu'il s'agit de concept assez intuitif.

Prenons deux roses modifiées dont la frontière est brutale !

Ce qu'on aimerait c'est lisser les transformations pour que mises côtes à côtes elles fusionnent mieux.

Pour le verte on ferait la transformation r,g,b=r,b,g à 100 % quand on est tout à gauche mais seulement à 50 % quand on est tout à droite (et 50 % de la transformation r,g,b=b,g,r qui donne l'image rouge)

Pour ça notre code doit tenir compte de l'abscisse x du pixel qu'on est en train de traiter !

Posons  ratio=1-x/largeur*0.5

Quand x vaut 0 (tout à gauche) ratio vaut 1-0=1 soit 100 %

Quand x vaut largeur (à droite de l'image) ratio vaut 1-1*0.5=0.5 soit 50 %

On définit alors la nouvelle couleur ainsi : (attention ça fait peur)

r,g,b=  r*ratio+b*(1-ratio) , b*ratio+g*(1-ratio) , g*ratio+r*(1-ratio)

J'ai mis en gras la transformation r,b,g qui donne l'image verte et en italique la transformation b,g,r qui donne l'image rouge. Et finalement on fait la moyenne des deux transformations selon le coefficient ratio !

Voyons plutôt le résultat :

Maintenant on va appliquer la même méthode pour l'image rouge. Pour elle on veut du 50 % à gauche et du 0% à droite (oui 0% transfo verte pour avoir du 100 % transfo rouge)

Alors ratio=0.5-x/largeur*0.5 (je vous laisse tester x=0 et x=largeur)

Voyons le résultat tout de suite :

Et mettons les côte à côte !

Les couleurs à la frontières sont dans les mêmes tons ! Évidemment la frontière reste visible puisque les formes à cet endroit là ne sont pas les mêmes. Une solution serait de renverser horizontalement une des deux images pour que les bords coïncident ainsi :

Ah mais les forment vont bien ensemble mais plus les couleurs ! C'est normal en inversant le positionnement on a pas calculé le ratio de la bonne façon.

Comme on échange gauche et droite il faut un ratio de 0 % vert - 100 % rouge  quand on est en x=0 (la gauche qui ira à droite) et un ratio de 50 % vert - 50 % rouge quand on est en x=largeur (la droite qui ira à gauche)

ainsi ratio=0+0.5*x/largeur

Bien sûr on pouvait choisir de plutôt renverser l'image de gauche :

On peut imaginer plusieurs déclinaisons de ce principe : par exemple un ratio 100 % coloré pour commencer puis 100 % pour finir

On obtient quelque chose ainsi :

Pour finir je vais parler de gradient : on a toujours pris une dépendance affine du ratio en x, donc un gradient constant. En français, ça veut dire que la vitesse de "décoloration" est  constante tout le long de l'image. Or on pourrait aimer une image qui reste colorée plus longtemps et qui ne devienne grise qu'à l'approche de la frontière pour permettre l'union.

On va post-traiter le ratio avec une sigmoide ; je ne le fais que sur l'image de droite pour que vous voyez la différence.

La rose rouge reste colorée plus longtemps avant de virer au gris au niveau de la frontière !

Une sigmoide c'est quoi ? C'est une fonction dont la vocation est d'écraser les signaux faibles et de renforcer les signaux forts (en économie on appelle ça le capitalisme :p)

Quand ratio dépasse un certain point de bascule (défini par des paramètres mathématiques) alors il est renforcé : ainsi à un endroit avec un ratio initial de 60 % rouge - 40 % gris le renforcement donne quelque chose plus proche de 80 % rouge - 20 % gris .

Ce tour de passe n'est possible que par un brusque revirement au niveau du point de bascule (parce qu'au final il faudra bien arriver au 0 % rouge -100 % gris ) : le rouge reste plus longtemps avant de tomber subitement dans le gris. Cela dit, toujours grâce aux paramètres, il y a même une graduation nuancé entre la couleur et le gris.

Voilà ce qu'on a avec des mauvais paramètres :

Pas le bon point de bascule (trop tôt) et changement beaucoup trop brutal !

Allez, quoi de mieux qu'une sigmoide folle pour se dire au-revoir !