HW 3 - Collaborative System
- 1 Overview
- 2 Shared Drawing Surface (Synchronous, Remote Interaction)
- 3 Submission Instructions
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.
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:
- 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).
- 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).
- Drawing tools:
- Pen with some way to select stroke thickness and color
- Eraser, which should erase over both local and remote drawings
- Clear screen command
- 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.
- 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:
- Add a chat function so users can communicate about the drawing (in addition to communicating in the drawing.)
- Add text entry and shape drawing capabilities
- Use your HW2 input device as the drawing surface (you may want to create some kind of stylus and adapt the drawing tools so they can be used by an input device without a tracking state). (see Ishii, Hiroshi. Clearboard.)
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 Java, Processing, Openframeworks, or another application that produces native applications will be easier than writing a web application. For 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.
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.
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:
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.
- 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 WMV, MOV, or OGV format, and no larger than 10MB.
- 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.
Links to Finished Assignments
Add your submission below this line.
- Bjoern Hartmann
- Siamak Faridani
- Matthew Chan and Matthew Can
- Aditi Muralidharan
- Kenzan Boo Linsey Hansen
- Kurtis Heimerl and Pablo Paredes
- Krishna and Thejo
- Drew Fisher and Luke Segars
- Charlie Hsu and Brandon Liu
- Arpad Kovacs and Aaron Hong
- Richard Shin and Shaon Barman
- Dan Lynch
- Bryan Trinh
- David Wong
- Anand Kulkarni
- Thomas Schluchter