NOGDUS
January 16, 2018, 04:35:25 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
 
   Home   Blogs Help Search Tags Login Register  
Pages: [1]   Go Down
  Print  
Author Topic: Creating a Horizontal Gradient  (Read 4665 times)
0 Members and 1 Guest are viewing this topic.
Richard Marks
202192397
Administrator
Member
*

Respect: 3425
Offline Offline

Posts: 1027


happy


« on: January 16, 2010, 05:18:47 PM »

Creating a Horizontal Gradient

If you want to create a horizontal linear gradient between 2 colors, here is an easy way how.

Code:
void create_horizontal_linear_gradient(BITMAP* surface, int x, int y, int width, int height, int fromcolor, int tocolor)
{
float startcolor[] =
{
(float)getr(fromcolor),
(float)getg(fromcolor),
(float)getb(fromcolor)
};

float endcolor[] =
{
(float)getr(tocolor),
(float)getg(tocolor),
(float)getb(tocolor)
};

int w = x + width;

for (int row = 0; row < height; row++)
{
float life = (float)row / height;
float r = startcolor[0] + ((endcolor[0] - startcolor[0]) * life);
float g = startcolor[1] + ((endcolor[1] - startcolor[1]) * life);
float b = startcolor[2] + ((endcolor[2] - startcolor[2]) * life);

int color = makecol(r, g, b);

line(surface, x, y + row, w, y + row, color);
}
}

A way to use it is shown below.
The program creates a bitmap file that is 320x240 in size, containing the gradient.
In this case, a black to white (top to bottom) linear gradient.
Code:
#include <allegro.h>
int main(int args, char* argv[])
{
allegro_init();
set_color_depth(24);
set_gfx_mode(GFX_AUTODETECT_WINDOWED, 8, 8, 0, 0);
BITMAP* surface = create_bitmap(320, 240);
create_horizontal_linear_gradient(surface, 0, 0, 320, 240, makecol(0, 0, 0), makecol(252, 252, 252));
save_bitmap("lineargradient.bmp", surface, 0);
destroy_bitmap(surface);
return 0;
}
END_OF_MAIN();

Attached is a png of the test output.
Logged

Richard Marks
202192397
Administrator
Member
*

Respect: 3425
Offline Offline

Posts: 1027


happy


« Reply #1 on: January 16, 2010, 05:30:32 PM »

If you want to use 3 colors in your gradient, here is an additional function that calls the one above twice.

Code:
void create_horizontal_linear_gradient2(BITMAP* surface, int x, int y, int width, int height, int firstcolor, int midcolor, int lastcolor)
{
int halfheight = height / 2;
create_horizontal_linear_gradient(surface, x, y, width, halfheight, firstcolor, midcolor);
create_horizontal_linear_gradient(surface, x, halfheight, width, halfheight, midcolor, lastcolor);
}

And the test, and the output is attached in png form.
Code:
int main(int args, char* argv[])
{
allegro_init();
set_color_depth(24);
set_gfx_mode(GFX_AUTODETECT_WINDOWED, 8, 8, 0, 0);
BITMAP* surface = create_bitmap(320, 240);
create_horizontal_linear_gradient2(
surface,
0, 0, 320,
240,
makecol(0, 0, 0),
makecol(0,0, 128),
makecol(252, 252, 252)
);

save_bitmap("lineargradient2.bmp", surface, 0);
destroy_bitmap(surface);
return 0;
}
END_OF_MAIN();

Pretty neat huh?
Logged

Mattias Gustavsson
Member
*

Respect: 58
Offline Offline

Posts: 94



« Reply #2 on: January 17, 2010, 02:22:53 AM »

Nice stuff :-)

I came across this a while back: http://www.foddy.net/tools.html (and an online applet here)

It shows what you get when doing a gradient of three colors, but using a bezier curve through RGB space instead of linear interpolation - and it gives lovely smooth gradients. At some point, I'm hoping to incorporate that into Pixie - including dithering the gradients to make them even smoother :-)
Logged
Tags: Allegro code  
Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!