HW 1 - Interaction Technique

From CS260Wiki
Jump to: navigation, search

Due: Friday, September 10, 5pm


In this homework assignment you will implement either a pointing technique (the Bubble Cursor) or a menu selection technique (the Marking Menu).

You will submit your code, a short video demonstration, and a brief written description.

Interaction Techniques

Choose only one of these based on your level of programming proficiency and ambition:

The Bubble Cursor

Reimplement the Bubble Cursor pointing technique introduced in this paper and video:

At a minimum, your implementation should do the following:

  • draw a number of circular targets on the screen
  • provide a bubble cursor that captures the closest target and shows visual feedback (by enveloping that target) as described in the paper
  • provide a test mode in which one target object is highlighted and where selection time and selection success are recorded. after a successful selection, a new target is chosen.
  • provide a way to turn off the bubble cursor and default to a normal cursor.

For extra credit (up to 2 extra points), you may implement the following advanced features:

  • In the naive implementation, the closest target is found with a linear search over all possible targets. Precompute a more efficient data structure for finding the nearest target (e.g., quad- or kd-trees).
  • The paper only presents pointing at circular targets. Extend you algorithm to support rectangular or polygonal targets. The cursor itself is still a circular bubble, but the target shape is now different. This will require calculating point-to-polygon or point-to-line segment distances.

Here is an example of a basic Bubble Cursor implementation written in Processing: Media:bubblecursor-demo01.mp4

Marking Menus

Implement hierarchic marking menus as described in this paper:

Kurtenbach, G. and Buxton, W. 1993. The limits of expert performance using hierarchic marking menus. In Proceedings of the INTERACT '93 and CHI '93, p. 482-487.

At a minimum, your implementation should do the following:

  • support at least two-level menus (that is, one top level and one sub-menu level) of up to eight items per menu. You can come up with your own menu structure or use labels from this file: File:Menu-labels.txt.
  • offer at least novice mode, where you draw menus items on screen and require users to 'hit' the menu item they are interested in with their mouse.
  • instrument the application so you can capture menu selection time and success.
  • offer an option to turn off marking menus and show linear menus instead (you will have to implement the linear menu as well).

For extra credit:

  • implement expert mode where items are not shown and the shape of the drawn mark is used to select a command. If you want to detect strokes in expert mode, you may use an existing gesture recognition library such as: $1 Unistroke Recognizer or implement your own stroke recognition algorithm.
  • implement switching between novice and expert mode based on dwell time.

Here is a video demo of a basic implementation written in Processing: Media:markingmenu-demo01.mp4


  • Source Code
  • Demonstration video: Narrated Screen recording
  • One paragraph writeup on Wiki that describes your implementation.


Programming Languages / Environments

You may use any programming language and graphics API. However, you must start your implementation from scratch, i.e., do not look for existing source code or libraries that already implement the techniques, unless explicitly allowed in the assignment.

If you are unsure which tool to use, I suggest starting with Processing. The Bubble Cursor and Marking menus can be implemented very quickly in Processing (once you become familiar with it).

Screen Recording

OS X: You can use a free trial version of iShowU HD or create a screen recording with Quicktime X.

Windows: You can use the free Cam Studio.

Submission Instructions

You will submit your assignment on this wiki.

Create a Wiki Page for this assignment

Begin by creating a new wiki page for this assignment. Go to your user page that you created when you made your account. You can get to it by typing the following URL into your browser:


Replace FirstName and LastName with your real first and last names. This will take you to the page you created for yourself when you created your wiki account. If you have trouble accessing this page, please check that you created your wiki account properly.

Edit your user page to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[Homework1-FirstNameLastName|Homework 1]]

Again replace FirstName and LastName with your name. Look at my user page for an example. Then click on the link and enter the information about your assignment. You should upload the files described below and describe any extra functionality you implemented and want us to review.

Upload Project

  • Your submitted project must include both the full source code as well as the executable of the working application.
  • Create a zip file of your project tree. Rename the zip file to firstname-lastname-hw1.zip (e.g., bjoern-hartmann-hw1.zip)
  • Upload the zip file to the Homework1-FirstNameLastName page you just created:
    • Create a new file link like this: [[File:firstname-lastname-hw1.zip]]
    • Save the page, then click on the File link you just created to upload the zip file.

Create & Upload Screencast Video

  • What your screencast should contain:
    • Narrated walkthrough of the interface including all implemented interactions.
    • Be CONCISE. Your video shouldn't be longer than 90 seconds.
    • Be prepared to do multiple takes; plan and/or write out a script first.
  • Your file should be in WMV or MOV format, and no larger than 10MB.
    • Rename the wmv/mov file to firstname-lastname-hw1.mov (e.g., bjoern-hartmann-hw1.mov)
  • Upload the mov file to the Homework1-FirstNameLastName page you just created:
    • Create a new file link like this: [[File:firstname-lastname-hw1.mov]]
    • Save the page, then click on the File link you just created to upload the mov file.

Describe your implementaiton

  • On the Homework1-FirstNameLastName page you just created, write one paragraph about your implementation:
    • what platform, language, and tools you used
    • any additional features you implemented
    • what you learned from this assignment

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it at the bottom of the page with your full name as the link text. The wiki syntax will look like this: *[[Homework1-FirstNameLastName|FirstName LastName]]. Hit the edit button for the last section to see how I created the link for my name.

Links to Finished Assignments

Add your submission below this line.