InterDraw – An Advanced Online, Interactive, Collaborative Art Program

Project Goal and Objectives

The primary objective of this project was to leverage modern communication technologies to improve collaboration among artists, enabling them to create distinctive and innovative artworks.

The project successfully achieved its goal by developing an advanced multi-platform drawing application that includes essential features like line, freehand, and basic shape drawing Unique to this application is its ability to integrate animated drawing objects, allowing for dynamic elements such as moving images and the removal of objects within the artwork.

The project aimed to create a comprehensive three-tiered client-server-database model that enhanced client interaction This model enabled users to visualize and modify art while the server and database preserved a detailed record of all artworks and individual client contributions By facilitating real-time communication among client drawing applications, it allowed for collaborative, multi-user creation of artwork.

Why Collaborative Art

Collaboration, the integration of diverse talents and ideas, has been essential to human progress since the days of early hunter-gatherer societies From hunting in groups to modern technological projects, effective teamwork remains crucial for success Whether designing software or developing advanced materials, sharing ideas and working collectively continues to drive innovation and achievement in today's interconnected world.

Collaboration in the art world, often seen as an individualistic realm, plays a crucial role in fostering open self-expression and emotional growth Collaborative art endeavors allow artists to create unique works that could not be conceived by a single individual, resulting in truly distinctive pieces Moreover, as artists engage in the collaborative process, they develop deeper connections with one another by witnessing the emotions each contributes to the artwork, enhancing both their personal and collective creative experiences.

Collaborative art offers a distinctive approach to creativity, and enhancing the tools that support this process allows it to engage a broader audience This project aims to provide a fresh platform for exploring the potential of collaborative art.

Where Idea Originated

Professor Matthew Ward's project emerged from his fascination with collaborative art, sparked during his visit to the SIGGRAPH 96 conference in New Orleans, a premier event in computer graphics At the conference, he encountered an exhibit that enabled multiple participants to create dynamic artwork through body movements captured by motion sensors, which were then translated into visual effects on a screen This innovative collaboration captivated Professor Ward and inspired his further exploration of collaborative artistic expression.

Professor Ward envisioned the Internet as a platform for collaborative art, leveraging its inherent nature as a collective effort of millions By extending this collaboration to the realm of art, he aimed to foster creativity and connection among artists and audiences alike.

This chapter offers a comprehensive exploration of the essential concepts and ideas necessary for a complete understanding of the project, focusing on the realms of computer art and collaboration.

Computer Art

Definition of Art

The true definition of art has long been debated by philosophers and political leaders, raising the question of whether art can be accurately defined To understand the essence of art, it's essential to explore its origins and the fundamental elements that shape our perception of it.

Figure 2.4: Images from Paleolithic Painted Cave of Lascaux, France; images from http://www.culture.fr *used without permission

Around 20,000 to 25,000 years ago, prehistoric humans began creating rudimentary cave drawings using flint, stone, and plant-based pigments, depicting important aspects of their lives, particularly hunting and the animals they pursued Over time, these early artists developed more sophisticated techniques, discovering new pigments and methods that allowed for more realistic representations through the use of silhouettes and varied color tones This level of realism in their artwork would not be matched for thousands of years Subsequently, artistic focus shifted from realism to creating images dedicated to deities and rulers.

Figure 2.5: Pueblo Indian pottery from 1000 AD to 1970 AD; images from http://www.cmnh.org

As humanity transitioned from cave living to constructing their own homes, they uncovered a new medium: pottery This innovative method allowed artists to express their creativity and individuality through the art of clay creation.

Artists crafted shapes from clay and hardened them over fire, discovering they could decorate these pieces similarly to their cave-dwelling ancestors However, their decorations featured stick-like representations rather than lifelike forms This innovation allowed them not only to adorn the hardened clay but also to create decorative items for homes and to signify an individual's status.

The Bronze Age ushered in new artistic media, enabling artists to explore innovative methods of creation With the advent of bronze, they could craft intricate images, figures, and objects, transforming the landscape of art.

Figure 2.6: Section from the "Book of the Dead" of Nany, ca 1040-945 B.C; 21st Dynasty; Reigns of Psensenmes I-II; Third Intermediate Period; image from http://www.metmuseum.org *used without permission

The Egyptians marked a significant evolution in art by creating works aimed at immortalizing their gods and rulers, whom they regarded as divine Unlike previous artistic styles, Egyptian art focused on completeness rather than realism, with artists striving to preserve every detail as accurately as possible To achieve this clarity, they depicted subjects from multiple angles, ensuring that each element was distinctly visible.

Artists often use specific angles to effectively represent objects, particularly in their depictions of the human figure For instance, a person's head is typically shown in profile, while the upper torso is presented from a frontal view Additionally, the legs are illustrated from an internal perspective, which can create the illusion of having two left or two right feet.

The ascent of the Greek Empire marked a significant revival of realism in art, characterized by the accurate depiction of the human figure Artists aimed to create beautiful representations to honor their rulers and deities, reflecting the cultural values of the time.

Figure 2.7: The Pentacost by Gaetano Gandolfi (1734 - 1802) Bologna, Italy; image from http://www.europeanpaintings.com *used without permission

The Catholic Church's ascent significantly shaped the art world, as it both inspired and persecuted various forms of artistic expression that contradicted its teachings This period led to the creation of some of history's most renowned artworks, including the iconic Sistine Chapel Artistic styles evolved dramatically during this time, transitioning from geometric representations of holy figures to more dynamic and expressive forms.

Mary would be on top and others would be underneath) to the creation of images where there was no control of the formation of the work.

The evolution of art took a significant turn as artists like Picasso, Turner, and Van Gogh pioneered new movements that transcended traditional reality This era introduced revolutionary styles such as surrealism, pointillism, cubism, and impressionism, reshaping the landscape of artistic expression.

Artists like Andy Warhol have significantly shaped modern art by employing innovative styles that involve reimagining images of people and objects on canvas using vibrant colors Additionally, some artists produce works that transcend verbal description, pushing the boundaries of artistic expression.

The long history of art prompts us to question what truly defines it Is art determined by societal consensus, or is there an inherent quality that distinguishes it? Morris Weitz suggests that the definition of art may be elusive, challenging us to consider whether it can be succinctly articulated or if it remains an abstract concept.

The nature of art resembles that of games in that there are no definitive common properties; instead, we observe various strands of similarities Understanding what art truly is involves recognizing, describing, and explaining the elements we classify as 'art' based on these similarities, rather than identifying a singular essence.

Weitz explores the parallels between the definitions of art and games, highlighting the complexities involved in defining each He questions when a game ceases to be a game if altered and whether it retains its identity through changes Similarly, he examines the various forms of art, pondering when something transitions from being classified as art to something else, and vice versa.

When an individual views a large metal sculpture created by an artist but fails to recognize it as art, does it lose its artistic value? In his essay "What is Art?", Leo Tolstoy explores this profound question, challenging the perception and interpretation of art.

Is Computer Art Really Art?

As computers have grown increasingly powerful, their potential as a medium for art has gained recognition However, a common debate arises: can creations made by computers truly be considered art? Critics argue that since computers operate on mathematical formulas and computations, their outputs lack the human touch essential to art Yet, it's important to note that computers serve merely as tools for artists, who mold and manipulate them to produce creative works This human interaction is what ultimately defines the artistic value of computer-generated outputs.

Condemning the use of computers as a medium for art raises the question of whether we should also condemn photography and painting, as many art styles focus on recreating nature This recreation is merely a reflection of the natural world, prompting us to consider where human creativity fits in Just as traditional artists manipulate their chosen mediums to convey personal meaning, digital artists do the same with computers Art only holds value when it carries significance; therefore, meaningful creations can emerge from any medium, including digital platforms.

Idea of Collaboration

Collaborative Applications

One application of collaboration can be seen in many companies today This application is web/tele-conferencing Through the use of either the Internet or phone lines people are

Advancements in communication technology enable individuals to hold conferences and meetings from any location, fostering collaboration in a more expansive environment This innovative approach enhances teamwork and connectivity among people, regardless of geographical barriers.

The Active Response Geographical Information System (AR/GIS) Collaboration System enhances resource management by integrating geometrical decision tools into network planning applications This system enables users to evaluate current land use, set objectives, and propose geographic scenarios while visually summarizing collected data Users can engage in discussions about the results, offer additional insights, and share pertinent information, facilitating informed decision-making regarding land issues and their associated risks and impacts.

A screen shot of this application is shown in Figure 2 8.

Figure 2.8: AR/GIS Collaborative Negotiation System; image from http://www.ciesin.colostate.edu

Carnegie Mellon University’s Human Computer Interaction (HCI) professors are developing the Collaborative Onsite Wearable System to assist aircraft mechanics in diagnosing and repairing planes This innovative system enables mechanics to utilize wearable computers for onsite simulations and access historical maintenance data, facilitating efficient problem identification in aircraft.

