Graphics


This is a follow up on my three part article, “Drawing a good diagram of a football field“. After trying for some time to automate arrow drawing, I’ve come to the conclusion that using GIMP, an arrow drawing plug-in, and GIMP’s path tool (a way to draw both straight lines and curves) are adequate to handle this problem.

Needed:

1. Diagram Drawing Tools (see my three part series here, here, and here).
2. A copy of GIMP. It’s free and available on Windows, Mac, and Linux.
3. Some experience with layers on GIMP. Start by searching “How to use layers in GIMP”. There are some nice Youtube videos that can get you started here.
4. This article is also really good: “How to Draw Arrows in Gimp”. Get the arrow plugin, install it, and read the instructions.
5. Look further at GIMP pathing with the search: “using path tool in gimp”.
6. For dashed and dotted lines, search using this phrase: “dashed lines in gimp”.

Some notes about drawing diagrams. If you’re using Windows shell to draw, then you’ll have no issues with Image::Magick. If you want to use the Perl interface to draw, then switch to Graphics::Magick, a fork of Image::Magick. Image::Magick has bugs when used with Perl.

When drawing arrows on a 640×480 diagram scaled in the way I’ve been scaling them, a length of wings setting of 15 and a brush width of 2 works well. This can be paired with path lengths of 5.0 pixels and will do nicely.

Tampa under front, Tampa 2 zone defense. Modeled on the diagram in Matt Bowen's Tampa 2 article.

Tampa under front, Tampa 2 zone defense. Modeled on the diagram in Matt Bowen’s Tampa 2 article.

Tom Landry's 4-3 Inside, showing a 1960s era strong side rotating zone. SAM and   left cornerback jam before falling into zone.

Tom Landry’s 4-3 Inside, showing a 1960s era strong side rotating zone, an early Cover 3. SAM and left cornerback jam before falling into zone.

Drawing a zone drop.

Load your diagram. Add a new transparent layer. Make sure you’re drawing on the transparent layer. Use the rectangle select tool (letter “R”). Choose a region to highlight as a zone. At this point select the bucket fill tool (shift B) and then select the color for the bucket fill. Use a foreground fill and set the opacity to about 50%. If your field is light green, use a dark green to fill the zone.

If you have more than one zone to add, add them all now.

Once complete, select all (important) and add another layer. On this new layer, add a path from the middle of the zone to the player. Select Tools -> Arrow (you added the arrow plugin, didn’t you?). Adjust arrow length of wings and brush width and draw the arrow. Repeat as needed.

If the path isn’t straight or you need a bar to create a “jam”, just use the path tool as needed.

If you want to add text or label the diagram, I’d suggest adding another transparent layer and putting the text above the main, zones, and arrows.

Once done, save the file as a GIMP native file and then again as a JPEG file. The second save will cause an export, crunching all the layers down to one image.

Miami 43, shade front, man plus cover 1 by the free safety.

Miami 43, shade front, man plus cover 1 by the free safety.

Drawing man to man coverage

The trick here is to use the path tool to make a stippled (dotted) image. Choose a path from the defender to the player to be defended. When you choose stroke path, choose a line type (there are many). I like the stippled pattern, as it’s unlikely to be mistaken for a solid line.

This is the  third of a series on drawing football diagrams, and this time we’ll be talking about drawing the defensive side of the ball. For now, we’re going to have the offense going “up” the image and the defense going “down” the image. It’s easy enough to invert. Draw the offense the way we show in Part 2, rotate the result by 180 degrees, and then add your defensive players. In the old days, the defense was indicated with triangles. Most football bloggers, however, like to use fonts with names on them for the defense. The problem with fonts is that fonts are often tied to an operating system, so using them well requires some familiarity with font families. A good introduction to font families is here. And to note, Helvetica is installed as part of Image Magick, so if you want a no nonsense solution that should just work, set your font to “Helvetica-Bold”.

Since we are using Image Magick to generate our graphics, we can add color at will to our diagrams, and so one convention we’re going to follow for now is to use shape and color to distinguish offense from defense. offenses will be in white, defenses in yellow. Other conventions we could use are:

  • Using different shapes for linemen, linebackers, and defensive backs.
  • Tilting the defensive symbol to indicate a slanted lineman.
  • Shading the offensive lineman to indicate a shaded orientation on the  part of the defensive player.

