IAR 560 Final Project

Introduction

This project seeks to explore the creation of an interactive multimedia tool for understanding basic color theory as part of an interior architecture/design curriculum. The software being used to create the project is Adobe Flash, chosen for its interactive programming capabilities. The project is meant to serve as a foundation for understanding basic color concepts and is the first in a series of presentations on more complex issues in color theory to come.

Color is an integral part of the interior design profession. Successful projects often make good use of color to enhance design intent (Pile, 1997). This project incorporates interior specific examples of color harmonies, to aid design students in the comprehension and understanding of basic color theory. By presenting the information in an interactive multimedia format, design students have control over the learning process and can progress through concepts at their own pace.

With the advent of computer technology, researchers are paying more attention to how students learn and retain information. For many years, printed or spoken verbal text was the dominant tool of education. However, modern students have access to information at unprecedented levels due to the Internet. This information is full of text, images, sound and motion graphics that provide a different mode of understanding information. These new students learn through discovery (DeGennaro, 2008). Multimedia learning tools allow the student to learn more deeply from various images, animations and text than from more traditional modes of communication involving words alone (Mayer, 2003). This multimedia-learning tool for color theory allows students some control over the presentation of information and involves a “discovery” element that will enrich understanding of color harmonies within an interior context.

Literature Review

Color Theory

Sir Isaac Newton developed the first color wheel. The spectrum he observed was red, orange, yellow, green, cyan and blue, violet and indigo. He then joined the two ends of the color spectrum together to show their natural progression. Johann Wolfgang Goethe studied the psychological effects of colors. Goethe divided all the colors into two groups, the positive (red, orange,yellow) and negative (green, blue and violet) (Sepper, 2003). These became known as warm and cool color groups. Warm colors typically produce excitement and cheerfulness and cool colors promote calm and relaxation.

Johannes Itten developed the modern color wheel. Itten's color wheel is based on red, yellow, and blue as the primary triad and includes twelve hues: red, red-orange, orange, orange-yellow, yellow, yellow-green, green, green-blue, blue, blue-violet, violet, violet-red (Itten, 1974). Itten (1974) defined the concept of color harmony. Color harmony is “the craft of developing themes from systematic color relationship” (p. 118). He labeled these color chords dyads, triads, tetrads and hexads. These chords selected colors from the color wheel based on the hues opposite a straight line, a triangle, a square or a hexagon (two triangles). Current basic color schemes follow this formula.