When a mechanic encounters an undetermined issue, the system enables them to establish an audio, video, and data connection with the help desk located at another concourse This connectivity allows the mechanic to collaborate with the lead mechanic, facilitating a discussion about the current problem and potential solutions.

Collaborative Art

Collaborative art is a distinctive art form that emerges from the collective efforts of multiple individuals, each bringing their unique perspectives and emotions to the final piece This collaborative process allows for a rich tapestry of feelings to be expressed, resulting in artwork that transcends what any single artist could achieve alone.

Collaborative art has long been utilized in group therapy as a powerful tool for emotional release, enabling participants to express their feelings while drawing strength from the emotions of others This process fosters emotional growth and well-being, exemplified by the Growing Through It art workshop, where participants collaborate to create a professional piece of art and a book The workshop not only results in tangible artistic outcomes but also promotes mental growth, which is the primary goal of the course.

Collaborative art has gained prominence on the internet, exemplified by the HypArt project, which stands for Hyper-Art, akin to HyperText This initiative invites artists globally to contribute to a single artwork by adding their creative touch to subdivided digital canvases, each themed differently The project's developer was inspired by the concept of uniting individuals worldwide to collaboratively create a singular image, showcasing the power of collective artistic expression An illustration of such a collaborative piece can be seen in Figure 2.

Figure 2.9: Blue - a HypArt creation; image from www.work.de/cgi-bin/HypArt.sh *used without permission

The HypArt project, initiated by Klaus Rosenfeld in June 1994, focuses on the theme of "blue," as reflected in the title of its latest creation The inaugural project concluded successfully in August 1994, and the 37th creation commenced in March 2000.

The Dreamview Collaborative Generations Project exemplifies collaborative art on the Internet by allowing users to transform an initial image into successive generations of modified artwork Participants can take the original image and create a second-generation version, which can then be further altered to produce a third generation and beyond The project's creator emphasizes the importance of this collaborative process in fostering creativity and community engagement.

The internet and life are inherently collaborative, as individuals continuously learn from and inspire one another It's common to encounter an image or idea and think, "I could improve this," or "I would approach it differently." This creative exchange encourages personal expression and innovation.

Figure 2.10: Generations Project: Generations 1 and 3; images from http://www.cs.cmu.edu

Figure 2.10 showcases the original and third-generation images from this collaborative art project, highlighting the distinct influences each artist contributes to the initial creation As the project evolves, these diverse artistic interpretations transform the artwork into unexpected forms, expanding beyond the original artist's vision.

The Chain Art Project exemplifies collaborative creativity, where an artwork was circulated via email and FTP, allowing each participant to modify it using their preferred image editing tools Each contributor downloaded the artwork from a designated FTP site, made their enhancements, and then re-uploaded it for the next artist This innovative project culminated in the creation of over 130 unique images, crafted by more than 200 contributors, showcasing the power of collective artistic expression.

Collaborative art can be found in numerous forms both online and in daily life, showcasing how individuals can merge their emotions to create unique masterpieces.

Related Work

WebArt

The development of WebArt, created by Andrew Mason as part of his MQP at WPI, is the only known project focused exclusively on web-based interactive and collaborative art This program provided an interface for users to create simple animated images, or sprites, which could be uploaded to the WebArt database Users could then select a sprite and define its movements using a time-based function, allowing the data to be transferred to the database and utilized by user programs.

WebArt aimed to create a collaborative digital canvas for user interaction but fell short as an effective art tool While it enabled the creation of small, animated sprites, the strict limitations on movement and design restricted artistic expression Users had minimal control over the creative process, only able to choose sprites and functions Consequently, while WebArt may serve as a platform for interactive gaming simulations or screensavers, its utility in art development remains limited.

The WebArt project succeeded, however, in demonstrating that the development of an interactive, collaborative art program is both feasible and within the capability of current technology.

Microsoft NetMeeting

Figure 2.12: Sample NetMeeting Whiteboard session

Microsoft NetMeeting® is a unique commercial application that facilitates the transfer of interactive images among multiple users It features an interactive whiteboard where users can draw with simple shapes, freehand, and a highlighter brush Additionally, it provides functionalities for deleting created objects and basic cut-and-paste options The drawing tool is a simplified version of Microsoft Paint, enhancing collaborative efforts in real-time.

A significant drawback of the Whiteboard application is its limited accessibility, as it requires users to run NetMeeting on a Windows operating system This requirement restricts the user base, particularly since many high-performance graphic systems do not operate on Windows, thereby reducing the program's overall reach and usability.

This application demonstrates the feasibility of my project, showcasing a simplified version that retains many fundamental features incorporated into the final design.

This chapter outlines the methodology employed throughout the project, detailing the essential tasks required for its successful completion and their respective purposes.

Project Tasks

1 Develop a simple online drawing program in Java

The initial phase of my project involved creating a basic online drawing program designed for user interaction with a digital canvas This user-friendly interface incorporated essential features such as the ability to draw geometric shapes, make free-form brush strokes, and choose colors from a straightforward color palette.

2 Develop network server and add network capabilities to drawing program

To facilitate client-to-client interaction, a network server was established, enabling clients to update and retrieve information from the database This functionality allows the server to effectively simulate direct communication between clients.

To ensure the integrity of the collaborative artwork, a global database was essential for storing representations of the images This database played a crucial role in providing persistent storage for the collaborative pieces, maintaining their state over time.

To ensure accurate access to the shared database, effective synchronization methods were established These methods are crucial in preventing errors, such as race conditions, that can arise when multiple clients attempt to modify data concurrently.

4 Create dynamic attributes to drawing primitives

A system was developed to facilitate interaction between individual distributed drawing programs and a centralized global database, enabling efficient updates to both the global art collection and individual artworks.

After creating a functional interactive program, it became essential to incorporate animated features These enhancements include animated sprites, sprites with trails, polar coordinate trails, particle systems, and the timed removal of items from the digital canvas Additionally, the program allows for time-varying attributes for sprites and other graphical elements, such as changes in color, size, position, and shape.

6 Add advanced features to drawing program

Once the core functionalities of the project were successfully implemented, advanced features were introduced These enhancements enabled users to select and modify various images, create new images, and delete any objects they had added, enhancing the overall user experience.

The success of the project hinged on determining whether it met its completion criteria, specifically achieving the first five goals In addition to reaching these objectives, the program developed needed to demonstrate practical utility The effectiveness and usefulness of the project were assessed through various evaluation methods.

1 Evaluating the number of users able to simultaneously use application

2 Evaluating the latency for updates under load

Evaluating the program with a diverse group of users is essential to identify useful features, uncover any missing elements, and determine areas for improvement.

This chapter is dedicated to the organization of all design aspects that were needed in the development of this project.

Programming Language Selection

The initial critical design decision for this project involved selecting the appropriate programming language for development Given that the application was intended to be networked, several languages were considered Ultimately, the choice was narrowed down to four contenders: C, C++, Visual Basic, and Java.

Using C or C++ offers familiarity and strong networking capabilities, along with the ability to create CGI (Common Gateway Interface) scripts for web integration However, these languages present challenges in developing graphical applications due to their complexity, making it difficult to create user-friendly interfaces Additionally, CGI scripts are server-side applications, which limits user interaction A significant drawback is that applications developed in C or C++ are platform-dependent, requiring code rewrites to adapt to different operating systems, ultimately restricting user access and undermining the goal of creating a universally accessible collaborative art program.

Visual Basic offers several advantages, including its user-friendly nature and ease of developing graphical applications However, it has notable disadvantages, particularly in its lack of local networking capabilities, which necessitates the use of third-party drivers or applications for network functionality Additionally, like C and C++, Visual Basic is limited by platform restrictions, as its applications can only run on Microsoft systems.

Windows operating systems This restriction limits the number of users that will be able to interact with the application.

Java offers significant advantages over other programming languages, with platform independence being a key benefit Java applications run on a Java Virtual Machine (JVM), which interprets the compiled intermediate byte code This means that as long as an operating system has a compatible JVM, Java applications can be easily transported and executed without the need for recompilation, enhancing their versatility across different platforms.

Java offers the unique advantage of enabling developers to create both stand-alone applications and Java Applets, which are Java applications that operate within web browsers This capability shifts control of the Java program from the operating system to the web browser, enhancing its versatility However, prior to the launch of "Java 2," compatibility issues arose, as not all web browsers could support the latest versions of Java, with some only able to run modified versions The release of the Java 2 browser plug-in by Sun Microsystems in June 1999 addressed these challenges, making Java both operating system and browser independent.

Java is an excellent programming language due to its robust graphical and networking capabilities It offers a wide range of built-in image manipulation and drawing routines, streamlining project development Additionally, Java simplifies networking through its user-friendly Socket class, allowing developers to easily create network sockets by simply instantiating a Socket object with a host name and port number, while the underlying complexities are handled by Java itself.

