Click Drive above to start creating!

TileDrive is a drawing tool that builds patterns out of tiles. The tiles are regular polygons, which means every side is the same length and every angle is the same. For example, a four-sided tile with equal sides isn't just a rhombus — because its angles are equal too, it's a square. In general, these regular polygons have a pleasingly symmetric, balanced look, like bumpy wheels.

Connecting tiles feels like driving along a path of stepping stones. To build a sequence, simply pick the type of tile you want to add. At each tile you can change direction by turning right (clockwise by one side) or left (counter-clockwise by one side). For instance, a wiggly snake of squares is easy to make: click the square button, then make a few right and left clicks (circled in red on the controls pictured to the left).

There's also a painting way to drive. You can "paint" new tiles from existing ones: click or touch a tile and drag outward across the edge you want to connect to. Keep dragging until the desired tile appears; when you release, the new tile joins the pattern, keeping the colour of the original. Just click a new colour to change it.

To make creating and sharing patterns even easier, TileDrive has a shorthand language, described below.

1. Tile shorthand (instructions)
   • tiles: 3 4 5 6 7 8 for triangle, square, pentagon, heptagon (7gon), and octagon
   • colors: r y b o g p l i t for red, yellow, blue, orange, green, purple, olive, pink, and transparent
   • turning: < > for left-turn and right-turn

   In shorthand, a snake made of squares can be written like 44>444 >444 <4. You can also use "." and "," in place of ">" and "<" for turning, saving you from the SHIFT key.

   To see this in action, click send below to send the code over to the Drive screen.

   • A square snake
     send 44.444.444,4
   • A pentagon snake
     send 55.5,55,,55
   • An elaborate green snake with a red tongue
     send 5g.45,5,5,,5.47.3r,3
2. Branching out from a path makes cool patterns. To branch, click on any existing tile and start a new path. You'll see curly brackets, { }, in the shorthand, but all you really need to remember is to click on the pattern.
   • branching square paths
     send 4y4{4b4}{,4r4.44}.44,44
   • a pointy star
     send 5o{,4y3r}{.4y3r}{..4y3r}{,,4y3r}4y3r
3. There are two ways to save your patterns:
   • Clicking the "!" takes you to a printing- and sharing-friendly version of your pattern. Clicking it again toggles between a coloured version and an outlined version.
   • Clicking any of the ten "x"-banks saves your pattern. To retrieve a save, click the mini image above its "x"-bank button. Be careful: this adds your saved pattern to whatever is currently on screen (* this will be useful later!). To erase the screen first, click "c" to clear before adding a saved version.
4. The Gallery holds a set of example patterns
   • Use the "-" and "n" buttons to browse through the patterns.
   • The "h" button places the current gallery pattern on top of your pattern, making it easy to see how the two differ.
5. Viewing options
   • The "~" button toggles softer colours.
   • The "^" button toggles tile arrows, which show the direction each tile was drawn.
   • Use the left slider to scale the pattern, letting you build bigger patterns.
6. Animation
   • The "@" button animates the pattern by walking through the tiles on screen.
   • Use the "#" and "$" buttons to step through the animation.
   • Use the right slider to jump to any point in the animation.
7. Stuck? Bored? Click send below, then click one of the miniature patterns above xa–xg.
   send q5y5b,xa 4o6b,xb 4o6b.xc 3g3,5lxd 5,5.xe {4o446b},xf 4o6b.4o6b.4o6b.4o6b.4o6b.4o6b..xg

Use a keyboard to speed up your Driving and to learn the shorthand.