2016-09-29 7 views
0

Je souhaite mettre en oeuvre une fonction en C++/REALbasic pour créer un gradient de couleur par les paramètres:dégradé linéaire avec l'angle et la force

  1. largeur et la hauteur de l'image
  2. 2 couleurs du gradient
  3. angle (direction) du gradient
  4. force du gradient

les liens suivants montrent quelques exemples de la i de sortie souhaitée mage: http://www.artima.com/articles/linear_gradients_in_flex_4.html, http://i.stack.imgur.com/4ssfj.png

j'ai trouvé plusieurs exemples, mais ils me donner que des gradients verticaux et horizontaux, alors que je veux préciser aussi l'angle et la force.

Quelqu'un peut-il m'aider s'il vous plaît?

P.S .: Je ne connais qu'un peu la géométrie !! :(

+1

S'il vous plaît [modifier] votre question pour montrer [ce que vous avez essayé jusqu'à présent] (http: // whathaveyoutried .com). Vous devriez inclure un [mcve] du code avec lequel vous rencontrez des problèmes, puis nous pouvons essayer d'aider avec le problème spécifique. Vous devriez aussi lire [ask]. –

+0

Je ne suis pas sûr de ce que vous entendez par "force". L'opacité de tout le gradient, c'est-à-dire l'alpha? – plasmacel

Répondre

0

Votre question est très large et, comme c'est, c'est un exercice assez complexe avec beaucoup de code, y compris le rendu d'image, le traitement du format d'image, l'écriture sur disque, etc. fonction. Pour cette raison, je me concentre sur faire un dégradé de couleur linéaire arbitraire de 2 couleurs.

gradient de couleur linéaire

Vous pouvez créer une couleur linéaire « gradient » par linear interpolation entre deux couleurs. Cependant linéaire simple l'interpolation rend les transitions vraiment dures.Pour des résultats visuellement plus attrayants, je recommande d'utiliser une sorte de S-shaped courbe d'interpolation comme l'interpolation Hermite basée smoothstep.

Linear color gradient

En ce qui concerne l'angle, on peut définir un segment de droite par les points de départ (p0) et l'extrémité (p1) du gradient de couleur. Appelons la distance entre eux d01, donc d01 = distance(p0, p1). Ensuite, pour chaque point de pixel p de l'image, vous devez calculer le point le plus proche p2 sur ce segment. Here is an example comment faire cela. Puis calculer t = distance(p0, p2)/d01. Ce sera le lerp paramètre t dans la plage [0, 1]. Interpole entre les 2 couleurs dégradées par ce t et vous obtenez la couleur pour le point donné p.

Cela peut être mis en œuvre de plusieurs façons. Vous pouvez utiliser OpenGL pour rendre l'image, puis relire le tampon de pixels dans la RAM. Si vous n'êtes pas familier avec OpenGL ou le processus de rendu, vous pouvez écrire une fonction qui prend un point (les coordonnées 2D d'un pixel) et renvoie une couleur RVB - de sorte que vous pouvez calculer tous les pixels de l'image. Enfin, vous pouvez écrire l'image sur le disque en utilisant un format d'image, mais c'est une autre histoire.


Voici des exemples d'implémentations C++ 14 de certaines fonctions mentionnées ci-dessus.

simple interpolation linéaire:

template <typename T, typename U> 
T lerp(const T &a, const T &b, const U &t) 
{ 
    return (U(1) - t)*a + t*b; 
} 

, où a et b sont les deux valeurs (couleurs dans ce cas) vous voulez interpoler entre, et t est le paramètre d'interpolation dans l'intervalle [0, 1] représentant la transition entre a et b.

Bien sûr, la fonction ci-dessus nécessite un type T qui prend en charge la multiplication par un scalaire. Vous pouvez simplement utiliser n'importe quel type de vecteur 3D à cette fin, car les couleurs sont en fait des coordonnées dans l'espace colorimétrique.

Distance entre deux points 2D:

#include <cmath> 

auto length(const Point2 &p) 
{ 
    return std::sqrt(p.x*p.x + p.y*p.y); 
} 

auto distance(const Point2 &a, const Point2 &b) 
{ 
    Point delta = b - a; 
    return length(delta); 
} 

Image de https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

+0

Merci beaucoup pour votre explication complète et exhaustive !! :) – Joseph86