Despite its numerous advantages, Java has notable disadvantages, primarily due to my limited experience with the language and its extensive libraries Additionally, Java lacks the stability of other programming languages, as it is still undergoing development Unlike C and C++, Java continues to have bugs discovered within its low-level code, which can lead to unforeseen issues in programming.

After weighing the pros and cons of various programming languages, I chose Java as my primary language due to its platform independence and compatibility with web browsers Opting for the latest version, Java 2 (v1.2.2), was straightforward, as it addressed numerous bugs from earlier versions, offered greater stability, and utilized the new Java web browser plug-in.

Operating System Selection

This project is targeted at all of the “Java 2” enabled operating systems During this projects duration, these included:

Others operating systems may be tested in the future.

Database Selection

To effectively manage collaborative images and ensure their persistent storage, a reliable database is essential I evaluated three different database options: Microsoft SQL Server, Microsoft Access, and Oracle.

After evaluating three databases, I concluded that Oracle is the optimal choice for this project due to its availability at Worcester Polytechnic Institute and the option to download Oracle 8i Personal Server for non-commercial use In contrast, Microsoft SQL Server proved too costly for personal use and was not accessible through academic sources Additionally, while Access is available through the school and user-friendly, preliminary tests indicated it lacks the robustness and reliability of Oracle, often returning errors with basic queries Oracle's strong reputation for being robust and easy to work with further solidified my decision.

Oracle has been chosen as the primary database for the project, while Microsoft Access will serve as a backup and testing database due to its low memory requirements, enabling efficient multitasking of various applications In contrast, Oracle's higher memory demands limit its ability to handle multiple tasks simultaneously.

Architecture Overview

This project aims to implement a three-tiered architecture, as illustrated in Figure 4.13 The first tier, known as the client application, handles all user interactions, including drawing and removing items Additionally, this tier is responsible for maintaining the visual representation of the current image.

The server application serves as the second tier in a multi-tier architecture, facilitating a virtual connection between clients and the database tier It maintains active connections with both the database and clients, enabling efficient data retrieval and storage When a client requests data from the database, the server retrieves the necessary information and transmits it back Conversely, if a client needs to store data, the server ensures that the information is accurately saved in the database.

The final tier is the database This tier provides persistent storage for the client.All image data is stored in the database to be retrieved by a client request

Figure 4.13: Flow chart of overview look at project

Figure 4.13 illustrates the relationship dynamics among the various tiers, highlighting a 1 to n relationship between the Server and Client tiers, allowing multiple clients to interact with a single server Additionally, there is a 1 to 1 relationship between the Server and the Oracle database, which mitigates issues that may occur when multiple servers attempt to access the database concurrently.

Client Design

Drawing Tool Manager

The Drawing Tool Manager (DTM) is the primary governing level in the client application, responsible for managing the storage and functionality of drawing tools Upon selecting a new drawing tool, the DTM deactivates the current tool and updates it accordingly, subsequently processing and transmitting the actions of the newly selected drawing tool.

Basic Object and Display Manager

The Basic Object and Display Manager (BODM) has two primary responsibilities: managing the displayed image and overseeing the storage of all objects that constitute the current image To efficiently refresh the on-screen image, BODM utilizes a double-buffered design, where images are first drawn to an off-screen buffer instead of directly to the display This method prevents flickering that can occur when different parts of the image are rendered individually, especially during animations, ensuring a smoother visual experience.

Double buffering enhances the efficiency of image refreshing by eliminating the time required to recreate the displayed image With an off-screen buffer storing the current image, it can be directly rendered to the screen, streamlining the process For instance, when creating a line art image of a tractor by drawing horizontal lines, directly rendering to the screen would make the drawing process visible to the user and increase I/O processing demands.

To enhance image display efficiency, utilizing an off-screen buffered image eliminates the need for multiple I/O operations, significantly reducing wait times Instead of recreating the image each time it needs refreshing, a single I/O action suffices to show the buffered image all at once, providing a seamless viewing experience This approach not only streamlines the process but also allows for quick refreshes without the lengthy recreation of the image, ultimately improving user satisfaction.

To enhance efficiency, the BOMD utilizes the concept of clipping, which restricts the modifiable area of the screen to a specific subset known as the clipping area This limitation allows for faster and more efficient updates by focusing modifications on a smaller portion of the screen.

In the second phase of the initial task, new objects are integrated into the existing image by reconstructing it from all saved drawing elements Initially, the new object is added, followed by the sequential rendering of all objects onto an off-screen buffer based on their creation order Finally, this buffer is presented on the screen for display.

The BODM's second task involves managing the storage of all drawing objects in the current image, utilizing two distinct data structures One structure stores locally created objects, while the other is designated for external drawing objects, such as those downloaded from the server This dual-structure approach enhances efficiency by eliminating the need for additional processing time that would be required to verify whether an object was created locally.

Advanced Object and Network Manager

The Advanced Object and Network Manager (AONM) serves as the top-level manager within the client core, facilitating the management of animation objects It also enhances network functionality by enabling seamless uploading and downloading of object data between the server and clients.

The Animation Generator is responsible for generating all parameters necessary for creating an animated object, while the AONM takes charge of producing the actual animation Additionally, the AONM must equip the animation object with the required animation capabilities In cases where an animation object is downloaded from the server, it is also the AONM's duty to recreate the animation object from its stored state.

The name of the layer describes it as an Advanced Object manager The lower two layers only manage objects and tools that relate to drawing images onto the screen.

The AONM is responsible for managing all non-drawing related tools, including the removal of objects from images To ensure effective control, it must possess the authority to override the functionalities of the two lower levels.

The AONM manages all communication between the client application and the server by first establishing a socket connection when an update is requested It then uploads newly created drawing and animation objects to the server, followed by downloading any new object data Non-animated objects are subsequently processed by the lower layers.

Tool Selector

The Tool Selector is an intuitive user interface module designed for users to easily choose their active drawing tool It effectively transmits the selected tool information to the core layers for seamless processing.

Color Selector

The Color Selector is an intuitive user interface module that enables users to choose their desired drawing color Upon selection, it transmits the color information to the core layers for processing, ensuring a seamless drawing experience.

Animation Generator

The Animation Generator is designed to produce all necessary parameters and options for creating animation objects It features a user-friendly interface that allows users to easily access and modify various animation parameters When a user initiates the creation of an animated object, the Animation Generator transmits the relevant parameter and option data to the AONM layer, which utilizes this information to generate the new animation object.

Drawing Objects

Drawing objects empower users to manipulate graphical images effectively, featuring two primary categories: animated and non-animated objects With these tools, users can enhance collaborative images by incorporating elements such as lines, circles, animated cubes, and various other shapes.

Non-animated objects are static entities that maintain consistent attributes over time For instance, a drawn line serves as a perfect example; once it is incorporated into an image, it remains unchanged in shape, color, and position.

Figure 4.16: Flow chart of non-animated object creation

The design of the non-animated objects is relatively simple Non-animated objects are

Users can create objects on the current image by utilizing a drawing tool, which allows them to control the process with a mouse pointer As users draw, the tool generates the corresponding object, which is then displayed on the screen and saved in the client's Image Storage buffer.

Animated objects are those objects whose attributes and/or locations change with time.

An animated object, such as a rotating cube, enhances visual appeal by continuously altering its image, creating the illusion of a three-dimensional rotation.

Figure 4.17: Flow chart of animated object creation

Designing an animated object involves more complexity than that of a non-animated object, as the user does not simply draw it onto the screen Instead, users select various attributes for the animated object before incorporating it into the image Once added, the animated object is stored similarly to non-animated objects, but it initiates an animation loop instead of being displayed directly This loop refreshes the animated object's appearance after a set timeout, allowing for continuous animation and an engaging visual experience.

User Interface

The client application's User Interface is designed with user familiarity in mind, making it easier for users to adapt to the new application By mirroring the interface of well-known applications, particularly that of Microsoft, the design facilitates a smoother learning curve for users.

Paint application A vast majority of users have either used or seen this application making it a good basis for the interface.

Figure 4.18: Microsoft paint user interface broken down to its essentials

The layout of the Microsoft Paint application features a user-friendly interface, beginning with a drop-down application menu at the top, which may also include optional toolbars On the left side, users find a dedicated section for drawing tools, a common design in many commercial drawing applications Below these tools are easily accessible options for customization At the bottom of the interface, users can modify drawing colors, while the largest area is reserved for the drawing canvas itself, allowing for an expansive workspace.

One advantage of this interface style is its accessibility, as most tools and options are conveniently located within the tool or color sections This strategic placement enables users to quickly navigate and comprehend the application, enhancing their overall experience.

Server Design

Operations

