Click here to Skip to main content
15,867,704 members
Articles / Programming Languages / C#

Circular Morph 2D Images using a Simple Class

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
12 Apr 2020CPOL3 min read 6.3K   176   5   2
A simple way to morph square 2D into circular banners
This article discusses the classBannerBender which is used to curve-morph bitmap images. The class requires only an input image and an output radius to produce a circular banner of the original square image source.

Image 1

Image 2

Image 3

Image 4

classBannerBender

The source code provided above includes an App which makes use of the classBannerBender and demonstrates some of the possibilities. This video on YouTube will demonstrate how to use the app.

The class stands alone and needs only to be included into your project to work. There are several Public Static functions in the class but the only significant one is the BendBar() function which has only one override. The simplest call to BendBar() requires only a source image and the radius around which that image is to be drawn. This will produce the smallest bitmap that contains the output image on a white background.

C#
//
public static void BendBar(Bitmap bmpBar, 
                           int intRadius_Inner)
{
    int intWidth = (intRadius_Inner + bmpBar.Height + 1) * 2;
    Bitmap bmpBackground = new Bitmap(intWidth, intWidth);
    using (Graphics g = Graphics.FromImage(bmpBackground))
        g.FillRectangle(Brushes.White, 
                        new RectangleF(0, 
                                       0, 
                                       bmpBackground.Width, 
                                       bmpBackground.Height));

    Init(bmpBar, bmpBackground, intRadius_Inner, 0, 360, false, Color.White);
}

The more complete call to BendBar() gives the designer the ability to provide a background image on which to draw the circular banner, angle sweep control, and the option of specifying what color in the source image is to be transparent (not drawn onto the background image).

C#
public static void BendBar(Bitmap bmpBar, 
                           Bitmap bmpBackground, 
                           int InnerRadius, 
                           int Degrees_Start, 
                           int Degrees_Sweep, 
                           bool bolMakeTransparent, 
                           Color clrTransparentColor)
{
    Init(bmpBar, 
         bmpBackground, 
         InnerRadius, 
         Degrees_Start, 
         Degrees_Sweep, 
         bolMakeTransparent, 
         clrTransparentColor);
}
//

How the Code Works

The function BendBar() first generates an outline of the output image onto a plain bitmap. It then uses a Breadth-First-Search(BFS) algorithm to trace along the two concentric circles and records the points on that line into a 2D array of boolean type. Once this is done, it then proceeds with a 2nd BFS to locate all the pixels contained between the concentric rings. The difference between the two search-algorithms is that the first one traces alone pixels on a bitmap stretching outwards in 8 directions to follow along a 1 pixel width line while the second search algorithm proceeds much more quickly along the boolean array (rather than testing a bitmap's pixel content) in four directions to locate which pixels on the output bitmap need to be painted.

For each pixel the algorithm finds between the concentric rings, it sets the boolean variable located in the 2D boolean array to the same true value that the first BFS did for the trace lines preventing it from seeing that pixel a second time. Then, it uses the pixel's radial-coordinate relative to the center of the image to map out which pixel of the source image needs to be sampled in order to set the output pixel to the appropriate color. To do this, the radial coordinate's radians value is compared with the start angle parameter. The difference between them is then used to determine the number of pixels it has travelled radially around the output image's inner circumference. This value is then reduced to an integer between 0 and the width of the input source bitmap with a modulo operation. The result of which points to the row of the bitmap to be sampled and corresponds to the X value of that point. To determine the Y coordinate of the sample-pixel it then compares the radial coordinate's magnitude to the output bitmap's inner-radius. The difference between them corresponds to the Y value of the pixel to be sampled in the source bitmap.

Image 5

In this way, the inner edge of the output image simply repeats the bottom edge of the source image pixel-for-pixel all around its inner circumference. The pixels that are located further outwards sample pixels that are higher up in the source bitmap and all pixels that the BFS finds needing to be filled are filled using the same algorithm creating a morphed image that is wider around the outer perimeter yet still retains the original image's appearance.

Pixels that are set to a transparent color are not processed once they are found by the 2nd BFS.

Possibilities

  • This algorithm can be readily expanded to include an ellipse. A more ambitious project would be to generate a spiralling effect by stepping around the spiral's inner perimeter one pixel at a time, finding the outer perimeter's point location and mapping the triangular area between these two points and the previous step's outer location and then coloring in that area using the same color-sampling algorithm used above.
  • A linear transform to match the output image's banner width to the source image's height can add the possibility of varying the width of the output banner.

History

  • 12th April, 2020: First published

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
CEO unemployable
Canada Canada
Christ Kennedy grew up in the suburbs of Montreal and is a bilingual Quebecois with a bachelor’s degree in computer engineering from McGill University. He is unemployable and currently living in Moncton, N.B. writing his next novel.

Comments and Discussions

 
Questionfar out, man Pin
BillWoodruff12-Apr-20 21:00
professionalBillWoodruff12-Apr-20 21:00 
AnswerRe: far out, man Pin
Christ Kennedy13-Apr-20 0:06
mvaChrist Kennedy13-Apr-20 0:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.