0

I want implement a function in C++/RealBasic to create a color gradient by the parameters:

  1. Width and height of the image
  2. 2 colors of the gradient
  3. Angle (direction) of the gradient
  4. Strength of the gradient

The following links show some examples of the desired output image: http://www.artima.com/articles/linear_gradients_in_flex_4.html, https://i.stack.imgur.com/4ssfj.png

I have found multiple examples but they give me only vertical and horizontal gradients, while I want to specify the angle and strength too.

Can someone help me please?

P.S.: I know only a little about geometry!! :(

codingenious
  • 8,385
  • 12
  • 60
  • 90
Joseph86
  • 43
  • 1
  • 5
  • 1
    Please [edit] your question to show [what you have tried so far](http://whathaveyoutried.com). You should include a [mcve] of the code that you are having problems with, then we can try to help with the specific problem. You should also read [ask]. – Toby Speight Sep 29 '16 at 19:49
  • I'm not sure what you mean on "strength". The opacity of the whole gradient, i.e. the alpha? – plasmacel Sep 30 '16 at 00:35

1 Answers1

0

Your question is very wide and as is, this is a pretty complex exercise with a lot of code, including image rendering, image format handling, writing file to disk, etc. These are not the matter of a single function. Because of this, I focus on making an arbitrary linear color gradient of 2 colors.

Linear color gradient

You can create a linear color "gradient" by linear interpolation between 2 colors. However simple linear interpolation makes really harsh-looking transitions. For visually more appealing results I recommend to use some kind of S-shaped interpolation curve like the Hermite interpolation based smoothstep.

Linear color gradient

Regarding the angle, you can define a line segment by the start (p0) and end (p1) points of the color gradient. Let's call the distance between them d01, so d01 = distance(p0, p1). Then for each pixel point p of the image, you have to compute the closest point p2 on this segment. Here is an example how to do that. Then compute t = distance(p0, p2) / d01. This will be the lerp parameter t in the range [0, 1]. Interpolate between the 2 gradient color by this t and you got the color for the given point p.

This can be implemented multiple ways. You can use OpenGL to render the image, then read the pixel buffer back to the RAM. If you are not familiar with OpenGL or the rendering process, you can write a function which takes a point (the 2D coordinates of a pixel) and returns an RGB color - so you can compute all the pixels of the image. Finally you can write the image to disk using an image format, but that's an another story.


The following are example C++14 implementations of some functions mentioned above.

Simple linear interpolation:

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

, where a and b are the two values (colors in this case) you want to interpolate between, and t is the interpolation parameter in the range [0, 1] representing the transition between a and b.

Of course the above function requires a type T which supports multiplication by a scalar. You can simply use any 3D vector type for this purpose, since colors are actually coordinates in color space.

Distance between two 2D points:

#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 from https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

plasmacel
  • 8,183
  • 7
  • 53
  • 101