The server facilitates multiple operations for connected clients, including creating client IDs, providing time synchronization values, retrieving names of editable images, and updating or retrieving image data This setup creates the illusion for clients that they are directly engaging with the database, while in reality, the server manages all interactions with the database.

The client ID serves as a unique identifier assigned by the server to each client, enabling both the server and other clients to distinguish the data contributed by each individual in a collaborative image.

The implementation of animated objects that rely on their creation time necessitates that all clients maintain a consistent time, irrespective of their time zone or computer clock To achieve this, the Time Synchronization Value (TSV) is established, ensuring global time alignment between the server and clients The TSV is calculated by determining the time difference between the client and server.

The server can retrieve all editable image names, allowing the client to identify the current images in the database and select one for modification.

These operations ensure that clients have persistent storage capabilities When an update occurs, the server collects all client information, validates the input, and securely stores it in the database For data retrieval, the server accesses the requested image data from the database and sends it back to the client.

Database

In this project, the necessity of a database is debatable; it can function without one, as the server can effectively manage data using internal structures for storing and retrieving information.

The free database scheme presents significant limitations, primarily due to server complexity and the risk of losing reliable persistent storage As data management tasks like sorting and retrieving information increase, the server must expand, resulting in more intricate code that is challenging to maintain and debug Additionally, if the server experiences a shutdown, all data within its internal structures may be lost Even with file storage, there is a risk of corruption or data loss if the server crashes during read or write operations.

The database scheme, while having limitations such as the server's minimal control over storage methods, offers significant advantages that often outweigh these drawbacks By utilizing an external database, data management is effectively offloaded from the server, allowing for streamlined storage and retrieval of specific information without complicating the server's architecture A key benefit of this approach is the provision of persistent storage; even if the server experiences downtime, the database remains unaffected, ensuring that stored information can be easily accessed once the server is back online.

In designing a database, a critical consideration is the type of information to be stored, including timestamps for when objects are added or removed from collaborative images This data enables clients to accurately update displayed images Additionally, the database must track the relationship between each object and its corresponding image, enhancing search efficiency for specific objects within an image Moreover, the database should store individual object data, which is essential for clients to recreate images from the stored information.

Communication

Client / Server

A client interacts with a server via a TCP/IP connection, ensuring a reliable and error-free communication link Data is exchanged through structured data frames, which contain commands and information for transfer These frames utilize character delimiters to define their boundaries and internal elements, while character stuffing is employed to prevent misinterpretation during parsing.

Server / Database

The server connects to the Oracle database through the java Database Connectivity (JDBC) API Sun Microsystems describes the JDBC technology as:

“JDBC TM technology is an API that lets you access virtually any tabular data source from the Java TM programming language It provides cross-

The new JDBC API enhances DBMS connectivity by enabling access not only to a variety of SQL databases but also to other tabular data sources, including spreadsheets and flat files.

The JDBC API necessitates a driver to facilitate communication between JDBC technology and the database, typically available for download from the database provider's website For Oracle databases, the JDBC driver can be obtained directly from Oracle's site This API enables applications to execute SQL queries, allowing them to send requests to the database and receive query results efficiently.

Evaluation

An effective evaluation is crucial for assessing the usefulness and quality of the InterDraw project This evaluation consists of two main components, with the first being user testing User testing offers valuable feedback on the program's functionality and resilience in real-world scenarios, while also aiding in the identification and resolution of previously unnoticed bugs within the application.

The second phase of the evaluation involves a user survey designed to gather feedback on the InterDraw program This survey consists of three distinct sections: the first section collects general demographic information about the users; the second section includes questions that assess the program's effectiveness, quality, and usefulness; and the final section allows users to share their opinions, offering suggestions for improvements as well as highlighting aspects they appreciated or disliked.

This chapter introduces InterDraw, an innovative interactive collaborative art program designed to foster a creative environment where users can join forces to merge their artistic skills and produce distinctive graphical images.

Client Implementation

Drawing Tool Manager

Figure 5.20: Flow layout of the Drawing Tool Manager

The Drawing Tool Manager (DTM) serves as the foundational layer among the three core components, responsible for storing the active drawing tool and overseeing its actions This process is streamlined as the tools themselves handle the majority of their actions, which will be elaborated on in subsequent sections.

The DTM consists of two main components: the Mouse Handler and the Set Tool module The Set Tool module's primary function is to update the Current Tool with any new tool selected by the user through the Tool Selector When a new tool is chosen, it is sent to the Set Tool component, which then deactivates the currently active tool and activates the newly received tool, designating it as the Current Tool.

The Mouse Handler is the second component of the DTM, responsible for monitoring all mouse events within the application While it receives all mouse events, it only acts on the Mouse Release Event When the Current Tool is active, a Mouse Release Event indicates the creation of a new object in the current image Upon receiving this event, the DTM forwards the Current Tool to other layers for additional processing.

Basic Object and Display Manager

Figure 5.21: Flow chart of the Basic Object and Display Manager

The Basic Object and Display Manager (BODM) serves two primary functions: it oversees the management of the displayed image and handles the storage of all objects that constitute the current image.

The BODM utilizes a double buffering technique, employing two distinct buffers: one for static background graphics and another for dynamic foreground graphics The background buffer retains unchanging images, while the foreground buffer displays temporary graphics that can be easily overwritten This method is crucial for handling animated graphics, as it prevents the loss of background images when animations are drawn By using the foreground buffer for animations, the background graphics remain intact, allowing for seamless repositioning of animated images by simply refreshing the foreground with the background buffer and redrawing the animation in a new location.

Figure 5.22: Flow chart of graphics from creation to being displayed on the screen

The Image Buffer Manager component of the BODM oversees the management of image buffers, ensuring each buffer's current state is maintained and updating the display as necessary Initially, static objects are drawn into the background buffer, from which the graphic data is transferred to the foreground buffer for display This two-buffer system becomes essential when handling temporary or dynamic graphics, as detailed in section 4.5.2.

Temporary graphics are directly rendered to the foreground buffer, allowing for easy modification or removal When changes are needed, the Image Buffer Manager can overwrite the graphic's area in the foreground buffer with the corresponding section from the background buffer This process resembles a partial display refresh, where only specific parts of the display are redrawn instead of the entire image, ensuring efficient updates by focusing solely on the affected areas.

The BODM oversees the storage, removal, and restoration of image objects Object storage is triggered when the DTM indicates the conclusion of a drawing tool action, upon a request from a different layer, or following the restoration of an image object Conversely, the removal and restoration of an object occur exclusively in response to requests from other layers.

The most common storage procedure involves storing an object based on a DTM signal The BODM retrieves a storable representation of a newly generated drawing object from the Drawing Tool, as specified in section 5.5 This representation is then stored in the Image Storage, which utilizes a Linked List data structure to facilitate easy rearrangement of the stored objects After the representation is securely stored, the DTM transmits the graphical information of the object to the Image Buffer Manager for display.

The storage of an object upon request from another layer resembles the previously described method, where the drawing object itself is transmitted instead of the Drawing Tool that generated it The BODM can directly access the graphical information and storage representation from the drawing object, processing them in the same way as outlined earlier.

Object restoration is a crucial feature of the BODM, enabling client applications to dynamically reconstruct images from stored representations of drawing objects When a layer requests the restoration of an object, the BODM receives its storage representation If the BODM cannot identify the object, such as with animated objects, the representation is forwarded to the Advanced Object and Network Manager for enhanced restoration For recognized drawing objects, the BODM retrieves them from Image Storage and recreates their graphical representation using specific restoration properties, which is then sent to the Image Buffer Manager for display.

The BODM's final capability is to remove objects from images To initiate this process, either the object's storage representation or its Object ID, which is included in each storage representation, must be provided to the BODM Once received, the specified objects are deleted from Image Storage If the object being removed is static, the background buffer must be reconstructed by reintegrating all objects that occupied the area of the removed object.

Advanced Object and Network Manager

Figure 5.23: Flow chart of the Advanced Object and Network Manager

The Advanced Object and Network Manager (AONM) is responsible for overseeing the creation, restoration, and animation of objects, while also facilitating the networking functions necessary for uploading and downloading object data to and from the server.

The AONM consists of five key components: the Socket Manager, the Advanced Object Restore Manager, the Animation Creator, the Animation Loop, and the Update component This section will provide a detailed overview of each of these components.

Figure 5.24: Network communication using the Socket Manager

The Socket Manager is responsible for maintaining a TCP/IP socket connection with the server and managing all communication through this connection It receives object data, command types, and necessary information to construct the communication frame Once all required details are gathered, the Socket Manager builds and sends the communication frame to the server Additionally, when a communication frame is received, the Socket Manager parses it and delivers the individual data back to the requesting component.

The Advanced Object Restore Manager enhances the restore capabilities found in the BODM by allowing the restoration of animated objects and any future object types, unlike the BODM's restore component, which is limited to basic static object types.