For now, we’re going to use this image as the basis for our defenses. We’ve spoken about the Desert Swarm, a kind of double eagle defense, here.

Arizona versus Washington, 1992. I formation versus Desert Swarm. Whip (flex tackle) on TE side of formation..

And these are our attempts to duplicate that photograph. Obviously one corner and the free safety position are a product of speculation.

Defense in yellow, using symbols. Slant lineman denoted by tilt of triangles.

This graphic is a text based representation of the defense.

Helvetica-Bold is the font used here.

The images as displayed above are about 3/4 their actual size, so double click on them to see a full sized image (unless you’re using Chrome, in which case you’ll get a huge image).

Font notes:

To list the fonts that Image Magick can use by name, use the command (Win32/64 cmd window or Unix shell):

convert -list font | more

fonts that are not listed here can be accessed by direct path to the font file itself. In Ubuntu/Linux, the Fontmatrix utility can be a big help in seeing which fonts are good and determining the font path.

In this article, the example code is going to be given in Perl, using the Image::Magick module.

Code samples:

Previous parts of this article:

In the first part of this series, we talked about creating football fields, and provided code that would create fields whose hash marks were at high school width, college width, and pro field width. We provided the code as a Windows Batch file that used the command line tool Image Magick to do the actual graphics manipulation. In this part, we’ll talk about taking a field and drawing offenses onto the canvas.

Most offensive players are drawn by using circles (and was done so even in the days of Dana Bible). Since the fields we have drawn are colored a light green, for contrast we’ll want the circles filled in white and with black as the paint color. There may be other circles you might want drawn, ones shaded on one side with black, and perhaps you want the offense going down the field instead of up. We’re not going to worry about orientation finesses, as you can use any number of graphics tools to flip and rotate the image however you want. But we will talk about ways to make other kinds of images.

Defensive code setups, to some extent, are going to be OS specific. That’s because people like to use fonts, and the fonts on Windows aren’t entirely mirrored by the fonts in MacOS or Linux.

We’re also going to start introducing some Perl into the mix of code we show. This is because Perl’s ability to create functions and subroutines will actually simplify the task of creating a graphics code library, for those skilled enough to use the approach.

(more…)

My recent explorations with the program Image Magick has left me thinking: since Image Magick is intended to be used in web sites, where people mass produce images (Image Magick can, for example, take a whole folder full of photos and generate thumbnail images), could I use Image Magick to create the outlines of football fields, complete with yardage lines and hash marks? And the answer so far is yes. Dimensions for football fields can be found here, on SportsKnowHow.com. The question then is translating those measurements into the dimensions of a regular screen size, such as 640 by 480 or 800 by 600. Please note that the American field is always 160 feet wide, so images whose width is divisible by 160 are desirable.

As an example of what can be done, I’ll show this image of a 46 defense versus a pro style offense on a pro style football field. Note that the image is displayed half of full size. Double click on the image to display full size.

46 defense from a 34 base, versus a pro style offense, pro hash marks.

All the diagram components have been placed with a set of three programs. The first generates three fields, one of pro, one of college and one of high school dimensions. The second places the offense on the field. The third handles the annotations of the defense.

A piece of the football field creation batch file.

A html-ised version of the batch file above is available here. Just cut and paste into a batch file on your local computer and correct variables as directed in the header.

So far I’m not using anything sophisticated to make these images, just batch files. I’m using batch because once I clean these up, I want to make them available to the Deuces and Coach Hoovers of this world for free. And to the high school coach who only has a Windows laptop or desktop, a batch file is the appropriate tool for automating something like this.

Remaining issues: are the hash marks given in the links above at the beginning of the distance from the sideline, at the middle of the distance from the sideline, or at the end of the distance from the sideline? I know it’s at most a 2 foot error, but I’d like to know. Likewise, does anyone know the best font for the numbers one might write on a football field? They’re 6 feet fall, 4 feet wide, and placed so the tip of the number is 9 feet deep into the field. Numbers aren’t essential at this point, just an aesthetic trick.

Update: It’s clear that in pro ball, there are vertical as well as horizontal hashmarks, and the horizontal ones are outside the vertical ones.

Follow

Get every new post delivered to your Inbox.

Join 244 other followers