Myth Engine: Picture Puzzle
Learn Cocktail Shaker Sort by Building a Picture-Sorting Game, Step by Step
Welcome
This is Picture Puzzle. Play it first. Every piece of it, you’ll make yourself.
Click the game, then press Sort.
A village by a lake, cut into 64 pieces and dealt into the wrong places. These are your hands on it:
- Drag one piece onto another, or tap two pieces, and they trade places. Keys 1 to 9 choose pieces too, and so do the arrow keys with Enter.
- Step, or Space, makes one comparison of the computer’s sort.
- Sort, or A, makes the comparisons on its own. It reads Pause while it runs.
- Slow, Steady and Fast set its pace, and 9, 25 and 64 set how many pieces there are.
- Village, Forest and Harbor choose the picture, or Upload uses one of your own.
- Shuffle, or N, deals a new arrangement. Reset, or R, puts back the one you started from.
- How it works, or F, opens a panel that explains the sort as it goes.
Trade a few pieces yourself first. Then press Sort, and watch.
The Story
The picture is a village by a lake, its pastel houses stepping down to the water. Pink and red flowers spill over a stone wall, wisteria hangs purple above them, and sailboats sit out on the lake with mountains behind. A cat sits on the wall.
Someone has cut it into 64 square pieces, eight across and eight down, and laid every one in the wrong slot. A sailboat sits where a flower pot should be. The cat has wandered off its wall, to the board’s right edge. The small Preview beside the board shows the picture whole, and the caption above the board reads 0 / 64. Not one piece is home.
You can put it back by hand, and every exchange you make counts as one Move.
Or you can hand the board to the computer. It never sees the picture. It looks at two neighboring pieces, asks which one belongs later, and swaps them if they’re the wrong way round. Then it moves one slot along and asks again. It goes forward across the whole board, then back the other way, then forward again, and each pass is a little shorter than the last.
Press Sort and the pieces slide past each other in small, quick trades, while an amber edge rings the pair the computer is looking at. Green creeps in from both ends of the board as slots settle. From the arrangement the game starts with, it takes 1478 comparisons and 819 swaps. At last the caption reads 64 / 64, the thin lines between the pieces disappear, and the Message Line says “Picture complete.”
Back and forth, like a cocktail shaker. That sort has a name: Cocktail Shaker Sort. By Chapter 4, you’ll have built it yourself.
What You’ll Build
All of it. Here it is, in the order the chapters build it.
- The picture and the board. The game cuts the Village into its 64 pieces and deals them out when it starts, with the Preview beside them and 0 / 64 above. Shuffle deals a new arrangement, and Reset puts the first one back. The pieces lie where they were dealt. Nothing moves them yet.
- Your hands. Tap a piece and its outline turns gold. Tap another, and the two trade places. Or drag one piece onto another, and they trade the moment you let go. The keys do the same, with a blue outline to show where you are. Bring every piece home, and the game says so.
- The computer’s first look. Step rings two pieces side by side and asks one question. Does the left one belong later? If it does, they swap. Press Step again and again, and the bottom-right corner of the picture is carried along the rows until it lands in the last slot.
- The way back. The computer turns around at the end and walks back to the start, carrying the top-left corner home. Forward, back, forward. Green spreads in from both ends until the last piece lands.
- The finished puzzle. Sort runs on its own, at Slow, Steady or Fast. Pieces glide into place instead of jumping. 9, 25 or 64 pieces, three pictures or one of your own, and the How it works panel that follows the sort as it goes.
Five lines, five chapters. Each chapter ends with a game you can play. Its Goal lets you play it right there on the page, so you can see where you’re going before you start.
How Each Chapter Teaches
Every piece of the game comes to you as a story and a card. The story puts the piece in your head: what it does, and roughly how. The card gives every exact name and number. Read the story, then build from the card with that picture in mind. Run your game, and watch it happen.
Cocktail Shaker Sort comes the same way. Each chapter shows one more part of it on the screen before it names what you’re seeing.
Making what a card shows is the page for the cards. It shows how to make each kind of card, in the editor’s own words. Read its first two sections, Before your first card and The Set up card, before Chapter 1, and come back whenever a card shows you something you haven’t made yet.
Every chapter also has a catch-up download in its Goal. It’s that chapter’s finished project. If your game and the chapter part ways, open it and compare the two. Or start the next chapter from it.
Get the Starter Kit
Every picture the game uses comes in one Myth Pack. It holds the Village, the Forest and the Harbor, each one whole and already cut into 9, 25 and 64 pieces. It also holds the button faces, the panel, and the plain square behind each piece. That’s the Starter Kit. The game has no sounds or music, so there are none to install.
You’ll build it all in Myth Engine. If it isn’t on your computer yet, Get Myth Engine is where to find it.
Once it is, make a new Blank 2D project, and install the Starter Kit into it: choose File > Install Myth Pack… and pick the file. Chapter 1 starts there.
To install it, open Myth Engine, choose File › Install Myth Pack... and pick the downloaded file.
Get the Finished Game’s Project
The game at the top of this page is a project too, and you can open it. It’s the same file as Chapter 5’s catch-up download. Open it whenever you want to see how a finished piece was put together.
To open it, start Myth Engine, choose File › Open Project... and pick the downloaded file.
In Chapter 1, the pieces lie where they were dealt, and nothing on the board can move them. Five chapters from now, it’s the game you played above.