When restoring an object from another layer or module within the AONM, the drawing object's restore capability is utilized to regenerate its graphical representation This representation, along with its storage format, is then transmitted to the BODM for both storage and display purposes In cases where the object is animated, the Animation Loop manages the object's animation seamlessly.

The Animation Creator is tasked with generating animation objects by utilizing parameter information from the Animation Generator This data includes essential details about the animation's class, such as the class name, constructor, and specific parameters By leveraging this information, the Animation Creator dynamically constructs each unique animation object.

Once the animation object is created, its graphical and storage representations are transmitted to the BODM for both display and storage Subsequently, control of the animation object is handed over to the Animation Loop, which manages the object's animation process.

Figure 5.25: Flow chart of animation loop

The Animation Loop enables animation objects to refresh their images on the display by iterating through each object and prompting them to update their visuals It instructs each animation object to remove its previous graphical representation and replace it with a new one by communicating with the BODM After processing all animation objects, the loop enforces a 100-millisecond delay, which was determined through performance testing to optimize the animation experience This cycle repeats, ensuring smooth and dynamic animations.

Each animation object can possess its own animation capabilities; however, this approach significantly increases memory usage due to the necessity of individual timing threads for each object As the number of animated objects grows, so does the number of threads, which can lead to substantial application slowdowns over time In contrast, my chosen implementation utilizes a single thread to update all animated objects, mitigating memory concerns The trade-off, however, is that the refresh rate for the animated objects may decrease as more objects are incorporated into the scene.

Figure 5.26: Flow chart of image update in Update Component

The Update Component plays a crucial role in transmitting new image data to the server and refreshing the image with the latest data received Updates occur in response to an update request, which may stem from user actions prompting an update or from a background thread that routinely refreshes the image data.

Upon receiving an update request, the Update Component fetches new object data from the BODM that has been added since the last update This data is then forwarded to the Socket Manager for transmission to the server Subsequently, the Socket Manager receives data from the server, which may include objects that need to be removed or restored, and sends this information to the BODM for further processing.

Tool Selector

Figure 5.27: Flow chart of Tool Selector

The Tool Selector is an intuitive user interface module designed for selecting the active drawing tool, featuring two main components: a Tool List and a Mouse Handler The Tool List displays all available tools along with their corresponding buttons, while the Mouse Handler manages all mouse events Upon detecting a Mouse Release event, the Tool Selector determines if a tool has been selected by checking if the mouse release location falls within the bounds of any selectable button Once a tool is selected, it is forwarded to the core layers of the client application for further processing.

Color Selector

Figure 5.28: Flow chart for Color Selector

The Color Selector, akin to the Tool Selector, is a user-friendly interface that enables users to choose their drawing color As depicted in Figure 5.28, it consists of three main components: a Color List, a Mouse Handler, and a JColorChooser The Color List features a selection of basic colors with interactive options The Mouse Handler functions similarly to that of the Tool Selector, detecting Mouse Release events to verify if a color has been selected from the list This selection process mirrors the one used in the Tool Selection Mouse Handler, and upon selection, the chosen color is transmitted to the core layers of the client application for further processing.

JColorChooser is a Java Swing class that provides a sophisticated color selection dialog, enabling users to create custom colors by adjusting various parameters The Color Selector offers an interactive interface for the JColorChooser, which, when selected, opens the color dialog for the user Once a color is chosen, it is transmitted to the core layers for further processing.

Animation Generator

Figure 5.29: Flow chart for Animation Generator

The Animation Generator is designed to produce all necessary parameters and options for creating animated objects It operates through three key components and a Create Event, which together facilitate the generation of these essential elements for animation creation.

The Animation Select features a user-friendly interface that enables users to choose animated objects from a straightforward one-dimensional array This array consists of various active animated objects, allowing for efficient tracking of the selected item based on its position within the array.

The interface generates two events: a NEXT event and a PREVIOUS event.These events are generated through the selection of Next (‘>’) and Previous (‘ ) ORDER BY insert_dt;

The query results in a record set containing all image data objects for the specified image that have not been removed from the image or expired

WHERE (NOT (user_id = )) AND

(image_nm = ) AND (insert_dt > ) AND (removal_dt is NULL) AND (death_dt > ) ORDER BY insert_dt;

The query retrieves a set of image data objects that meet specific criteria: they must have been added after a certain date, remain active, not be expired, and should not have been uploaded by the designated user.

SET removal_dt =

WHERE (user_id = ) AND

(image_nm = ) AND (object_id = );

The query sets the removal_dt field of the stored data object specified by the user

ID, image name and object ID, to the current date This action effectively removes the image date from being returned by any of the other database queries.

Image Representation

StoredObject representation

The StoredObject class plays a crucial role in client applications by managing the current state of displayed images and tracking uploaded or downloaded objects from the server It preserves all necessary attributes to visually restore image objects on the screen, as detailed in Table 5.4, which outlines the parameters essential for maintaining these attributes.

The Object ID is a unique string identifier for objects within a client, formed by merging the client ID with a two-character string that increments as specified in section 5.2.1.1.

Object Type An integer value that represents the type of the object represented by the StoredObject class.

Creation Date A long integer representing when the object was created in order to maintain the correct drawing order of the objects.

Expiration Date A long integer representing when the object will no longer exists within the image.

Object Color A Color class that represents the base color for the object.

Object Bounds A Rectangle object that represents the area encompassed by the object

Extra Data A character string containing more object specific information

(same format as described in section 5.5.2.2).

Table 5.4: Parameters maintained by StoredObject class

The client utilizes two Linked List structures to manage StoredObject classes: one for locally created objects and another for server-imported objects This dual-list approach simplifies management by eliminating the need to distinguish between local and imported objects, as identification now only requires checking the respective Linked List for containment.

A Linked List structure was chosen over a Hash Table or Java Vector due to its flexibility in inserting objects between others When an object is downloaded from the server, it may have an earlier creation time than previously downloaded objects To ensure the correct display order, this object needs to be positioned accurately within the Linked List, which is organized from the oldest to the youngest This insertion process is straightforward with a Linked List, making it a more suitable option compared to other data structures.

Character String Representation

The character string representation of an image object facilitates the transfer of object data between the client and server, as well as its storage in a database This representation is divided into two components: the header, which provides general information about the image object, and the object-specific data, which contains details pertinent to each individual image.

The header is a 42-character string containing general information about the image object It is similar to the attributes stored in the StoredObject representation

Figure 5.54: Header format for character string representation

The header section of the character string representation, as shown in Figure 5.54, consists of several key components The initial two characters indicate the object type, while characters 2 and 3 provide the RGB color representation of the object's base color Characters 4 through 7 represent a long integer denoting the object's creation date and time, and characters 8 through 11 indicate when the object will be removed from the image The subsequent eight characters (12-19) detail the object's bounds, with the first two characters representing the upper left x value, the next two for the upper left y value, and the final four characters indicating the length and width of the bounded area Finally, the last 22 characters of the header create a unique object ID for the image object.

In programming languages like Java, characters can represent both integers and long values, despite the differences in bit size For instance, with an 8-bit character system, 16-bit integers are split into two characters, resulting in a character string representation such as {ASCII (256), ASCII (256)} for an integer value of -1 Similarly, a long integer value of -1 is converted into a character string of four characters: {ASCII (256), ASCII (256), ASCII (256), ASCII (256)} This conversion process is visually depicted in Figure 5.55.

Figure 5.55: Integer and long integer conversion to character representation

The object data segment of a character string representation holds unique information for each image object, categorized into three main types: animated sprite objects, rubberbanding objects, and free drawing objects Each type features a distinct format for storing its unique data, which is elaborated upon in the subsequent sections.

Figure 5.56: Free Drawing object storage format

Free drawing objects meticulously track mouse movements to create accurate paths for tools like freehand drawing and airbrush painting To maintain this precision, all recorded locations are stored within the object's representation The first two characters of the drawing object's data indicate the total number of points in the recorded path, denoted as N The subsequent N*4 characters represent the actual xy coordinates of the drawn path, organized in blocks of four characters, where the first two denote the x value and the last two represent the y value of each point Additional characters following the location data pertain to specific classes that extend the Drawing object class.

Rubberband objects are dynamic shapes, such as lines, rectangles, and ellipses, that visibly alter their form as they are integrated into an image These objects are defined by an invisible boundary box established by the user, facilitating their creation and manipulation.

Figure 5.57: Example showing how a Rubberband object is created

To effectively represent a rubberband object, it is essential to include the location and dimensions of its boundary box This data is stored in two parts: the top left xy coordinates are recorded in the first four characters, while the bottom right xy coordinates are captured in the subsequent four characters, as illustrated in Figure 5.58 Each set of four characters consists of the first two characters indicating the x value and the last two representing the y value Additionally, any characters that follow the boundary box specification pertain to classes that extend the Rubberband object class.

Figure 5.58: Rubberband object storage format

