Color
the Documents Tone Project
Midterm
Cody Painter
WNM 643 - Spring 2011
Table of Contents Project Abstract
The goal of this project is to build an interactive online musical
Project abstract................................................................................ 1 instrument that will create audio-visual loops based on user input through
use of the keyboard and mouse. The keyboard will serve as a grid of tones,
Statement of Intent......................................................................... 2 with the tones selected cycling through on a loop. There will be several
layers of loops, as well as the option to choose from a selection of sound
Target Audience............................................................................... 3 types. Additionally there will be a visual component. The visual effects will
appear in time with the music; their on-screen location mapped to the
User Personas.................................................................................. 4-6 corresponding location on the keyboard. Finally, I would like the program
to recognize meaningful words, such as “love”, “music”, or “happy” with
Comparitive Analysis...................................................................... 7-11 unique symbols available only when the user inputs these key words. Users
will want to engage with the interactive “instrument” because it will be fun,
Comparitive Matrix........................................................................ 12 playful and highly interactive. They will also be able to output the video they
have created to Facebook or other social networking sites to share what
Unique Positioning Statement..................................................... 13 they have created with their friends. This is because it will rely on HTML
5 to bring an entirely new web experience to the user. This project will
Mindmap........................................................................................... 14
serve to highlight and humanize the web experience by using cutting-edge
technology to make an art project that is immediately understandable and
SSNIF................................................................................................. 15
enjoyable for every user.
Statement of Intent Target Audience
I came to the Web Design & New Media field packing a diverse set of skills and
experiences. In college at UCSB, I majored in Japanese & Dramatic Arts. My coursework
The primary user base for this project will be people in their 20s
included studies of dramatic literature, specifically multicultural theater traditions, lighting and 30s, college-educated, web technology and internet savvy, with an
design, and playwriting, as well as Japanese history, culture, and language. I have strong language interest in art, music and design. These users will most readily be able to
skills and can speak Japanese and Spanish with varying levels of proficiency, along with basic
conversational skills in Portuguese and ASL. After college, I worked in supplemental children’s understand and interact with the project, due to their previous experience
education, gaining experience with, and a strong distaste for, the corporate, profit-driven world. with internet technology, and potentially, with other interactive web
I have always been creatively inspired, but only post-college did I emerge with the desire to
projects. However, I am choosing to make this project web-based because
express my vision of the world as an artist. All of these details are important, because as an
artist, they flavor my “voice”. My understanding of the power and importance of language is I intend that this project will be more accessible to people of any language
influenced by my experiences with foreign languages. My time in Tokyo gave me a different and skill background that have at least basic computer skills. Although this
appreciation of aesthetics, especially in advertising. Experience in lighting design allows me to
project will be designed with musicians, artists, and designers in mind, the
think about color more in relation to light than I would without it. I am sure that as I embark
on this thesis project I will draw on many of these influences, if not all of them. controls and interactivity will be clear enough, and engaging enough, to
This project will rely heavily on sound and to a lesser degree visual effects to serve allow interaction with any user who can type or use a mouse.
its artistic purpose. The project must include simple instructive graphic symbols and buttons
to ensure that it is easy to use for viewers of all language backgrounds, ages, and levels of
computer experience. I am choosing a project that deliberately dodges consumerism and
corporate culture and contains a “fun factor” that will be akin to the joyful exploration of a
child. What excites me most about this project however is that I have embarked on a journey
that incorporates my past experiences into an art project that will also serve me well as a
skill-building portfolio piece. I am extremely enthusiastic about this project because it will
allow me to express my artistic creativity while learning web technology such as HTML 5 that
will be highly desirable in the job market. Additionally, it will allow me to really expand my skill
set in regards to interactive and user-focused design. I will spend the remainder of my time
at AAU working on an innovative, interactive, art piece with the purposeful goal of building
career essential job skills while staying true to my passion. And that’s been the goal all along.
Heather Tompkins Primary Persona Danyol Leon Primary Persona
“Inspiration is all around you. You just need to know where to look.” “I’m always looking for my next inspiration - Look! A bunny!”
Personal Profile Personal Profile
Heather is a working artist and a graduate student at the Academy of Art in San Francisco, Danyol is a multi-faceted artist, musician & performer. He is constantly looking for the next
studying Web Design & New Media. She is closely connected to the local art community and is creative stimulation. His art is primarily hands-on, but he’s been lookign for ways to express
always looking for new sources of inspiration and collaboration. She is particularly interested himself in other ways, primarily through digital art.
in cutting-edge web technology, and is eager to learn more about the capabilities of HTML5.
Personal Information User Goals Internet Usage Personal Information User Goals Internet Usage
PROFESSION: Freelance Designer & Express creativity through music PRIMARY USES: PROFESSION: Graffiti artist, painter, Try out melodies for a new song he’s writing PRIMARY USES:
Graduate Student (Web & New Media) Blogging, networking, social networking, musician, retail. Social networking, self-promotion, email,
LOCATION: San Francisco Share audio-visual project with friends research, media streaming, banking LOCATION: San Francisco Entertain himself on slow days at work research, artistic inspiration
AGE: 25 FAVORITE SITES: AGE: 35 FAVORITE SITES:
INTERESTS: Get inspiration for own web projects Facebook, Netflix, Pandora, FFFFound, INTERESTS: Explore the aesthetic relationships between Facebook, Pandora, Google, Deviant Art,
Illustration, artistic collaboration, film, bike Street Anatomy, Google, Design Sponge Painting, graffiti, political activism, music, color and sound Squidface & the Meddler
riding, cooking, vintage memorabilia, Kill time while online INTERNET EXPERIENCE: Advanced performance art, cookies, film, dancing, INTERNET EXPERIENCE: intermediate
music, interactive media, contemporary HOURS ONLINE/WK: 40 color, playing dress-up Learn more about what can be done with HOURS ONLINE/WK: 20
art, graffiti art, sound editing, typewriters Explore interactivity on the web FAVORITE ARTISTS: digital technology
COMPUTER TYPE: Desktop iMac COMPUTER TYPE: Desktop iMac
FAVORITE ARTISTS: Roy Lichtenstein, Frida Kahlo, Andy Warhol,
Toulouse-Lautrec, Egon Schiele, Norman OPERATING SYSTEM: Mac OSX Banksy, Sheppard Fairey OPERATING SYSTEM: Mac OSX
Rockwell, Edward Mucha, Marc Rothko, INTERNET SPEED: Cable INTERNET SPEED: Cable
Roy lichtenstein, Jonathan Harris BROWSER: Chrome BROWSER: Firefox
Comparitive Analysis:
Carl Van Arsdall Secondary Persona Beatwave
Platform: iPhone Application
“I like music , I love techie stuff - Oh, what does this do?” Site: http://itunes.apple.com/us/app/beatwave/id363718254?mt=8
Description: A flexible, beat-making iPhone application that allows users
Personal Profile to explore sound mixing through a graphic interface, and output the files in
Carl is an engineer who works for Pixar. He considers himself somewhat creative, but various formats.
doesn’t get to express it as often as he’d like. He keeps busy with work, caring for his birds,
and going to musical events. In his free time, he takes classes in sound engineering to satisfy
his passion for music, but he’s always looking for new creative musical outlets.
Pros:
-4 sound layers allow for a richer texture of sound.
-Randomizer allows variation, keeps loops from sounding repetitive.
Personal Information User Goals Internet Usage -Additional sounds, mixers, and output options allow a flexible experience.
-Efficient menus allow the user to stay on the main screen.
PROFESSION: Engineer at Pixar Create new audio loops that he can share PRIMARY USES:
LOCATION: Fremont Social networking, networking, music -Shake to “clear”
AGE: 30 Learn more about uses of sound online blogs, media streaming, research
INTERESTS: FAVORITE SITES: Cons:
Music, Sound editing, animation, parrots, Distract himself during work breaks Facebook, Google, Twitter, Dubstep.fm,
-Small size of squares makes accuracy sometimes difficult.
Burning Man, computer engineering, Hypemachine, SFWeekly
mohawks, stuffed animals, dubstep INTERNET EXPERIENCE: Advanced
-Cost ($7.99 for “Pro” version).
Show his good friend, Cody, a little love
FAVORITE ARTISTS: and support by exploring his fun art project HOURS ONLINE/WK: 30 -Doesn’t remember current progress if you return to the home screen.
“I don’t know that much about art, but
COMPUTER TYPE: Desktop iMac
I’m curious.”
OPERATING SYSTEM: Mac OSX Summary:
INTERNET SPEED: Cable This is definitely the best app of its kind for the iPhone. It is easy to use,
BROWSER: Firefox sounds great, and allows for a wide range of flexibility in user experience. It
is only limited by small screen space it occupies. Surely, this application would
be easier to use on the iPad than it is on the iPhone.
Comparitive Analysis : Comparitive Analysis :
HTML5 Canvas Experiment Keylight
Platform: Web- HTML5 & Javascript Platform: Web- HTML5
Site: http://9elements.com/io/projects/html5/canvas/ Site: http://hakim.se/experiments/html5/keylight/03/
Description: An HTML5 & Javascript- based web application, made of Description: An experimental HTML project that creates rhythm and tone
animated particles that, upon selection, show HTML5-related news, twitter, based on user-created points and their locations in respect to each other.
and blog feeds.
Pros:
Pros: -Extremely interactive: user input determines tone and speed of the sounds.
-Aesthetically beautiful concept -Easy to use and understand.
-Illustrates how HTML5 can be used with sound and animation -Links allow sharing with social networking sites.
-Incorporates HTML5 and Javascript to show visual depth and space -Randomizer allows for previously untried patterns.
Cons: Cons:
-Not very interactive. -Simple animation, user could get bored relatively quickly.
-The dots move so fast that they are hard to select. -Tones are linked to location, not to scales, resulting in discordant sound.
-Selecting a link closes the application (should open a new window)
Summary: This project is interesting because it shows how points in web
Summary: space can be linked to tones based on their location. It is immediately
This is a beautiful, yet simple page that ends up functioning more as a stand- understandable & easy to use, and highly interactive. However, the flexibility
alone piece than an interactive design project. However, it is helpful as of point locations allows disharmony of tone and limits this site’s ability to
an example of what is possible using HTML5 and Javascript as a basis for make pleasing melodies.
interactive web art projects.
Comparitive Analysis: Comparitive Analysis:
Beatbox Bloom
Platform: iPhone Application Platform: iPhone Application
Site: http://itunes.apple.com/us/app/beatbox-lite/id378581421?mt=8 Site: http://itunes.apple.com/us/app/bloom/id292792586?mt=8
Description: A beat-making iPhone application that allows users to explore Description: A audio-visual iPhone application that creates ambient sound
sound mixing through a graphic interface, and output the files in various loops based on locations inputed by user touch.
formats.
Pros:
Pros: -Easy to use.
-Easy to use. -Strong visual design.
-Features 4 beat layers. -Creates calm, pleasing melodies.
-Shake to “clear”.
Cons: -Features adjustable “moods” (color schemes)
-Menus hard to read.
-Not immediately clear which orientation is intended for use., due to Cons:
rotated text.eat =box No ability to change sounds
-Slow response time to user input. Short looping time could lead to repetitive sounds.
-Aesthetically, less pleasing than competitors. Non-melodic.
-Limited sound library, unclear how to make/add others.
-No “shake to clear”. Summary: This application is an beautiful exploration of how sound loops
-Sounds cheap, not musically pleasing. can be created and defined by space on a touch device. However, the result-
ing sounds are abstract and ambient. While soothing, this application is not
Summary: This application is a very weak competitor to similar applications. functional as any kind of music-creation device.t
The user experience is limited by lack of additional sounds, the sounds pre-
installed sound tinny and cheap, and the menus are unclear and inefficient.
Comparitive Matrix Unique Positioning Statement
BEATWAVE 9ELEMENTS.COM KEYLIGHT BEATBOX BLOOM
iPhone Application Web: HTML5 & Javascript Web: HTML5 & ? iPhone Application iPhone Application
In my comparative analysis research, I looked at both web-based
DESIGN
interactive audio and visual projects, as well as those available on
Aesthetic, clarity,
the iPhone. I found many iPhone applications that use the visual grid
real-world connection structure to make audio loops, but I found nothing like that available
online. As far as web experiments go, there are some that use sound
USABILITY and space in interesting ways, but I was not able to find a single one that
Ease of use, efficiency used keyboard input to create audio loops. Nor did any of these projects
of control, flexibility
create an interactive, creative user experience that would allow the
INTERACTIVITY
user to share their work with friends on social networking sites. Some
Amount of interaction,
of the mobile applications allow the loops to be shared with friends,
responsiveness but only with friends who have purchased and installed the application
themselves. Additionally, although they will certainly decrease in price in
CONCEPT the future, for now, only people of a certain income bracket can afford
Uniqueness, audience to own touch devices. I strongly believe in creating a more accessible
appropriate
artistic project that can be used and shared by the broadest range of
TECHNICAL
people. Compounded with the fact that this has been done already on
Error Prevention &
the iPhone for a smaller audience, it becomes very clear to me that using
recovery cutting edge web technology is the best way to achieve the goals I have
set for myself with this project. My research was heartening because
SUMMARY
I can see that what I wanted to accomplish is possible with current
technology. What was even more exciting however, is to see that nobody
has quite managed to do what I am proposing to do; create a web-based,
sharable musical instrument.
KEY GOOD FAIR POOR
Mindmap SSNIF
Stakeholder Situation Need Feature
Pretty Anyone interested in web technology They want to know what is possible with web A clear an interesting presentation of the Site must be current with latest developments
Creative
technology technology in HTML5 and Javascript
Social Fun Music Theory Anyone who uses beat making programs They are bored of sequencers with low More flexibility and functionality in their beat- Multiple sound layers for diverse results
Melodic Scales
adaptability making software
Pentatonic Scale? Multiple sound samples to select
Other options?
Randomizer to limit “loop” feeling on song
Creative people They want to find a fun way to creatively pass A website that allows them to express their This site!
light the time creative needs
color theory Randomizer
the Color Tone
gradients Aesthetics Flexibility Sounds
Project
animation Layers
Usability
Text-Free Icons
Easy to Share