HW 3 - Collaborative System

From CS260 Fall 2011
Jump to: navigation, search


You will write a collaborative drawing application for at least two simultaneous, remote users. You will submit code, a demo video, and a short written description.

You can work on this assignment alone or in pairs. You do not need to work with the same partner as for HW2. You may use the Kinect for this assignment, but you don't have to (we'll try to re-distribute Kinects as necessary).

Shared Drawing Surface (Synchronous, Remote Interaction)

Create a shared whiteboard application in which at least two users can draw simultaneously in a shared view. Your project must satisfy at least the following specs:

  1. Support two simultaneous users on two different computers that are on a common network. All users should always have a consistent view of the drawing surface (i.e., they should be in sync).
  2. Show a real-time ghost cursor that indicates where the other user's cursor is on the drawing surface. (These ghost cursors will of course be different for each user).
  3. Drawing tools:
    1. Pen with some way to select stroke thickness and color
    2. Eraser, which should erase over both local and remote drawings
    3. Clear screen command
    4. A way to import and share images on the drawing surface. Images could be screen captures, images from a user's local drive, or online images retrieved through a URL.
  4. A history-replay mechanism where users can replay the entire drawing session to see how their work evolved over time.

For extra credit, and if you feel ambitious, you can implement any number of the following features:

  1. Add a chat function so users can communicate about the drawing (in addition to communicating in the drawing.)
  2. Add text entry and shape drawing capabilities (this is hard with the Kinect)
  3. Use the Kinect to draw a (e.g., by using it as a touch sensor as in Wilson's paper).
  4. Overlay video of the person drawing, as in Ishii's Clearboard.

Implementation Strategy

Network Communication

The two (or more) applications need to communicate to share their state. There are many possible strategies to achieve shared state over a network: one application can be the designated server, the other(s) the client; or there can be a designated separate server and each drawing application acts as a client. Implementing this homework in C#, Processing, Openframeworks, or another application that produces native applications will be easier than writing a web application. For C#, look at the .NET Asynchronous Socket class. In Processing, you may want to use either the standard Network library or the oscP5 Open Sound Control library. Open Sound Control is a widely-used, relatively simple protocol for sending control messages over either UDP or TCP.

Shared State

You will have to come up with some protocol to represent draw/erase/clear/cursor-update commands and make sure all clients act on those drawing commands. To make sure that your canvas looks consistent across different clients, it is a good idea to use the same commands and logic for drawing both local and remote strokes in your application.

History can be implemented by capturing a chronological record of all commands, then replaying it either entirely or partially.

Submission Instructions

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:

[[Homework3-FirstNameLastName|Homework 3]]

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 the full source code of your application - this includes both client and server code, if you split your application.
  • Create a zip file of your project tree. Rename the zip file to firstname-lastname-hw3.zip (e.g., bjoern-hartmann-hw3.zip)
  • Upload the zip file to the Homework3-FirstNameLastName page you just created:
    • Create a new file link like this: [[File:firstname-lastname-hw3.zip]]
    • Save the page, then click on the File link you just created to upload the zip file.

Create & Upload Live Video

  • What your video(s) should contain:
    • Your application supports simultaneous multi-user interaction, and your video should reflect this. Show at least one live video of two users drawing simultaneously using two separate computers. You can put two laptops/desktops side by side. Screen output for both screens should be visible and legible in the shot. Narrate your video. If the screen is overexposed, turn down the screen brightness and add room lighting.
    • A walkthrough of all tools and interactions you implemented in the user interface. You may split this part into a second video file that is screen recorded.
    • Be CONCISE. Your video shouldn't be longer than two minutes.
    • Be prepared to do multiple takes; plan and/or write out a script first.
  • Your file should be in AVI, MP4, M4V, WMV, MOV, or OGV format; alternatively, post a youtube link.
    • Rename the file to firstname-lastname-hw3.mov (or wmv/ogv; e.g., bjoern-hartmann-hw3.mov)
  • Upload the file to the Homework3-FirstNameLastName page you just created:
    • Create a new file link like this: [[File:firstname-lastname-hw3.mov]]
    • Save the page, then click on the File link you just created to upload the mov file.

Describe your implementation

  • On the Homework3-FirstNameLastName page you just created, write one to two paragraphs:
    • describe what platform, language, and tools you used (especially: what libraries you used and what you wrote yourself)
    • briefly describe how the user interface of your drawing application works and what implementation strategy you used for keeping different clients in sync.
    • reflect on 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: *[[Homework3-FirstNameLastName|FirstName LastName]]. Hit the edit button for the last section to see how I created the link for my name.


Please List your team here by Wednesday and state whether you want to use Kinects for your assignment or not. We'll try to reshuffle the available supply in response.

  • Bjoern Hartmann and Drew Fisher: Plan to use Kinect
  • Hong Wu and Rohan Nagesh: Plan to use Kinect
  • Derrick Coetzee (no partner): Plan not to use Kinect
  • Steve Rubin & Valkyrie Savage: !Kinect
  • Laura Devendorf and Apoorva Sachdev: !Kinect
  • Ayden Ye and Peggy Chi: Still Planning :)
  • Sally Ahn and Amanda Ren: Plan not to use Kinect
  • Manas Mittal and Shiry Ginosar: No Kinect
  • Alice Wang and Jim Sproch: No Kinect
  • Vinson Chuong: No Kinect
  • Ali Sinan Koksal and Yin-Chia Yeh: No Kinect
  • Yun Jin and Cheng Lu: No Kinect
  • Jason Toy: No Kinect

Links to Finished Assignments

Add your submission below this line.