Figure 5.59: Animated sprite object storage format

Animated sprite objects can include a variety of visuals, from rotating 3D models to a series of changing images Unlike Rubberband or Drawing classes, animated sprites do not retain location or bounding box data Instead, they contain two serialized objects: an AnimationPath, which tracks the current displayed location of the animated object, and a Sequence class, which serves as the image generator for the sprite, providing the next image in the animation sequence.

Evaluation

The evaluation of the InterDraw project consisted of two key steps: user testing and a user survey In the first step, users tested the application across various computers, internet connections, operating systems, and browsers to assess its performance under both high and low-stress conditions The second step involved a user survey designed to gather specific insights regarding the application's usefulness and durability.

A dedicated user testing website was created to facilitate the evaluation process for InterDraw, offering testers essential background information through an online user manual that details the program's features The website was designed for seamless navigation, allowing easy access to both user testing and survey sections, conveniently located in the left menu frame This layout ensured that testers could access the user testing and survey components at any time, regardless of the content displayed in the right frame.

The user testing server application was configured on a Dell Inspiron 3500 equipped with a Pentium II 400 MHz Intel processor, utilizing an Oracle database owned by WPI for data storage Each client connection to the server generated a log detailing the client's IP address and connection date, which was essential for analyzing the server's load and connection rates during testing.

The user survey featured 14 questions, including a comment section, with the initial four designed to gather demographic details like name and connection speed The subsequent seven questions utilized a yes/no format or a scale from 1 to N (where N is either 5 or 10) to assess users' opinions about the program These inquiries explored various aspects, including the ease of learning the program and overall user enjoyment.

The survey included three questions enabling users to suggest additional features and identify any aspects they believed should be eliminated from the application It also provided a section for users to report any bugs encountered during their testing Finally, a comment section was included, allowing users to share any additional thoughts or relevant information regarding the project.

Upon submission of the survey, the data entered by the user was processed by a CGI script, which efficiently inserted the information into a database This database allowed for straightforward sorting and analysis of the collected data.

For a look at a text version of the web-based survey, see Appendix A

This section presents the evaluation results and insights gathered from the testing of the InterDraw program, highlighting user responses and the variety of images created through collaborative efforts For detailed charts and data, please refer to Appendix D.

User Testing Results

User testing occured over a period of two and a half weeks During this time period over

A total of 55 distinct computers successfully engaged with the InterDraw program, excluding instances of multiple users accessing the program on the same machine at different times This indicates that the actual number of users testing InterDraw could be significantly higher Although this figure serves as a rough estimate, it offers valuable insights into the program's usage and user experience.

Nearly half of the 55+ computers utilized in user testing for the InterDraw application originated from outside the WPI domain, as shown in Figure D.3 This included devices from various states such as Colorado, Florida, Massachusetts, Michigan, and Vermont, highlighting the diverse user base involved in the testing process.

During the user testing period for the InterDraw program, Figure D.1 depicts daily user engagement, revealing a peak of approximately 22 users on the busiest day On average, the program saw between 3 to 5 users daily, excluding days with no user activity.

Figure D.2 illustrates the hourly user activity for the InterDraw program during the testing phase, excluding periods of inactivity This data helps identify the number of simultaneous users connected to the InterDraw application, revealing a maximum server load of 7 users at peak times, while the average load remained consistent throughout the testing period.

Figure D.4 illustrates the connection speeds utilized during user testing, predominantly featuring T1 or faster Internet connections, alongside a range of slower options from 28.8 bps modems to DSL A key aspect of the InterDraw program is its accessibility, necessitating optimal performance across all connection speeds The findings indicate that users evaluated InterDraw across a diverse spectrum of connection speeds.

The InterDraw server demonstrates its capability by managing at least seven simultaneous connections, although a higher tested number would have been beneficial Server logs reveal that the primary issue affecting these connections is the increased upload and download times, attributed to the server's synchronization methods These methods permit only one client to access the database at a time, resulting in delays for other clients attempting to connect while the database is occupied.

User Survey Results

The user survey results fell short compared to the user testing data, with only 27 out of 55+ participants submitting feedback Notably, just 3 of these responses came from non-WPI students While the survey lacked diversity relative to the user testing, it still offers valuable insights into users' perspectives on the InterDraw program.

Figure D.5 displays user responses regarding the clarity of buttons and icons within the program, aimed at assessing the effectiveness of the user interface The results indicate a high level of satisfaction, with most users finding the buttons and icons easy to understand.

A survey question assessed how easily users learned to use the InterDraw program, as illustrated in Figure D.6 Unlike the previous question, the results were more varied; while most users found the program easy to learn, a small minority experienced difficulties These findings indicate that further improvements are necessary to enhance the user-friendliness of the InterDraw program for all users.

In response to the previous inquiry, users evaluated the ease of use of the InterDraw program The majority reported that the program was user-friendly, while a minority experienced difficulties or confusion These findings highlight the need for further improvements to enhance the usability and learning experience of InterDraw.

To evaluate InterDraw's performance across different Internet connections, users rated the program's loading speed, as shown in Figure D.9 However, the results were inconclusive, revealing no clear pattern in the ratings Users with high-speed T1 connections reported varying experiences, with scores ranging from 8 for fast loading to 7 for slow loading Similarly, those on slower 28.8 bps connections rated the loading time between 3 and 8 on a scale of 10 This suggests that the loading time of InterDraw is influenced more by Internet congestion and the user's computer specifications rather than the application itself, leaving us unable to draw definitive conclusions from the survey data.

A recent survey revealed that opinions on the usefulness of InterDraw as an art tool were divided, with nearly half of users finding it beneficial while the other half did not This disparity likely stems from the user's artistic inclination; those with a passion for art may appreciate InterDraw more than those who are less interested Additionally, the limited range of basic drawing tools available in the application could contribute to its perceived lack of utility compared to other drawing applications that offer more advanced features.

Future Work

Future avenues or work to enhance the InterDraw project include:

• Adding more extensive tools and animations.

• Adding user name creation and recognition.

• Adding user-to-user interactions, such as chat rooms.

• Incorporating a proxy server on the server side to provide client routing to multiple servers and multiple data stores.

• Adding greater user interaction with the objects within the image, such as modifying object attributes after the object has been created.

These tools will significantly improve users' capacity to collaborate effectively, enabling them to produce distinctive artworks together while ensuring the collaborative process is enjoyable and engaging.

Conclusions

This thesis presents InterDraw, an innovative interactive art program designed for the Internet that combines features typical of modern graphical applications with unique collaborative capabilities The primary objective of InterDraw is to enhance communication among artists, enabling them to work together more effectively in creating distinctive graphical images Ultimately, InterDraw successfully achieves this goal, paving the way for greater collaboration in various artistic fields.

Approximately how long did InterDraw take to load? (1 being fast, 10 being slow)

Was the program easy to learn how to use? (1 being easy, 5 being hard)

Was the program easy to use? (1 being easy, 5 being hard)

Were the buttons understandable? (1 being very understandable, 5 confusing)

How would you rate this program as a useful art tool? (1 being very useful, 5 not useful at all)

How entertaining was the experience? (1 being enlightenment, 5 being an 8 hour lecture)

Would you use this program again?

Anything you would like seen added to the program?

Anything you would like seen removed from the program?

Programmer Notes

InterDraw is developed entirely in Java using the Java 2 JDK, comprising a library known as "idp," which incorporates the Oracle JDBC library and the gjt library created by David M Geary This information serves as a guide for individuals interested in modifying the InterDraw code.

Files

idp/

• AnimationPanel.java – Contains the main Animation Insertion interface. Manages the creation of the Advanced Sprite object parameters and transfer to main application.

• AnimationPathPanel.java – Contains the AnimationPath selection interface All path and parameter selection are managed within this class.

• BDirection.java – Generates a compass looking user interface for selecting a direction.

• BSlider.java – A simpler version of the JSlider Java Swing class, with the added ability of allowing the user more control in its display parameters.

• CloasableFrame.java – Provides a Java Frame that closes on a WindowClose event.

• ImageSelection.java – A user interface for selecting a string from a list of strings.Used in InterDraw to allow the user to select the current image from a list of image names.

InterDrawPanel.java is an extension of the AdvancedDrawPanel, serving as the core component of the InterDraw application This layer is responsible for managing all network communications and overseeing the creation and management of advanced objects, including animations.

The MainMenuFrame.java file serves as the primary Java Frame for the InterDraw application, initiating the application from this central interface Additionally, it houses the color selection frame, which allows users to choose their current drawing color, enhancing the overall user experience.

• ServerStatusPanel.java – Listens for ServerStatusEvents and displays a visual representation of the Server Status.

• Stopwatch.java – A modified version of the Stopwatch class by David Geary It simulates a physical stopwatch by keeping track of the passed time since a certain event.

