One Awesome Tool for User Experience Designers and Researchers
It is Indeed Possible to Type 30 Words Per Minute on a Smart Watch

Kitty is a Drawing Tool for Interaction Authoring

Hopefully you're familiar with Project Draco, our answer to the question:

Can animation be made as easy as drawing?

Dragon[1]

We've discussed Draco here on the blog and have a video overview of what we were showing at this year's SIGGRAPH conference in Vancouver to catch you up.

Kitty builds on Draco and looks into the animation question and asks:

Can we make Draco interactive?

  Vakhkhosh[1]

In the image above you'll see two interactions happening:

  • the user can move the dragon's head into the frame
  • the user can move the baby dragon into the pot

With the egg going into the pot, you'll notice that the monster's eyesfollow the egg and that the egg causes a particle splash as it enters the pot.

This opens up a lot of possibilities for iteractive storytelling. 

  • How would children like this for an ebook on a tablet?
  • Does it make web content more dynamic?
  • Could it be useful for game authoring?
  • Is it useful for training and instructions?

Kitty builds on Draco but how does it work?

We've introduced a simple node network to define the relationships between objects. Let's look at the picture below of a different egg going into a different pot - yes we like cooking here at Autodesk Research.

Autodesk Research Kitty Interaction Authoring Dynamic Drawings

We've set up the scene as you would in Draco with steam and splashing particles coming from the pot. In the following image you can see that we have a simple node graph that gets overlaid on the picture. This helps reduce UI while keeping the events and relationships in context.

Autodesk Research Kitty Interaction Authoring Dynamic Drawings

You can see the path the egg takes to get into the pot as well as two blue circles representing the particle events. The user is making a connection from the egg to the circle on the right to tell the splash to only happen when the egg is close.

Autodesk Research Kitty Interaction Authoring Dynamic Drawings

When the connection is made between the nodes, the egg path and the splash, the user can then choose how to link the events. In this case the movement of the egg is connected to the emission of the particles. The inlaid square defines the timing of the event. 

Autodesk Research Kitty Interaction Authoring Dynamic Drawings

The curve can be redrawn to control what happens. The horizontal axis represents the object that triggers the event (the egg). The vertical axis represents the object that is being driven (the particle splash). When the line is flat, there are no particles being emitted.

In this image below we explore using Kitty to explain how an electric doorbell works.

Autodesk Research Kitty Interaction Authoring Dynamic Drawings

You can learn more about Kitty and see how easy it is to author these kinds of behaviours in the video below. More information is available on the Draco project page.

We'll be presenting this latest research at this year's UIST, the ACM User Interface Software and Technology Symposium, in Hawaii in October. If you are there, stop by to see the demo or attend the talk. 

Whether you are at UIST or not, please let us know what you think about these tools and the possibilities that they open up for you. 

Comments

Feed You can follow this conversation by subscribing to the comment feed for this post.

The comments to this entry are closed.