Skip to content
A tool for drawing animated GIF stick figures
C#
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Images
StickFigure
packages
.gitattributes
.gitignore
LICENSE
README.md
StickFigure.sln

README.md

StickFigure

StickFigure is a program for generating animated gif stick figures.

Basicly you drag circles to the drawing area, representing head, hands etc. and draw lines between them.

It is a windows program and uses Monogame and the full .NET framework as its foundation.

The controls are extremely simplistic, but easy to use.

It is not a very polished program but works and I am sure you will not be able generate animated GIF stick figures faster in any other program. Though you will probably be able to make them prettier in other programs :)

The Basic drawing experience

When you start the program you will be asked to choose a folder - this is where your current stick figure will be stored.

After that you get this screen with the drawing area.

Basic drawing area

The three black circles can be dragged (left mouse button down) to the drawing area (the big white area) to create body parts, the can also be dragged outside of the drawing area to delete them.

The red circle has the same function, but they will be invisible on the final animated gif and thus serve as joints.

You can draw lines between the circles with the right mouse button. The lines cannot be deleted except if you delete a circle in either end.

The following is a basic stick man drawn using the above techniques.

First Stick man

You can drag multiple circle joints by marking them with a rectangle (left mouse button and drag outside a circle) like this:

First Stick man moved

Animating the stick man

For creating your animated stick man GIF you have to use several controls.

The folder you chose first will contain all the frames - just json serialized description of the joint positions.

In the top left corner you can see the current frame. If you press S you will save whatever drawing is present in the current frame, so be careful.

Arrow key left/right will move between frames, but since there is only one frame to begin with nothing will happen at first. You need to press up/down to go to a new position, and press C to copy the current frame to that new frame position.

Lets say you copy frame 1 to frame 8, and move the content of frame 8 a bit (remember to save). Now you can press I to generate all the in-between frames 2-7.

In that way you can plan your animation. If you want the animation to end where it started you can mark the final frame as Last by pressing L. This basicly deletes the frame and marks it to be a copy of frame 1. So be careful.

When finished there is only the GIF generation left.

The generation is done in several steps because I had to use different technologies.

  1. First you toggle between each frame with the left/right arrow keys, and press P to generate a PNG and a JPG for each file. The PNG is generated by using a Monogame RenderTarget2D. The JPG is generated by converting the PNG to JPG by using the Image class from System.Drawing.
  2. After creating all needed JPGs the GIF is created by pressing G.

Currently the GIF will be created with a background color and foreground color set in the app.config, and with a fixed framerate of about 6 frames pr. second. This can be changed easily in the code, but I should probably make it configureable.

Here is a sample GIF with black background and white foreground of a man squatting. You can experiment with it by opening the sample folder when starting the program.

Squatting man

Quirks: Currently in this first draft there are several - one thing to be careful about is that when you move to a new frame with the arrow keys, the old frame is not saved, so you have to save whatever changes you have before you press an arrow key. The fact that you have to generate PNGS and JPGs before generating the GIF is also a bit weird.

You can’t perform that action at this time.