Gradient circles

Gradient circles

Kikaru

Member #7,616

August 2006

I am working on a project that would be greatly enhanced by a gradient circle effect. Something like:

void grad_circle(BITMAP *bmp, int x, int y, int rad, int col1, int col2)

Gradation would go from center to edges, a filled circle.

Can anyone recommend either a pre-made function or a way to write a very fast, effective one? I am using plain Allegro, and it's kinda late to change libraries.

It needs to be very fast, ideally.

Thanks in advance.

SiegeLord

Member #7,827

October 2006

Here's a little thing I hacked from allegro's do_circle routine... It is far from perfect (it has a lot of overdraw - about 28%) but it manages not to use any square roots (since in effect we are just calling allegro's do_circle routine a bunch of times). (note that it is incomplete, I did not put the actual color blending function since you did not specify whether you wanted this to be palette based or not).

void grad_circle(BITMAP *bmp, int x, int y, int rad, int col1, int col2)
{
    for(int ii = 0; ii < rad; ii++)
    {
        int color = color_blend(ii, rad, col1, col2);//provide your own blending function here
        gapless_do_circle(screen, 200, 200, ii, color, putpixel);
    }
}

And here is the actual worker function. I do not understand yet how allegro's do_cirle works, so this hack is sort of primitive. As such it is both ugly and it has a lot of overdraw (as I said above).

1void gapless_do_circle(BITMAP *bmp, int x, int y, int radius, int d, void (*proc)(BITMAP *, int, int, int))
2{
  int cx = 0;
  int cy = radius;
  int df = 1 - radius;
  int d_e = 3;
  int d_se = -2 * radius + 5;
8 
  bool needed = false;
  
  bool fix_diag = false;
12 
  do
  {
      if(!fix_diag)
      {
          proc(bmp, x + cx, y + cy, d);
18 
          if (cx)
              proc(bmp, x - cx, y + cy, d);
21 
          if (cy)
              proc(bmp, x + cx, y - cy, d);
24 
          if ((cx) && (cy))
              proc(bmp, x - cx, y - cy, d);
27 
          if (cx != cy)
          {
              proc(bmp, x + cy, y + cx, d);
31 
              if (cx)
                  proc(bmp, x + cy, y - cx, d);
34 
              if (cy)
                  proc(bmp, x - cy, y + cx, d);
37 
              if (cx && cy)
                  proc(bmp, x - cy, y - cx, d);
          }
      }
42 
      if(needed)
      {
          proc(bmp, x + cx - 1, y + cy, d);
          
          if (cx)
              proc(bmp, x - cx + 1, y + cy, d);
49 
          if (cy)
              proc(bmp, x + cx - 1, y - cy, d);
52 
          if ((cx) && (cy))
              proc(bmp, x - cx + 1, y - cy, d);
55 
          if (cx != cy)
          {
              proc(bmp, x + cy, y + cx - 1, d);
59 
              if (cx)
                  proc(bmp, x + cy, y - cx + 1, d);
62 
              if (cy)
                  proc(bmp, x - cy, y + cx - 1, d);
65 
              if (cx && cy)
                  proc(bmp, x - cy, y - cx + 1, d);
          }
      }
70 
      if (df < 0)
      {
          df += d_e;
          d_e += 2;
          d_se += 2;
          needed = false;
      }
      else
      {
          df += d_se;
          d_e += 2;
          d_se += 4;
          cy--;
          needed = true;
      }
      cx++;
      if(!(cx <= cy))
          fix_diag = true;
  }
  while (cx <= cy + 2);
91}

Don't ask me how it works. :-[

"For in much wisdom is much grief: and he that increases knowledge increases sorrow."-Ecclesiastes 1:18
[SiegeLord's Abode][Codes]:[DAllegro5]:[RustAllegro]

Edgar Reynaldo

Major Reynaldo

May 2007

I came up with another way. It doesn't draw quite as far out as allegro's circle function , but it's always within one pixel of it. Not sure where the difference is.

Basically , the function traverses the y-values of the circle and the x-values of the horizontal chord of the circle at that y-value and draws a pixel with the color scaled from the inner color to the outer color according to the distance/radius factor.

Here's the function code and a short example that draws a gradient circle using purple and yellow.

1 
2#include <allegro.h>
3 
4#include <cmath>
5 
6void gradient_circle(BITMAP *bmp, int cx, int cy, int rad, int outer_color, int inner_color) {
int rel_xpos = 0;
int rel_ypos = 0;
int hxcl = 0;//half of horizontal chord length;
10 
int abs_ypos_top = 0;
int abs_ypos_bottom = 0;
int abs_xpos_left = 0;
int abs_xpos_right = 0;

int oc_red = getr(outer_color);
int oc_green = getg(outer_color);
int oc_blue = getb(outer_color);
int ic_red = getr(inner_color);
int ic_green = getg(inner_color);
int ic_blue = getb(inner_color);

int gc_red = 0;
int gc_green = 0;
int gc_blue = 0;
int gradient_color = 0;

double oc_to_ic_red_diff = static_cast<double>(oc_red - ic_red);
double oc_to_ic_green_diff = static_cast<double>(oc_green - ic_green);
double oc_to_ic_blue_diff = static_cast<double>(oc_blue - ic_blue);

double d_radius = static_cast<double>(rad);
double d_radial_distance = 0.0;
double d_gradient_factor = 0.0;

for (rel_ypos = 0 ; rel_ypos <= rad ; rel_ypos++) {
  abs_ypos_top = cy - rel_ypos;
  abs_ypos_bottom = cy + rel_ypos;
  hxcl = static_cast<int>(sqrt(static_cast<double>(rad*rad - rel_ypos*rel_ypos)) + 0.5);// Use this for a rounding method for the x position at the edge of the circle
40//    hxcl = static_cast<int>(sqrt(static_cast<double>(rad*rad - rel_ypos*rel_ypos)));
  for (rel_xpos = 0 ; rel_xpos <= hxcl ; rel_xpos++) {
    abs_xpos_left = cx - rel_xpos;
    abs_xpos_right = cx + rel_xpos;
    d_radial_distance = sqrt(static_cast<double>(rel_xpos*rel_xpos + rel_ypos*rel_ypos));
    d_gradient_factor = d_radial_distance / d_radius;
    gc_red = ic_red + static_cast<int>(d_gradient_factor*oc_to_ic_red_diff);
    gc_green = ic_green + static_cast<int>(d_gradient_factor*oc_to_ic_green_diff);
    gc_blue = ic_blue + static_cast<int>(d_gradient_factor*oc_to_ic_blue_diff);
    gradient_color = makecol(gc_red , gc_green , gc_blue);
    putpixel(bmp , abs_xpos_left , abs_ypos_top , gradient_color);
    putpixel(bmp , abs_xpos_left , abs_ypos_bottom , gradient_color);
    putpixel(bmp , abs_xpos_right , abs_ypos_top , gradient_color);
    putpixel(bmp , abs_xpos_right , abs_ypos_bottom , gradient_color);
  }
}
56}
57 
58 
59 
60int main(int argc , char** argv) {
61 
62 
if (allegro_init() != 0) {return 0;}
if (install_keyboard() != 0) {return 0;}

int dcd = desktop_color_depth();
if (dcd != 0) {
  set_color_depth(dcd);
} else {
  set_color_depth(32);
}
int dw = 0;
int dh = 0;
if (get_desktop_resolution(&dw , &dh) != 0) {
  dw = 800;
  dh = 600;
}
if (set_gfx_mode(GFX_AUTODETECT_FULLSCREEN , dw , dh , 0 , 0) != 0) {return 0;}

BITMAP* buf = create_bitmap(dw , dh);
if (!buf) {return 0;}

clear_to_color(buf , makecol(0,0,0));

int circ_rad = (dw + dh)/16;
int outer_color = makecol(255,255,0);
int inner_color = makecol(255,0,255);


circle(buf , dw/2 , dh/2 , circ_rad , makecol(255,255,255));
gradient_circle(buf , dw/2 , dh/2 , circ_rad , outer_color , inner_color);

blit(buf , screen , 0 , 0 , 0 , 0 , SCREEN_W , SCREEN_H);

clear_keybuf();
readkey();
97 
return 0;
99}
100END_OF_MAIN()

What it produces (image scaled down 50%) :
http://www.allegro.cc/files/attachment/594368

You can see there are a few white pixels near the edges , those are an allegro circle drawn underneath with the same radius as the one passed to the function.

Eagle and Allegro 5 binaries | Older Allegro 4 and 5 binaries | Allegro 5 compile guide
King Piccolo will make it so Then I could just flip it with some sweet, sweet matrix math. In either case, I’ll ride this wagon until the wheels fall off. Thanks to those that keep it running

Kikaru

Member #7,616

August 2006

I will be drawing some of these circles with radii of 1500+, so it needs to be pretty darn fast, and accuracy doesn't matter quite so much. Basically, the fewer doubles, floats, sqrt()s, and sin()/cos()s the better. I will look into these later, as I don't have a compiler right now.

The color is either 32 or 16 bit, so no palletes.

The second function looks nice, but it shows up really weird on my computor.

Arthur Kalliokoski

Second in Command

February 2005

I've tried stuff like this, and always got untouched pixels within the filled circle???

They all watch too much MSNBC... they get ideas.

Kikaru

Member #7,616

August 2006

Ok, Edgar's circle works, but if I try to copy and paste the function, it looks really weird. Still figuring it out.

Thanks for the input!

[EDIT] it was defaulting to 8-bit color mode.

Fladimir da Gorf

Member #1,565

October 2001

You'll get a huge performance increase if you can ensure that pixels outside of the screen won't be filled in the routine and replacing putpixel with a _putpixelXX.

OpenLayer has reached a random SVN version number ;) | Online manual | Installation video!| MSVC projects now possible with cmake | Now alvailable as a Dev-C++ Devpack! (Thanks to Kotori)

Thomas Harte

Member #33

April 2000

Quote:

I think the fastest method would be to prefill a texture with a scaled version of the fill, then circle with drawing_mode set to DRAW_MODE_COPY_PATTERN. So predraw a circle with at least 256 colour steps in it, using sqrt, sin, cos, whatever. The draw it to an offscreen BITMAP as though you were using stretch_blit instead of circlefill. So if you drew it to the screen you'd get something a lot like the circle you want, but with a jaggedy edge.

The trick is that instead of drawing it to the screen, just set the BITMAP you drew to as the fill pattern and then use circlefill. So you get the outline calculated in the normal way and the fill taken from your scaled BITMAP.

[My site] [Tetrominoes]

Kikaru

Member #7,616

August 2006

Well, I changed stuff around a bit, so speed doesn't matter so much anymore.

Thanks for the functions!

Edgar Reynaldo

Major Reynaldo

May 2007

No problem , it was fun and now I have a gradient circle function to add to my collection of useful code. It may be possible to make it even faster. Right now it's drawn using 4 mirror images but that could be doubled to 8 mirror images by splitting the quarter into an eighth and flipping rel_xpos and rel_ypos to give four more draws per pixel calculation. Maybe I'll mess around with it some more later.