• StopwatchClient.java – An interface used by classes to receive “ticks” from the Stopwatch, which mark the passage of time Modified from StopwatchClient class by David Geary.

• StoredObject.java – Contains a stored representation of a drawing object It is able to build and parse the string representations of all drawing objects.

• ToolButton.java – A lightweight image button, which stays down when pressed. Only one ToolButton may be pressed down at any time All others will be

“unpressed” when another is selected.

• ToolOptionPanel.java – Provides the user interface for selecting different options for a drawing tool.

• ToolPanel.java – Provides the user interface for selecting from a group of drawing tools.

• UpdateThread.java – A thread that runs in the background of the InterDraw program and generates Update events every 5 minutes to automatically update the current image.

idp/AdvRubberband/

• Rubberband.java – An abstract class for drawing tools/objects with

“rubberbanding” capabilities It provides all mouse handling and storage capabilities for these implementing classes.

• RubberbandEllipse.java – Extends the Rubberband class Generates elliptical shaped rubberbanding drawing objects.

• RubberbandLine.java – Extends the Rubberband class Generates rubberbanding line shaped drawing objects.

• RubberbandRectangle.java – Extends the Rubberband class Generates rectangular shaped rubberbanding objects.

idp/anim/

The AdvancedSprite.java class represents an animated object designed for integration within a SpriteAnimator Container It utilizes an AnimatedPath to determine its position within the Container and employs a Sequence class to manage its current image display.

• AnimationParameter.java – Holds parameter values and objects that are used to recreate an animated object.

• AnimationPath.java – An abstract class for maintaining a time based path within a certain boundary area

• CollisionArena.java – An interface for defining an area where collisions of AdvancedSprite objects may take place Modified from CollisionArena class by David Geary.

• EdgeCollisionDetector.java – Detects collisions between a boundary and an AdvancedSprite object Modified from EdgeCollisionDetector class by David Geary.

• SpriteCollisionDetector.java – Detects collisions between two or more AdvancedSprite objects Modifed from SpriteCollisionDetector class by David Geary.

• CirclePath.java – Extends the AnimationPath Class Generates a time varying path in the shape of an ellipse.

• LinePath.java – Extends the AnimationPath Class Generates a time varying path in the shape of a line or vector.

• SinePath.java – Extends the AnimationPath Class Generates a time varying path in the shape of a sine wave.

idp/anim/sequence/

• Sequence.java – An abstract class for providing a sequence of images.

• CubeSequence.java – Extends Sequence class Provides a dynamic sequence of images, creating a 3-Dimensional rotating wire-frame cube animation.

• ModelSequence.java – Extends Sequence class Provides a dynamic sequence of images, simulating a 3-Dimensional rotating wire-frame model

• ImageSequence.java – Extends Sequence class Provides a static sequence of images that may be repeated as needed.

idp/database/

• Database.java – Contains all database connection information.

idp/draw/

• AllPurposeDrawPanel.java – Implements the Drawing Tool Manager layer of the InterDraw client application It controls the selection and management of drawing tools.

• AdvancedDrawPanel.java – Extends AllPurposeDrawPanel Implements the Basic Object and Display Manager layer of the InterDraw client application, which controls the display of all basic drawing objects.

• Drawing.java – An abstract class for drawing tools/objects that require intricate

“free hand” like capabilities It provides all mouse handling and storage capabilities for these implementing classes

• DrawAirbrush.java – Extends Drawing class Generates airbrush like drawings.

• DrawPencil.java – Extends Drawing class Generates free hand line drawings.

idp/event/

• AnimationEvent.java – An Event object that is generated when an Animated object needs to be created or updated.

• AnimationPathEvent.java – An Event object that is generated when an AnimationPath has been created and needs to be updated in another object.

• ServerStatusEvent.java – An Event object that is generated whenever the connection status of the InterDraw server changes.

idp/interfaces/

• AnimationEventListener.java – An interface for objects receivingAnimationEvents

• AnimationPathEventListener.java – An interface for object receiving AnimatinPathEvents

Drawable.java is an essential interface for any drawing tool, enabling control over the associated Graphic object, defining the object's boundaries, specifying color, and determining the active status of the drawing tool.

• Fillable.java – An interface that allows a drawing object to have outline and filling options.

• ServerStatusListener.java – An interface that allows an object to receive ServerStatusEvents.

• Sizeable.java – An interface that allows a drawing object to have sizing capabilities.

• SpriteAnimator.java – An interface that allows an object to contain AdvancedSprite objects.

• Storable.java – An interface that all drawing objects must implement in order to store and restore the object.

idp/model

• Cube3D.java – Extends j class that provides the ability to easily generate and manipulate a 3-Dimensional model.

idp/net

• BusyFlag.java – A synchronization flag that provides exclusive access to data and methods.

• NetTransferObject.java – Sends and receives InterDraw object data from and to the server and client.

idp/utils

• Convert.java – Contains useful conversion utilities, such as converting an integer into two character variables.

oracle/

• Contains all classes required by the Java JDBC API to access an oracle database.

gjt/

• Contains a useful graphical library by David Geary.

Layout Help

Color Selection and Status DisplayFigure C 1: Layout of the InterDraw interface

Drawing Tool Icon Help

This button allows you to add lines to the image.

This button allows you to add rectangle shaped objects to the image. This button allows you to add elliptical objects to the image.

This button allows you to add free hand lines to the image.

This button allows you to add free hand lines to the image using an airbrush effect.

This button allows you to remove drawn objects from the image

*Note: you can only remove objects that YOU create and not those created by others*

This button allows to you to select a different color than the basic ones displayed.

Table C 1: Description of the drawing tool icons

Menu Help

Image Select Allows you to either select another image to work on or create a new image.

The system will automatically send updated information to the server and refresh your image with any new objects added by other users However, this feature will be disabled if the connection to the server is lost Additionally, updates occur automatically every five minutes.

Check Checks to see if a connection can be made to the server

Animation Insert Allows you to create an animated object to add to the current image.

Table C 2: Application menu option descriptions

Status Image Help

A connection to the server has not been established.

Attempting to connect to the server.

Connection has been made to the server Sending image data to server

Receiving image data from server The connection to the server was lost

An error has occurred on the server.

Animation Help

Main Interface

Figure C 2: Screen shot of Animated object creation screen

The main interface is divided into three distinct sections: the left section features option buttons for setting various animation parameters, the center section provides descriptions of the selected animation attributes, and the right section displays an active view of the animation along with its description.

Option Buttons

The Set Position feature enables users to define the initial location of an animated object By selecting this option, you are redirected to the main application, where you can click on the drawing area to choose your desired position.

Set Path Allows you to select a path for the animated object to follow Brings up a path selection dialog.

Not Implemented Will allow user to modify animation specific options.

Animation Creates the animated objects and adds it to the current image.

Cancel Closes animation creation dialog and returns you to the drawing screen.

Information Section

Initial Position x and y screen position of the starting location for the animated object.

Selected Path A text description of the selected path the animated object will follow.

Life Span An editable field that allows the user to specify how long the animated object will last within the current image The time is specified in seconds.

Table C 5: Descriptions of the information being displayed in the information

Animated Object Selector

Move through the list of animated objects that are available for insertion into the current image Currently only 2 sample animations have been implemented and added to this list.

Description A text description of the displayed animated object.

Table C 6: Descriptions of the objects contained within the Animated object selection section of the Animated object creation screen

Animated Path Dialog

Figure C 3: Screen shot of path selection screen

The following table contains a listing of all available path types and their options.

Direction Allows the user to specify the direction of the path.

Path speed can be defined as the length of a vector representing the path's direction For instance, if the path is oriented to the right, the normalized vector would be (0, 1) To achieve a speed of 20, the vector's length must correspondingly be 20, resulting in a line vector of (0, 20).

Ellipse Path X Radius Allows the user to specify the width of the elliptical path.

Y Radius Allows the user to specify the height of the elliptical path.

The Delta angle refers to the incremental change in angle used to determine the next position along an elliptical path For instance, with a Delta angle of 10 degrees, the trajectory will progress in an elliptical pattern at angles of 0, 10, 20, 30, 40, and so on, up to 360 degrees.

Sine Path Amplitude Allows the user to specify the amplitude of the sine wave used in the sine the path.

Frequency Allows the user to specify the frequency of the sine wave used in the sine path.

The Delta angle represents the incremental change in angle used to determine the next position along an elliptical path For instance, with a Delta angle of 10 degrees, the trajectory would follow a sine pattern at intervals of 0, 10, 20, 30, 40, and so on, up to 360 degrees, which can also be converted into radians.

Figure C 4: Descriptions of the settable options available for each path type

Quantitative Information

Figure D 1: The number of unique user connects per day during user testing

Figure D 2: The number of unique connections per hour during user testing

Figure D 3: The number of computers within the WPI domain used for in user testing Vs the number of computers outside of the WPI domain

