Etsy Icon>

Code as Craft

Hacking Hardware with Etsy main image

Hacking Hardware with Etsy

  image

UPDATE: We were blown away by the response at Maker Faire Detroit, with over 800 people playing Whack-A-Treasury!  We also received three Editor's Choice ribbons from the editors of Make: magazine! Next stop: World Maker Faire in Queens September 17 and 18. In the meantime, we've put our source code on GitHub.  Check it out!

Maker Faire, a festival devoted to supporting the DIY movement in tools, toys, and art, is traveling to three North American cities this year— and Etsy is along for the ride! Celebrating the joy of making and supporting those who make is what Etsy's all about. Partnering with Maker Faire allowed us a great opportunity to connect with this community in person.

Maker Faire

We wanted to build something interactive to attract visitors and allow them to interact with Etsy in a way they never had before, and our API gave us the opportunity to work with data from our site and build something physical. Our API gives access to Etsy listings and Etsy Treasuries— the member-curated item collections that appear on the Etsy homepage. Voilà! Visitors to our booth could create Treasuries remotely using our API and a handmade old-time carnival game. Enter Whack-A-Treasury!

If you've played Whack-a-Mole, you know the drill— a mechanical mole pops up from a board, and you have only a second to whack it on the head. With this as our basic inspiration, we built a game that lets each player choose a theme, pulls in Etsy items whose keywords match that theme, and displays the item photo on an oversized monitor while the player hits a game pad in the right spot to grab the listing. If the player racks up enough items to fill an Etsy treasury, they win!

Gameplay

The player stands before a 2-by-3-foot game pad with a flatscreen monitor at eye level. In her hands, she holds a giant sparkly foam mallet, handmade in our Brooklyn office. The player gets to chose her theme and skill level by whacking one of the game pad's six squares. Then, the game begins! Listings flash by on the screen as quickly as once every half-second. At the same time, one of the game pad's six colored squares lights up, and the player must hit it before the listings disappears. If the player whacks 12 listings before the game's 30-second time limit is up, she's a winner! Gongs sound. Lights flash. The player gets a custom-printed sticker with a URL to the treasury she just created. Some players check it out right then and there. The winners also get their choice of a lollipop or a DIY plush robot kit (supplied by our friends at Spoonflower.) Good times!

How We Did It

How We Did It

We'll be presenting this project on the Make: Live stage at Maker Faire Detroit on Sunday, July 31 from 12:30 PM - 1:00. If you want in-depth technical details, including how to use the Etsy API, how to wire components up to your Arduino, and how talk to your Arduino with Processing, come by and see us!

The game runs on a single laptop and has four major elements: a local MySQL database, a Processing sketch that handles the display, a physical game pad, powered by an Arduino microcontroller, that registers hits, and a PHP script that prints out stickers for the lucky winners.

We chose six themes for players to select: owls, cowls, kittens, steam punk, mustaches, and robots. We chose these specific themes because they all provided fun, eye-catching search results. Then, we wrote a short script in PHP that searches for hundreds of listings that match themes themes, downloads their photos, and stores them in a MySQL database. The images are resized so that they fit nicely on the game screen.

The game pad is basically a giant pillow, sewn from vinyl fabric and stuffed with squishy foam. The pad itself is pressure-sensitive— it knows where you hit it. There are six force sensors embedded under its sparkly surface, plugged into an Arduino microcontroller. The Arduino sends and receives serial data, which the Processing app uses to make sure that hitting the pad lets the player "win" the round. (And, just for sheer carnival goodness, the Arduino also drives a lighting controller that lights up the pad in just the right spot each time.)

Whack A Treasury

Then, we built the game using Processing, an open-source programming language for graphics and animation. The Processing sketch draws the listings on the screen, chooses which of the game pad's six squares to light up, and waits for the Arduino to tell it which squares on the game pad have been hit. Processing also keeps track of the player's score, and saves the winning game results.

Finally, a short PHP script waits for winning games, and prints out stickers for the winners to take. The sticker contains a QR code that can be scanned with a mobile phone. This displays the winning game results, and allows the player to log into Etsy and save the Treasury to her member account.

The Results

All told, nearly 500 people stopped by to play at Maker Faire San Mateo. Detroit, it's your turn now! We'll be at Maker Faire Detroit on July 30 and 31st with our fantastic local street team, Metro Detroit Etsy. Can you top 500 players in a weekend, Detroit? Come out, whack your very own Treasury, and see what else you can build at Maker Faire! (New Yorkers get their shot during World Maker Faire September 17 and 18th in Flushing, Queens.)

Credits

We made all of this in our Brooklyn office and in the workspace at NYC Resistor. Ari and Justin wrote the Processing script. Ari also worked with Eric to build the pressure-sensitive pad, wire the lights and build the Arduino circuit. The game pad and mallet were sewn by Claire, Julie, and Kimm. Hanna built the table, and Jay rocked the graphic design. Handmade all the way by many hands!