Learn about the way ships have communicated at sea for over a century, and still do. Learn how to create your own set of flags using a computer language called SVG. Then start sending your own messages from your bedroom window.

A printer isn’t necessary for this activity.

International maritime signal flags are flags used by ships to communicate. An individual flag can represent a letter or number but they can also be used to communicate an agreed standard phrase. For example the flag for the letter K (given the name ‘kilo’ in the phonetic alphabet) is also used to mean “I wish to communicate with you”.

It would take a long time to spell out a message letter by letter with individual flags and most ships won’t carry enough copies of each letter-flag to say what they want. Communication at sea is likely to involve the same phrases coming up again so it’s much easier for sailors to learn the phrases that each flag means.

For example you’d need the following flags just to spell out the really useful phrase “I AM ALTERING MY COURSE TO STARBOARD” …

• 3 letter As
• 1 x letter B
• 1 x C
• 1 x D
• 2 E flags
• One letter G
• Two letter ‘i’ flags
• One letter L
• 2 x M flags
• An N flag
• 3 x O flags
• 4 x R flags
• A couple of S flags
• 3 x Ts
• One U flag and
• One Y flag

…when you could just hoist one of the E (for echo) flags – so much quicker.

Of course this means that for effective communication everyone needs to know in advance what the code flags mean, and the rules for using them.

For some messages though you might still want to spell out the words. Here’s an incomplete message (the photographer didn’t capture all of the flags) but using the letters below can you work out what the full phrase says? There are two words and you need to start at the top of each string of flags. (Answer at the end)

Use these letters to crack the message in the photo above (click here if you can’t see it).

---

Activity – how well can you communicate what a flag looks like?

Visit Wikipedia’s page on International Maritime Signal Flags, pick a flag and describe what it looks like to someone else in words. Is your description good enough for them to draw it exactly right? Try it!

If you use a precise enough language for describing images that you both agree on (just like the flags themselves are a precise language ships from all over the world agree on), you can communicate a flag exactly every time. Here is one way. That is create a grid with 10 columns and 8 rows and first draw your flag on it. Work out where the vertices (corners) of each coloured shape are and write this information down in the form of instructions. Give someone a blank grid and your instructions and see if they can recreate the flag from your information now.

---

Make your own signal flags on a computer

The way we just used to communicate pictures by communicating the shapes as a series of points is one of the ways that computers send pictures over the Internet. It is how I can be sure the picture I see in a browser looks exactly like the one you see. One language computers use for describing images exactly is called SVG (Scalable Vector Graphics). You can create your own SVG pictures just by writing instructions in a text editor.

You can use a simple text editor (notepad.exe on Windows or TextEdit on Macs) to create or edit SVG programs in .svg files and so make your own signal flags. SVG images can be created with the same kind of dot-to-dot instructions we used above: you tell the program where to start drawing a shape and all the points it will pass through, as well as what the colour should be. If you’d like to learn more about vector graphics files see our main page about Vector Dot-to-Dot puzzles.

If you open a .svg file in a web browser it will display it as an image. If you open it in notepad or TextEdit you can instead see the code that creates it. It is that code that is used to store the image and send it from one computer to another.

Save this file (right click, save as) to your computer. If you open it in a browser, you’ll see the flag that means the letter A.

If instead you open it in notepad.exe (Windows) or TextEdit (Macs) you’ll see the code that creates the picture, shown in grey below.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<rect x="0" y="0" width="10" height="8" fill="lightgrey" />

    <polygon fill='white' points='1,1,5,1,5,7,1,7' />
    <polygon fill='blue'  points='5,1,9,1,7,4,9,7,5,7'                 />

</svg>

The list of numbers in the middle are the most important part: “points=’1,1,5,1,5,7,1,7′”  means draw a series of lines from (1,1) to (5,1) to (5,7) to (1,7) and back to (1,1) to make a polygon (ie a multi-sided shape). The colour, white, given in the same polygon instruction says to fill the shape you have made in white. The shapes are drawn and coloured in the order given in the instructions, so one shape can cover up parts of an earlier one.

Can you work out where the vertices (corners) of the blue shape are from the instruction on the next line in this SVG program? Look at the points in the picture of the blue and white flag below and compare the points in the instructions to it to see.

---

Making one flag from another

A common way to code is to take an existing program that does something close to what you want, and edit it for a new purpose.

Below is what the letter B flag looks like.

The shape is identical to the letter A flag but with a single colour. You could create the B flag by keeping the points exactly the same as in the A flag but just changing both ‘white’ and ‘blue’ to ‘red’. A better way, though, is to shorten the instructions by removing the bits that aren’t needed, turning it into one shape instead of two.

Both flags start at point (1,1). The point on the right of the flag is at (9,1) in both and you don’t need the point at (5,1) , for example, in the red flag.

Here are the two flags, A and B, side by side with a grid showing the points that are the same as black dots – the ones shown in pink in the A flag at (5,1) and (5,7) could be removed for flag B.

---

Activity – how well can you communicate a flag (again)?

If you use a language like SVG you can communicate every flag exactly. Do this on a computer. For each new flag copy the grey text above into a new file you are editing in notepad.exe (Windows) or TextEdit (Macs). Keep the first two lines as they are (they describe the size and shape of the grey box that acts as the background) and keep the very last line (” < / svg > “) as that ends the program but change the information in the “polygon” lines – change the colour(s) and the position of the points.

With this dot-to-dot system it’s a little harder to draw a neat circle (see the flag for letter ‘i’ for India) though you could use a lozenge shape instead. Have a look at our page on Vector Dot-to-Dot Puzzles: Shields for some pointers on creating lozenges. Alternatively, if you find out more about SVG you will discover it includes a special command just for drawing perfect circles.

Having created each flag you can view them in a web browser. If you do have a printer, then print each page from the browser to give you physical copies of each flag. Then you can start sending messages from your bedroom window by holding up the paper flags or your computer screen…(though what you would mean by “I am altering my course to starboard” when in a house is anyone’s guess, so perhaps you should invent your own code to use).

Show us your creations!
Let us know on @cs4fn (on Twitter)

US Navy: Sailor (Quincey E. Bryant) prepares signal flags for at-sea operations

Picture credits: the picture at the top of the page is by Kasya from Pixabay, the image of the signal flags against a blue sky is by Barney Moss from Flickr, and the picture of the sailor preparing signal flags comes from the United States Navy, published on Wikipedia.

What the ship’s flags said (read this upside down, as if you’re hanging from the ship’s rigging!)
pɹɐoqɐ ǝɯoɔןǝʍ

---

More on vector graphics

---