Skip to main content

• About Me
  • Projects
  • Activities
  • Skills
• Scripts

NetDraw

NetDraw is a diagramming program that allows multiple people to edit the same canvas simultaneously. This program was developed as a project for my Software Practicum class (CS 2335) at Georgia Tech. NetDraw consists of about 6,400 lines of code.

Goals Web Version

Goals

This project was interesting because of the two main conflicting goals it was designed to satisfy:

• responsiveness of drawing
• determinism in the face of asynchronous concurrent modifications

To ensure that all viewers of the canvas saw the same canvas even though they could all make modifications to it concurrently, I designed a clever layer system for managing the drawing:

• Scratch Layer
  • shapes that the user is in the process of drawing appear here
• Pending Layer
  • shapes that the user has finished drawing but have not been confirmed by the canvas server appear here
• Confirmed Layer
  • shapes that the user has finished drawing and that have been confirmed by the canvas server appear here
  • the canvas server is responsible for determining the final Z-order of shapes drawn at the time by different clients

Responsiveness is achieved because shapes that the user draws are immediately displayed in the Scratch and Pending layers. Determinism is achieved by letting the canvas server determine the final Z-order of drawn shapes, and then moving those shapes from the Pending layer to the Confirmed layer.

Web Version

I created a limited version of this program for Yahoo! Hack Week that runs in your web browser as a JavaScript-based application. It has fewer painting tools than the Java-based version and does not currently support multiple users editing the same canvas.

• NetDraw for the Web

I wrote the JavaScript entirely by hand and incorporated the following external components:

• Walter Zorn's JS Vector Graphics Library
• YUI Color Picker

Credits to Justin Whittle of Yahoo! Atlanta for bringing me up to speed in JavaScript so fast.