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:

Advertisements

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.