Meg Richards – Project 3

by Meg Richards @ 1:01 pm 21 February 2011

Mix & Match Interactive Toy

Mix and match toys and games are a popular activity for children. It typically appears as an upright cylinder or rectangular prism with multiple standing human or animal figures independently painted or carved into the surface. The shape is divided into thirds that rotate independently, allowing the different heads, torsos, and legs of the painted or carved figures to align. They have existed in many forms of media and targeted different age groups over their two-hundred year history. Changeable Gentlemen, a card game published around 1810 targeting adults, was one of the earliest manufactured mix and match games. Adaptations in base material and figure subjects made it more suitable for a younger audience, and modern incarnations are generally as a classic toy for children.

I chose a mix and match toy as the interaction subject because it’s a ubiquitous toy and gives almost all the players a baseline familiarity. Also, while the media and figures are numerous over the last two hundred years, the method of interaction has always been hand manipulation. The Kinect enables the player to use their entire body to control the figure. The figures are from a card game “Mixies” published in 1956 by Ed-U-Cards. The player can rotate through different heads, torsos, and feet by swiping above, at, or below the player’s midsection, respectively. Swiping to the left will rotate to the next card to appear, and swiping to the right will rotate to the previous card. The figure will follow a player’s horizontal and vertical movement, bending, and if they turn around.

I used OpenFrameworks, ofxKinect, and OpenNI. Once the skeleton is detected, the images are overlayed at the position and angle of the corresponding section. Hands and arms do not directly affect card placement, so they are free to control the card rotation. Sweep/wave detection is simply a matter of the end of the left or right arm moving over a certain horizontal distance within a time threshold. If the user’s back is turned, the back of the card is displayed instead of the obverse.


  1. Hi Meg – great work today. Please document your project here. Below are the comments from the Etherpads.

    Lovely presentation – nice to see such polish and attention to detail. Great motivation, great culture research (googling etc.). Using images in the public domain — NICE, thanks for pointing that out too.

    META, nice design qualities, attention to detail, etc
    maybe a tabletop background? like a wood grain?

    Nice collection of examples, especially all of the different forms and styles they exist in. The images you chose to work with are awesome! This is a very whimsical concept. Really nice execution, I like the subtley of movement and attention to detail. Card flip is cool. Overally really nice job! One small thing, if you could get rid of the white near the edge of the cards, then you wouldn’t see it when they cards overlap.

    i love these toys and your background on them. cute images in the presentation. your project looks really good, the images are so classic and fun. hahaha @ the flipping, nice detail. I can’t get over how good this looks.

    really fantastic graphics, and a nice interface! One thing I would do is remove the white edges around the cards and save as a png or something…

    Really cool idea. Clean look and feel. I wish the card switching was animated to slide across, with no warp.

    Super cool and fun. I recommend using transparent PNGs for your images so you don’t get that white box around the edges. I really like how you didn’t stop at the swapping of the images and added the bouncy effect, which gave it more of a human component. LOVE IT!

    Hurray polish! Love the context, both your reasoning for doing the project, as well as the historical background. Perhaps a slight animation for when the cards are waved over? Beautiful movement.

    Very cool. Good job!

    [Early in presentation] intriguing concept already

    Great history of the concept, helps give lots of context and makes us care. Beautiful retro graphics – just get rid of the white outline of the cards. Multiple people using this at once could be really fun – I want to stand next to my friend and switch his/her body parts.

    Some fluid animation would really put the icing on the cake. And just a touch of extra clipping on the images.

    The turning to show back is a great detail – not necessary, but I think it adds a lot :) The simple interaction is great

    Really great design and animation. Very solid interaction.

    Having some type of background such as a wood table texture would give this a bit more polish. Otherwise I could see this as a commercial product. It’s great how you targeted a specific audience as well.

    Looks simple and very interesting at the same time. The motion of the parts is smooth enough for the application. Everything looks very well implemented.

    I really like the historical context. Way to go on the swiping motion. :D I really want the chatacters to be alive. like to have the dog bark, but thats a whole other can of worms.

    A shuffle sound at the beginning could be cool.

    Vintage cards – what a great find. they look great.

    Beautiful job in both presentation and execution. The pictures are charming, especially with the movement tracking the figure.

    Great project. A subtle animation on the switching so it doesn’t happen so fast would be nice. I like the historical aesthetic. The gradients on right and left could be a bit more subtle.

    Bonus points for taking last project’s feedback to heart. Getting the “back” is a nice touch. (I reallllly want to get rid of that white edge around the card though.) –> Nevermind, then if it’s distracting, maybe add a consistent Xpixels wide white border? Just some treatment to indicate it was intentional. Beautiful, tasteful choice in the cards.

    Exquisite corpse, great UI, using the old cards was a very nice move, it gives a really cool fell, a mix of old timey and new tech. Its just fascinating to watch you move around and the cards respond, even though the motion is well simulated . Just awesome.

    Nice historical precedents! Very clean and well executed.

    This is really charming. Something about the way the cards move with your body really reminds me of physical cards sliding around on a table. Sorry to hear about the jitter, I was going to comment about the white at the edges of the card – glad to hear that you tried to address it. Good detail with the back of the card.

    The choice of cards is really great – I really enjoy the style and the fact that you can swap cards using hand gestures.

    Great job meg, it’s both artistically and technically well done.


    Give the right and left cards (the ones not in use) a shadow or something so the seem “on the table”.

    The reduction of the 15-point skeleton to the “low-resolution” 3-point card visualization is ingenious. It still conveys extremely organic motion, while allowing the use of the arms for other interactions.

    Comment by Golan Levin — 21 February 2011 @ 1:04 pm
  2. For some reason this got saved without audio but here it goes anyway:

    Comment by Mauricio — 21 February 2011 @ 8:44 pm

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2024 Interactive Art & Computational Design / Spring 2011 | powered by WordPress with Barecity