The twelve-color color wheel is made up of three primary colors (red, yellow and blue, three secondary colors (orange, green, purple) and six tertiary colors (red-orange, orange-yellow, yellow-green, green-blue, blue-violet, violet-red). The color wheel is only concerned with hue. It does not take into account tint or shade
Pile (1997) identifies five basic color schemes derived from the color wheel. A monochromatic scheme is made from one hue. An analogous scheme selects up to three or four colors side by side on the color wheel. Complementary schemes select colors from opposite positions on the color wheel. Triad schemes are based on three hues spaced equally around the color wheel. The primary colors make a common triad scheme. The last type of scheme, the tetrad, is the most difficult scheme to accomplish. The tetrad color scheme uses four hues spaced evenly around the color wheel.

Each color scheme can utilize various shades and tints of the chosen hues to add interest and complexity. Although shade and tint are out of the realm of this project, it is helpful to know that shade is the amount of black added to a hue and tint is the amount of white added to a hue. With tints and shades applied to each hue of the color wheel, the possibilities for color combinations becomes quite complex. The application of these color harmonies specific to interior design can be explained using multimedia tools.

Adobe Flash & Multimedia Learning

The advent of the Internet and the proliferation of technology have changed the face of education. Traditional methods of teaching, such as verbal lectures, no longer reach a new generation of students. Modern students are exposed to multitudes of images and graphics, coupled with text and sound. In order to meet the needs of new students, multimedia-learning tools provide a richer exploration of material (Mayer, 2003). Mayer (2003) outlines some general principles of successful multimedia learning. Students learn better from words and pictures together than from words alone. Students learn better when corresponding pictures and words are presented near rather than far from each other. Students learn better when corresponding pictures and words are shown simultaneously. And students learn better when extraneous pictures, sounds and words are eliminated. Adobe Flash, formerly known as Macromedia Flash, is a software program capable of creating animations and interactivity. Flash can manipulate both raster and vector graphics, sound and video, creating rich multimedia experiences (Perkins, 2008). It has become the eminent software program for web components and animations. Adobe Flash utilizes its own programming language called Action Script. Action Script, similar to Java Script, enables the user to program a myriad of functions and interactions such as interactive links, pull down menus, etc.

The Flash interface is similar to other Adobe products such as Photoshop and Illustrator. In fact many of the tools work the same way and the communication between the programs allows for seamless transfer of objects and images. This compatibility makes creating complex motion graphics more user friendly. However, Flash is capable of creating and drawing graphic shapes directly in the workspace with ease.

The main difference between Flash and other Adobe products is the ability to create time-based graphics. The timeline is a crucial element that orders the sequence of graphics in Flash. The user creates animations by placing different images on different frames.

Methodology

The first step to creating this multimedia presentation on color theory was to research basic color theory. Basic to any understanding of color is the color wheel and its components. Once the color wheel is explained, color harmonies and relationships are easier to understand. These elemental concepts were chosen to present in the multimedia presentation. After identifying key points of color theory to address in the presentation, a script was developed. The script consisted of storyboards with general layout information and ideas on interactivity that would give the user/learner more control over the pace and order in which information was presented. The script, although fairly complete, was only a guideline.

The next step in the process was to implement the design into an interactive multimedia presentation. This involved selecting and learning an appropriate software program. Adobe Flash was chosen to create the presentation. With no previous experience using Adobe Flash, the researcher had to start with very basic concepts of animation and interactivity, slowly learning the skills to create the presentation. The script as guideline was helpful, allowing for changes in layout and graphic presentation as needed. After several practice animations, it was possible to assess what was and was not possible in the given period of time. Elements of the script were changed or eliminated according to the four-week time frame and the researcher’s skill level to complete the task.

Results

The final project is a fairly short multimedia presentation that resembles a web page. There is an initial homepage or introduction page that informs the user of the purpose of the presentation. The user navigates the presentation by using linked buttons. With each page, the user is presented with new information about the color wheel and color harmony. There are six pages that discuss the color wheel and its components, monochromatic color schemes, analogous color schemes, complementary color schemes, triad color schemes and tetrad color schemes. As the user rolls the mouse over links on each page, the main color wheel responds by enlarging the colors on the wheel that correspond. When clicked, these links go to more detailed examples that further illustrate the concept. For example, on the monochromatic page, when the mouse is rolled over red, the red hue on the color wheel and various tints and shades of red become enlarged. When the red button is clicked, the user sees an example of an interior scene that employs a red monochromatic scheme.

The user always has the choice to visit any page at anytime, due to the navigation buttons at the bottom of all the main pages. This simple technique allows the user to control the learning experience by selecting topics of interest and discovering the information at the user determined pace.

Conclusion

The final project presents only a small portion of color theory. This leaves much area for expansion of multimedia texts. Even the information in this presentation is presented dealing only with hue as an aspect of the color spectrum. Concepts of tint and shade make color schemes much more complex and could be woven into this presentation to provide an understanding of more subtle color combinations. Specific to this presentation, the colored interior scenes based on the color harmonies, could become more interactive. One option includes allowing the student to choose individual colors from a color palette and then apply the color to a blank interior image, creating their own color combinations. This would allow students to discover certain aspects of color placement on their own, rather than being shown a completed image of a selected color scheme.

Ultimately, the researcher found Adobe Flash to be an excellent tool for creating interactive texts. Time spent learning the program definitely took time away from the design process, but was necessary in order to know what was possible. With a finite amount of time to create the presentation, the researcher made very deliberate choices to keep the graphics simple. While this could be seen as a strength, the presentation becomes a bit monotonous as it continues through the color harmonies. It becomes difficult to visually tell the difference between the different pages without reading the title on the side of the page. A simple change in background hue or transparency could provide some visual variation.

Learning Action Script was another limitation that shaped the project. The researcher had no previous experience writing code. Action Script is a fairly complex programming language that requires in depth understanding of action phrases. The most recent version of Action Script, Action Script 3.0, is an object-based programming language that is a bit more complex than previous versions and more advanced than necessary for a first time user of Adobe Flash. For this reason, the researcher chose to use Action Script 2.0 for the fairly simple commands used in this project, such as Rollover, Rollout, on Press and transparency commands. A more extensive knowledge of Action Script could increase the interactivity of this project allowing for more user input and decision-making.

The project incorporates visual examples with minimum use of words and no use of sound. To make the learning tool more applicable to different types of learners, it will be necessary to include more variety in the way information is presented. Adding sound and more in-depth textual explanation could enhance the learning experience.

Given more time to learn more advanced features of the program, it is definitely possible to create interesting and engaging learning tools that address the needs of modern media savvy students. Ultimately the project was an advantageous step in learning how to create interactive learning tools. Adobe Flash, although complex, is capable of creating very interesting and innovative media for the delivery of instructional information. Using the lessons learned in this project, further progress in creating learning tools that challenge and stimulate the learner could occur. By building on the knowledge gained about the timeline and frames, and Action Script, the researcher feels confident in taking the next steps to develop a series of interactive learning tools that will guide students through more complex issues in color theory for interior design.

References

DeGennaro, D. (2008). Learning designs: an analysis of youth-Initiated technology use. Journal

for Research on Technology in Education, 41(1), 1-20.

Itten, J. (1974). The art of color: the subjective experience and objective rationale of color. New

York: John Wiley and sons.

Mayer, R.E. (2003). The promise of multimedia learning: using the same instructional design

methods across different media. Learning and Instruction, 13(2), 125-139.

Perkins, T., (2008). Adobe Flash CS3 professional: hands-on training. Berkeley, CA: Peachpit Press.

Pile, J.F. (1997). Color in interior design. New York: McGraw-Hill.

Sepper, D.L. (2003). Goethe contra Newton: Polemics and the project for a new science of

color. Cambridge, MA: Cambridge University Press.

SIMULATION

Readings:
Let the (Indirect) Sun Shine In by Joann Gonchar, AIA
Energy Software to Link Design and Science by B.J. Novitski
Computer Visualization as a Tool for Critical Analysis by Mark Maddalina

Simulation is the most elemental yet most powerful component of digital design. These three articles highlight some of the areas where computer simulations are aiding architects and designers with the design and analysis of buildings. In Let the (Indirect) Sun Shine In, Gonchar describes the use of lighting simulation tools in the design of Broad Contemporary Art Museum (BCAM) in Los Angeles and the Queens Museum of Art (QMA) in New York. The BCAM was a new building that incorporated a saw tooth that incorporated north facing skylights. Computer simulation was used to determine the primary direction of light within the galleries. North-facing skylights can produce diffuse light that can lack uniformity. The illumination vector analysis allowed designers to refine the design of the sunshades to create more uniform daylighting conditions. The QMA was planning an expansion of its existing museum. The design included a large "courtyard" carved out of the building. Designers used Radiance, a lighting simulation program, to study contrast ratios on the museum gallery surfaces. Contrast ratio is important to reduce eye strain. The simulation allowed designers to adjust the "courtyard" skylight's shape and size to obtain the correct contrast ratios within the spaces.

In Energy Software to Link Design and Science, Novitski discusses Building Design Advisor (BDA), a research service that allows architects and designers to link their building designs to various simulation tools. Currently the service offeres links to DOE-2, an energy performance simulation and Delight, a daylight and electric lighting analysis tool. They also plan to link to Radiance, the lighting simulation program used in the QMA study. In order to access these simulation tools, it is necessary to have a digital model of the building, but it is not necessary to be in the final stages of design. BDA will translate the data to work with each simulation program and will create "smart defaults" if any information is missing. BDA is a powerful tool for architects because it brings together in one place, many useful simulation programs, and allows designers to access these programs at any stage of the design process.

In Computer Visualization as a Tool for Critical Analysis, Maddalina discusses how 3D computer visualizations can be used as a tool for analyzing spatial relationships that just isn't possible with 2D drawings. He uses Frank Lloyd Wright's Darwin D. Martin House to demonstrate how a digital model can clarify spatial relationships and help critically analyze the structure. He did this by creating 3D volumes for the spaces of the home, removing the architectural elements that surround them. By studing these volumes in relationship to one another, Maddalina discovered special relationships between the stairway and the different levels of the house, as well as a non central fireplace, historically thought to be Wright's trademark design feature.

Every image or data set created by the computer is in essence a simulation. Theorists such as Baudrillard take a very apocolyptic view of the sheer amount of simulation in modern society, suggesting that humans no longer recognize what is real. However simulation is a tool used in the architectural profession from its earliest beginnings. Othographic projection drawings are the most used simulation drawings, meant to understand proportion and scale without actually constructing the building first. Today, the computer makes possible simulations of many phenomena, previously impossible to determine accurately. I think the main strength of the computer and digital design is its ability to accurately depict possible scenarios and aid designers in making real world decisions.

Geographic information systems are important tools for defining the social and environmental contexts of urban design, planning, and architecture
by Bill McGarigle

This article was a great introduction to the uses of GIS technology. Geographical Information System is mostly known for geographical maps. Maps are a very important aspect of GIS technology, but the key feature is the ability to layer information in order to observe results. Any type of information can be mapped and layered, so that patterns, trends or changes can be observed.

For architecture, GIS is helpful in learning about different physical as well as cultural aspects of a location. GIS can be used to map the effects of constructing a new structure within a specific neighborhood, as well as determine which socioeconomic communities will be most impacted by new developments. As a design tool, GiS technology can help designers correct, change or prepare for influences new buildings will have on the community. Time lapse information can help to keep projects on schedule by informing all parties involved of scheduling conflicts.

Personally, I use local GIS sites at work on a regular basis, locating site maps, adjacent properties and property owners. The possibilities for information layering is unlimited and can be mapped in 3d to create different ways of viewing information that will help to inform designers as previously impossible. The visual organization of data is useful for designers and architects to make sense of large amounts of information regarding the site, street, town or city for their projects.

DATS Design, Art and Technology Symposium

DATS was held at High Point University this year. Although I could only attend two events Friday afternoon. It was a very informative and interesting trip. I attended the David Burney's talk and a round table discussion about illustration.

The first event I attended was keynote speaker, David Burney, partner and CEO of New Kind. New Kind is a design firm in Raleigh, NC that specializes in helping clients develop solutions by using design thinking. Burney's talk focused on the importance of design thinking as tool for developing solutions to issues and problems. The scope of his talk covered politics, business and design, and he was adamant that design thinking has the power to solve any problem, because of its flexibility and open mindedness. His argument began with discussing how traditional business models and strategy have failed. His examples included GM, AIG and other failed business models. In contrast companies that employ design thinking such as Apple and Toyoto have been able to compete and overtake the business giants.

What does design thinking involve? It involves in not particular order, the following concepts: define, research, ideate, prototype, choose, implement, learn. These steps do not occur rigidly, but rather ebb and flow together when they are needed. The key concept in design thinking is to allow ideas to surface without creating a rigid framework for them to adhere to. By allowing a team to think creatively, more appropriate and better solutions can be discovered. Of course with design thinking, these solutions are never the final result, but rather a learning process that help to inform the next project or design opportunity. For information on design thinking, see Design Thinking

The round table discussion on Illustration was interesting. It involved a panel of two local illustrators discussing how to get work published and available for public consumption. I thought the talk would lean toward the digital creation of illustration, but it never went in that direction. However, should you want to become a professional illustrator, it's important to do drawings anytime you can, commissioned or not, network and constantly put your work out for companies to see. Most illustrators work for a company for the first few years after graduation and then move into freelance work, based on the contacts made. The two board members were Janis Acampora and Ed Fields

Overall the afternoon was fun and informative, and it was refreshing to be in the company of so many creative people.

The World Wide Web and 2D and 3D Animation

From the readings:

"The World Wide Web" from The Computer in the Visual Arts by Anne Spalter, Addison Wesley Longman Inc. 1999, pp 415-437.

"2D and 3D Animation and Video" by Anne Spalter, Addison Wesley Longman Inc. 1999, pp 323-358

"The World Wide Web" provided explanations of general concepts and terms that I was aware of, but did not fully understand. Spalter outlined a brief history of the Internet and elaborated on the basic construction of the Web, explaining Internet Protocal, webservers and bandwidth. The chapter then explained the different programming languages and plug-ins that allow content to be viewed on the web, such as HTML, XML, Java and JavaScript. HTML is the basic way of controlling the composition of a webpage. It uses tags to define position, font and size of headings, main body text and images. Java is a programming language that creates applets, extending the capabilities of a webpage. The viewer does not have download seperate applications, because the applets can be used directly on the webpage. JavaScript is a less complicated version of Java that can create interactive elements on the webpage such as mouse rollovers, but does not create full applications or applets. XML is similar to HTML, except that it tags 3D information, making virtual worlds and role playing games possible on the internet.

One of the main advantages of the internet for artists and designers is its interactivity. The ability to link many users who can comment, edit and change a work creates a community of users. This community, unlike geographical communities, participates from around the globe. I think interactive art work on the internet is an interesting concept, producing works that may never be finished and may constantly evolve. It becomes a little difficult at that point to attribute the actual work to anyone artist, because many hands have been involved in the pieces creation. It lends to the concept that the idea is the most important aspect of an artwork, rather than the implementation of the idea. I'm not sure if this interactivity can translate to architecture and design. Certainly designs can be published on the web and particpants can communicate and critique. But is it advantageous to have a community of people designing a space past the earliest conceptual stage?

"2D and 3D Animation and Video" was a very interesting chapter to me because when you add the element of time to design, it is possible to experience spatial characteristics not obvious in still shots. This chapter discussed 2D and 3D animation programs and key concepts inherent in the different programs. Spalter defined and described concepts such as keyframing, inbetweening, interpolation, morphing, motion and object interaction. I understand the main concepts of animation, most likely due to my backlot tour at Disney World when I was ten years old. Understanding the basic premise of frames and the sheer amount of time and effort it takes to create a visually believable moving image, is basic to appreciating the speed with which a computer can create 3D worlds and characters that come to life. I was really interested in this chapter because my graduate research revolves around the moving image and how that image translates the concept of spatiality to the viewer. Using computer animation technology, scenes and spaces that don't exist and couldn't exist somehow do. This false reality portrayed, whether on the internet, the movie screen or television, has profound effects on our sense of what real spaces should be and act like.

Virtual Reality and 3D Input and Output

From the readings:

"3D Input and Output" from The Computer in the Visual Arts by Anne Spalter, Addison Wesley Longman Inc. 1999, pp 297-316

Virtual Reality and digital modeling go on trial for a federal courtroom design by Alan Joch
http://archrecord.construction.com/features/digital/archives/0501dignews-1.asp

2D input and output devices are restrictive when working with 3D data, but access to 3D input and output equipment is limited because these devices are expensive and not readily available to the general public. There have been various 3D input devices created, but all present different challenges and none have emerged as a standard.

A 3D mouse uses sonar to track its movement through space. While the 3D mouse can perform operations in 3D programs quickly, it is often inaccurate due to noise interference and it can be cumbersome to use over a period of time. Joysticks are commonly used in video games. These devices can navigate 2D and 3D space and buttons can be programmed to perform certain functions, such as jumping or firing in a video game. Gloves are best at performing predefined postures within virtual reality, such as pointing in a direction to move, but are not accurate enough for detailed work. Dials are a very accurate 3D input device that allow the user to control virtually any 3D property. They are not a direct translation of bodily movement and remain removed from the process, similar to using a mouse for drawing, but they do not cause fatigue. Force feedback devices provide tangible information such as the feel of objects and textures in a virtual environment. While extremely convincing, these devices are very expensive and can be very dangerous. Trackers track bodily movement in real space by using six cameras in a golf ball sized device. They are seen quite often in Hollywood special effects studios to map the motions of actors for use on a 3D model. 3D scanners and digitizers create digital 3D data from existing real world forms.

For the most part, 3D digital data is represented on a flat two dimensional screen. The goal of 3D output devices is to create a realistic way to view 3D information. This requires the use of stereo vision, which is how humans perceive depth in the real world. Two different view are brought together in order to see in three dimensions. To simulate this process digitally, two slightly different views are created. These views are called a stereo pair. The viewer can then blend these two images in a few different ways by focusing a distant point (very difficult for most people) or with the help of stereoscopic glasses. These glasses cause each eye to see a different image, and the brain must complete the depth perception.

Virtual reality uses stereopsis but surrounds the user with digital information so that the user is immersed in the digital realm or virtual reality. This can be accomplished with the use of a head mounted display or a binocular omni-orientation monitor. There are also special rooms called CAVEs that allow users to enter into a space with images projected on each wall surface. By using stereoscopic glasses, the users perceive the space as a virtual 3D environment. This is the technology used in the courtroom design, and seems on the surface to prove successful for understanding sightline issues in the courtroom. Lighting design was also refined by using the CAVE but the designers admit that this sort of environment is not very effective at portraying real world lighting and shadow.

I was not fully aware of the technical advances in 3D input and output but with the popularity of the Wii and its controller the Wiimote, it is certainly easy to see the real world application of a 3D input device. The Wiimote offers six degrees of freedom for interaction with the video game. I have always been fascinated by the philosophical issues regarding virtual reality and just last semester read exerpts from Baudrillard's "The Precession of Simulacra." Baudrillard's outlook is so apocalyptic , that somehow the world is disappearing in a haze of imagery and meaning. I tend to relate, rather simplistically I admit, virtual reality to a really good book. Both require the participant to immerse themselves in the world, both can take the participant to alternate realities and both provide entertainment. Neither has of yet become confused with our common shared reality and according to Henry Fuchs, technology may never let us confuse the two. (p. 316) And whose to say we all live in the same reality anyway.

This was my attempt at using Podium with SketchUp. I know it's supposed to be an easy interface, but it's a little frustrating not knowing how to control the effects you're getting. For example, my lovely striped floor. Sun settings would change the size of the stripes but not remove them. Changing the reflectivity of the floor diminished them some. I'm guessing that maybe there is something in the model that is allowing light to seep through, but I'm not sure. Other than that, I think it produces fairly decent renders. I especially like the predefined light fixtures. As you can see I used a few.