Click here to Skip to main content
Click here to Skip to main content

2D Poligon Drawer-Animator

, 1 Aug 2004 CPOL
Rate this:
Please Sign up or sign in to vote.
Draw poligons, manipulate them, and animate them.

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

License

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

Share

About the Author

andrea contoli
Software Developer
Italy Italy
No Biography provided

Comments and Discussions

 
GeneralNice Article PinmemberAnand Ranjan Pandey5-Feb-09 22:50 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 2 Aug 2004
Article Copyright 2004 by andrea contoli
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid