2D Poligon Drawer-Animator

Sample Image - 2D_Poligon_Drawer-Animato.jpg

Introduction

I started thinking of the way to build a 2D polygon animator. First of all, I needed a good stuff to memorize my graphics. This article is based on the way I can memorize some 2D graphics. I choose a non bitmap way. This is because, I want a fast and simple way to animate my graphics. So, I choose a 2D vectorial approach. In this article, I propose the (simple) structures I chose to represent my graphics and to animate it. I propose also a graphic editor to generate 2D graphics, and a tool to create animation from the graphics tool. The proposed exe and the source is in the provided download.

The idea

In a bitmap, we have a set of pixels (each of them refer to a palette color) that defines an image. In my approach, I define an image as a set of "polygons". Each polygon is composed by a set of points, (like the polygons of the Graphics class). Each polygon has also a "center color", a "color", and a "center point" from which diffuses the brush color gradient. Here are the classes used:

Sample screenshot

Using the code

Remember that GrpLst contains a list of references to GrpObj, and GrpObj contains a list of references to Point. Following snippet shows how to use the classes:

// create a List of poligons
ExtGrpLst g_l = new ExtGrpLst();

// to create a Poligon
pubO = new GrpObj();
pubO.color =  button4.BackColor;
pubO.centerColor = button1.BackColor;
// add a poligon to the list
g_l.addObj(pubO);
// I can add new point to the poligon like this (I'm plaing with references)
pubO.addPoint(new Point(e.X,e.Y);
// or like this (to add a point to the last poligon of the list)
g_l.addPoint(appo);

To render the scene, we transform the ExtGrpLst into a GraphicsPath.

foreach (GrpObj r in g_l.list)
   {
    PointF[] appo = new PointF[r.pointList.Count];
    int i = 0;
    foreach (PointF p in r.pointList)
    {
      appo[i] = p;
      i++;
    }
    GraphicsPath gr_pth = new GraphicsPath();
    gr_pthGlb.AddPolygon(appo);
    gr_pth.AddPolygon(appo);
    if (filled) // draw only lines or filled poligon
    {
       GraphicsPath g_p = new GraphicsPath();
       g_p.AddPolygon(appo);
       PathGradientBrush pgbrush= new PathGradientBrush(g_p);
       pgbrush.CenterPoint=r.centerPoint;
       pgbrush.CenterColor=r.centerColor;
       pgbrush.SurroundColors=new Color[] { r.color };
       offScreenDC.FillPolygon(pgbrush, appo);
       g_p.Dispose();
    }
       Pen pen = new Pen(r.color, 1);
       offScreenDC.DrawPath(pen,gr_pth);
       gr_pth.Dispose();
   }

See the canvas.redraw() method.

Using the tool

First of all, activate a canvas with Frame->New. Then you can draw what you want and try all the functions. You can activate Animation-->New. The canvas is the same as the Frame, with the possibility to store frames and recolor them. Click on Animate to start your animation. If you load (Animation-->Load) the file codeP_anim2.anim, you can test it by clicking "Animate".

Sample screenshot

FAQ

To close a polygon while drawing, click on the first node (point) from which you started.

In this version of the tool, you cannot draw lines and ellipses.

Notes

I didn't write a help file for the tool, maybe in the future. I'll be glad to help/explain any problem. If any good designer/animator will create something cool with that tool, I'll be glad to see his work.

Update 26/07/2004

Added the following features. Add/remove points to selected poligon. X and Y mirroring of selected poligons. Undo function. Save scene as JPG/BMP. Load a background image. Some bugs cleared.

Update Sample screenshot