Figure D 4: The connection speeds of the computers used in user testing

Qualitative Information

Understandability of Buttons (understandable to incomprehensive)

Figure D 5: Results of survey as relates to the understandability of the buttons used in the InterDraw application

Figure D 6: Results of survey as relates to how easy the InterDraw program was to learn

Ease of Use (easy to difficult)

Figure D 7: Results of survey as relates to how easy the InterDraw application was to use

Entertainment Factor (a lot to none)

Figure D 8: Results of survey as relates to the entertainment level of the users from using the InterDraw application

Loading Speed (quick to slow)

Figure D 9: Results of survey as relates to the loading time of the InterDraw application and the speed of the user's connection

Usefulness as an Art Tool (useful to not useful)

Figure D 10: Results of survey as relates to the usefulness of the InterDraw applications as a useful art tool

Figure D.11: Results of survey illustrating the number of users who would use the

InterDraw application again Vs those who would not

Sample Collaborative Images Created With InterDraw

Image 1

Image 1 illustrates the transformative power of artistic interpretation, showcasing how one artist's serene ocean view evolves through the contributions of others Initially calm, the scene gains depth with the introduction of birds, clouds, and a boat, enhancing its tranquil atmosphere However, the final artist dramatically alters the mood by incorporating a hunter aiming at the birds from a camouflaged boat, shifting the overall tone of the artwork.

Image 2

Image 2 showcases fewer iterations than image 1, yet it clearly reflects the diverse artistic interpretations The original scene features a serene depiction of a surfer riding a calm wave, which is dramatically altered by the next artist who introduces a giant shark attacking the surfer Continuing this theme, the subsequent artist adds a missile soaring towards the shark, further intensifying the scene.

Image 3

Image 3 showcases a unique collaboration between two artists who simultaneously modified the same image, resulting in an unchanging overall theme throughout its progression Notably, both artists contributed by adding buildings to the scene, leading to unexpected outcomes due to their overlapping efforts Ultimately, their collaboration culminated in a cohesive and finalized image that reflects their joint creative vision.

Image 4

Image 4 exemplifies a lack of direction, indicating that the original artist began without a clear goal This randomness is also evident in the subsequent works of other artists, who contributed elements haphazardly The final result is a distinctive piece that showcases the creativity born from the collaboration of multiple artists.

Figure E 7: Partial progression of image 4

Figure E 8: Final progression of image 4

Where to get InterDraw

InterDraw is a free, open source application and may be obtained at http://davis.wpi.edu/~InterDraw/.

How to compile and run

To compile the InterDraw application, you need Java 2 JDK version 1.2.1 or higher, which can be downloaded from Sun Microsystems at http://java.sun.com/ After downloading, utilize the javac compiler in the JDK to compile the java files that come with the InterDraw application.

The client application can be accessed through an Internet browser by utilizing the included html file or by using the appletviewer program from the JDK To run the server application, use the java command in the JDK with the syntax: java Server Server$InterDrawService port_num.

Where port_num is the port number the InterDraw client applications will user to connect to the server.

[Ben96] Bentley, Chris, Animating Multidimensional Scaling to Visualize Large

N-Dimensional Data Sets, M.S Thesis, WPI, 1996.

[Cho97] Choi, Yearn Hong, “Crafting a definition of art.”, World and I, (July

[CT98] Christiansen, Tom and Torkington, Nathan, Perl Cookbook, O’Reilly &

[DDN00] Deitel, Deitel and Nieto, Internet & World Wide Web: How to Program,

[Die00] Dietz, Steve, Curation (on) the Web, Online, Internet, April 2000,

Available: http://www.archimuse.com/mw98/papers/dietz/dietz_curatingtheweb.html

[Eur00] European Paintings.com, Italian Paintings Galery, Online, Eruopean

Paintings.com, Internet, April 2000, Available: http://www.europeanpaintings.com/italian

[FD97] Flanagan, David, JAVA in a Nutshell: A Desktop Quick Reference,

O’Reilly & Associates, Inc., Sebastopol, CA, 1997.

[Fla97] Flanagan, David, Java Examples in a Nutshell: A Tutorial Companion to

Java in a Nutshell, O’Reilly & Associates, Inc., Sebastopol, CA, 1997.

[GC99] Cornell, G and Horstmann, C.S., Core JAVA 2: Volume I –

Fundamentals, Sun Microsystems Press, Palo Alto, CA, 1999.

[Gea97] Geary, David M., graphic JAVA 1.1: Mastering the AWT, Sun

Microsystems Press, Mountain View, CA, 1997.

[Gol99] Gollifer, Sue, Collaborative Art Projects, Online University of Brighton,

Internet March 1999 Available: http://www-ctiad.adh.bton.ac.uk/ctiad/sue/collabe.html

[Gom66] Gombrich, E H., The Story of Art, The Phaidun Press, Greenwhich,

[Gre61] Greenberg, Clement, Art and Culture, Beacon Press Boston, Toronto,

[Gro99] Growing Through It Org., Growing Through It, Online, Growing Through

It Org., Internet, March 1999, Available: http://www.growingthroughit.org/hp/index.htm

[Har97] Harold, E.R., JAVA Networkd Programming, O’Reilly & Associates, Inc.,

[Hil90] Hill, F.S., Computer Graphics, Prentice Hall, Englewood Cliffs, NJ, 1990.

[Kre93] Kreiner, L.E., “Toward a Definition of Art”, Art Education, (May 1993): pp 7 – 11.

[Lei52] Leicht, Hermann, History of the World’s Art, Spring Books,

[Mas98] Mason, A.L., WEBART: Collaborative Development of Artwork on the

Web, A Major Qualifying Project, WPI, 1998

[Mer94] Merriam-Webster, Inc, Merriam-Webster’s Collegiate Dictionary, 10,

[May92] Mayhew, D.J., Principles and Guidelines in Software User Interface

[Mit99] Mitchel, Bonnie, International Internet ChainArt Project (6 March 1994),

Online, Syracuse University, March 1999, Available: http://ziris.syr.edu/chainartdocs/chainart.html

[MPL65] Murray, Peter and Linda, Dictionary of Art and Artists, Frederick A

[NS98] Naughton, P and Schildt, H., The Complete Reference: JAVA 1.1,

Osborne McGraw-Hill, Berkeley, CA, 1998.

[Ora00] Oracle Corporation, Oracle Software Powers the Internet, Online, Oracle

Corporation, Internet, Available: http://www.oracle.com

[OW99] Oaks, S and Wong, H., JAVA Threads, O’Reilly & Associates, Inc.,

[Pal99] Palmatier, Gary, Ideas to Images (3 March 1999), Online, Sonic, Internet,

March 1999, Available: http://www.sonic.net/~ideas/index.html [PBS00] PBS Online, Life on the Internet, Online, PBS Online, Internet, Available: http://www.pbs.org/internet/timeline

[Ray09] Raymond, G.L., Genesis of Artform, G P Putnam’s Sons, NY, 1909.

[Ree97] Reese, George, Database Programming with JDBC and JAVA, O’Reilly &

[Ros99] Rosenfeld, Klause, HypArt (9 Apr 1999), Online, Internet

Informationssysteme GmbH Internet, March 1999, Available: http://www.work.de/cgi-bin/HypArt.sh

[Sau00] Sausalito Art Festival, The Sausalito Art Festival – Computer Art, Online,

Virtual Success, Internet, April 2000, Available: http://www.sausalitoartfest.org/computer.html

[Sch99] Schach, S.R., Classical and Object-Oriented Software Engineering: With

UML and Java, WCB/McGraw-Hill, U.S.A 1999.

[Spa99] Spalter, Anne, The Computer in the Visual Arts, Addison-Wesley, USA ,

[Str00] Strauss, Howard, The future of the Web, Intelligent Devises and

Education, Online, Educause, Internet, April 2000, Available: http://www.educase.edu/ir/library/html/cnc9809/cnc9809.html

[SM00] Sun Microsystems, Java Discussion Forum, Online, Sun Microsystems,

Internet, Available: http://froum.java.sun.com

[Sun00] Sun Microsystems, The Source for Java™ Technology, Online, Sun

Microsystems, Internet, Available: http://java.sun.com [Tan96] Tanenbaum, Andrew S., Computer Networks, Prentice Hall, NJ, 1996.

[Tex99] TexShare, Libraries, Universities and Colleges (11 Aug 1995), Online,

TexShare, March 1999, Available: http://www.texshare.utexas.edu/Search/libs.html

[Til84] Tilghman B.R., But is it Art?, Basil Blackwell Publisher Limited,

[Tol62]Tolstóy, Leo, What is Art? And Essays on Art, Oxford University Press,

[Var00] Varian, Varian’s Dreamview Collaborative Art Project, Online, Internet,

April 2000, Available: http://www.varian.net/dreamview/dcollaborative/index.html