HW 1 - Bubble Cursor

From CS260 Fall 2011
Jump to: navigation, search

Due: Friday, September 9, 5pm ..


In this homework assignment you will re-implement a pointing technique (the Bubble Cursor). You will submit your code, a short video demonstration, and a brief written description. You must complete this assignment individually.

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 your 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


  • 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 worried about your programming skills for other assignments, I suggest starting with C#, because you will need this language for Assignment 2, the Kinect Interface. Another option is to use Processing (Java) or OpenFrameworks (C++) . The Bubble Cursor can be implemented very quickly in these languages (once you become familiar with them).

Screen Recording

You can use the free version of Screencast-O-Matic on many platforms. On OS X, you can use a free trial version of iShowU HD or create a screen recording with Quicktime X. On Windows, you can use the free Cam Studio. Linux users can use recordmydesktop, which is usually packaged by the same name.

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 AVI, WMV, OGV, 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.
  • Alternately, you may instead elect to upload the video to a video sharing service and include the link in your submission. On the upside, a video posted to Youtube may have greater visibility, but on the downside, the class record will no longer have an archival copy.

Describe your implementation

  • 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.