creative media & digital culture
@ washington state university, vancouver

The Nouspace Student Research Gallery

Student Art Work
Exhibit 24
05.17
The Portfolio

Featuring CMDC students' digital portfolios....


The Nouspace Student Research Gallery is a showcase for exemplary work of CMDC students. Each issue highlights projects that demonstrate digital innovation at the levels of development (code and software expertise), design and social engagement. DTC students work individually and collaboratively to try to solve problems, engage and inform communities and/or create cultural artifacts that speak to the changing intersections between art, technology, and the humanities. This gallery chronicles the growth and direction of the CMDC Program as well as the development of the field of digital media. Remembering where we came from helps us to know what the potentials may be as we invent the future.

- The Faculty of The CMDC

Exhibit 24 / Portfolios / 05.17

The Portfolio

CMDC students graduate with a portfolio website that documents the digital projects they have completed in the program and highlights their skillset for prospective employers. In DTC 335, Multimedia Authoring, students learn to handcode and design what will be the first iteration of their portfolio website. They are encouraged to update and redisgn this site, throughtout their time of study, to better reflect their area of concentration and their "superpowers." Superpowers are discovered through the process of learning, making and mentoring. By the time of their Senior Seminar, DTC 497, students should have a clear idea of what they are good at, what they enjoy doing and what is marketable. It is in this final class that they rework their portfolio designs as professionals.

The 24th issue of The Nouspace Student Research Gallery features the portfolios websites of CMDC students in their first iteration, one of their handcoded projects in DTC 355. Included in the exhibit are a variety of approaches to the portfolio, but they all show exceptional ability in design and web coding.

Will Luers
Lecturer
Student Art Work

Amani Almazidi

HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Julli Krishcko

HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Diana Boligar

HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Ryan Hanrahan

HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Erin Mcbride

HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

KC Johnson

HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Nathan Craciun

HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch



Exhibit 23 / Games / 01.17

Games

The 23rd issue of The Nouspace Student Research Gallery is focused on CMDC students' creative work in designing and building digital games: art and literature games, educational games, games that address diversity and, of course, challenge/adventure games.

The CMDC has recently launched a Game Studies & Design program that aims to teach innovative approaches to games and game environments using augmented reality, virtual reality, motion-capture and motion-tracking technologies and web technologies such as HTML5 and JavaScript. CMDC professors encourage students to make games in their class projects and assignments because it is a process that is challenging, fun and rewarding. Game design and game building integrate many of the theory and practice skills taught in the CMDC program: analytical thinking, information architecture, complex programming, 2D visual design, 3D modeling, interactive and narrative design. Also, designing and building games usually requires students to work cooperatively, sharing unique set of skills with a team.

The games highlighted in this issue are a small sampling of the innovative games work in the program. Not all games get finished - usually because students become overly ambitious with their projects. The product may be completed in the future or may be the launching point for a new game. What is learned in the process, however, is the complex thinking and doing towards a collective goal: to create an engaging experience for human beings.

Will Luers
Lecturer
Student Art Work

Anna Hixon

Find Fern

HTML5, JavaScript and jQuery
DTC477 Advanced Multimedia Authoring, Prof. Will Luers
project launch



"Find Fern" was a game that I imagined being played by young children. The simple game play, fun vocabulary and easy navigation was intended to mirror that image. Each of the three levels are completed once the player finds (that is, clicks on) Fern. Each level requires the player to surpass a different challenge in order to find Fern. Each interaction between the player and the game is carried out through a variety of jQuery functions, events, and effects. Touch functions were enabled on the most utilized elements to enhance the user experience for those using touch-enabled devices. - Anna Hixon

Student Art Work

Tyler Hickey

Corridor's End

HTML5, JavaScript and jQuery
DTC477 Advanced Multimedia Authoring, Prof. Will Luers
project launch



This game/interactive fiction piece was made almost entirely using JavaScript and jQuery with a foundation of HTML and CSS. This started as a much smaller project meant to test the limits of my JavaScript knowledge using random numbers and probability, but quickly grew once the game functions had been created. However, at this point there was no sense of progression and only one possible enemy to fight, so more enemy objects were added. The next, and most difficult, obstacle to overcome was generating a branching textual narrative without simply hiding and showing html elements. The result is an original, responsive piece that reflects months of learning and experimentation with JavaScript. -Tyler Hickey

Student Art Work

Sam Van Luik

Snow Drifter

HTML5, JavaScript and jQuery
DTC477 Advanced Multimedia Authoring, Prof. Will Luers
project launch



My goal was to create the basic structure for a narrative or quest driven browser game. I wanted to have some basic systems coded, that could be used as jumping off points for more complex games. The systems I focused on creating were dialogue, inventory, crafting, and turn based battles. I managed to accomplish all of these with relative success except for the battle system. I set up a static image map with interactable elements/characters. When the player clicks on one of these characters, a large image of the selected character appears as well as a menu of interaction options including "speak", "loot", "challenge", and "return." Depending on what you select, the character's response will vary, and you may acquire some items. "Challenge" would have initiated the battle sequence.Other than interacting with characters on the map, the player can click the "inventory" button to open a menu that will allow them to view items in their possession, as well as crafting recipes. If the player contains every item needed for a recipe, they can select that recipe and hit the "craft" button. This will create the item detailed in the recipe and place it in the player's inventory, and consume the ingredient items.

Overall, I feel like this project was a little too ambitious, but I am pleased with what I was able to accomplish. I underestimated the complexity of the systems I was trying to create, but I still hope to continue working on this beyond this class and come up with something even more polished. So far, the battle system and some of the quest tracking and item rewards don't work, but the log, inventory menu, crafting, map interactions, and text display all work.- Sam Van Luik

Student Art Work

Project Coordinator: Mike Patten; Game Design/Layout: Terry Bare; Game Design: Bryan Zacharias

The Great American Melting Pot

Board Game: Adobe Photoshop and Illustrator
DTC475 Digital Diversity, Prof. Dene Grigar
project launch



TGAMP is designed to work with minimal electronic support. It is possible to play as a class, without teams, with the board projected on the wall. We encourage card play, as it incorporates tactile learning, as well as group work. Prior to the start of the game, it is recommended that the Instructor of the class brief the students on the purpose of the game. Purpose: The purpose of this game is to attempt to bridge the racial and gender divide we have in this country. It is important for ALL Americans to know that we as a nation would not exist as we do without the critical contributions we have received from members of different genders and races.

Student Art Work

Tanner Clark: Coder/Project manager; Mitchell Barnett: Content Developer/Coder; Ryan Thorton: Designer/Content Developer

Hard Life

Virtual Board Game: Lua scripting, Adobe Photoshop and Illustrator
DTC475 Digital Diversity, Prof. Dene Grigar
project launch


Our inspiration was the trivialization of the struggle that low income households face. The premise of our game is similar to the premise of The Game of Life, where you face the trials of life, except Hard Life starts the player off with losing their job. The player needs to find a new job, keep track of the money in their balance, keep themselves healthy, and maintain their newly found job. The process of creating this game mod involved some minor scripting featuring the Lua scripting language, asset creation in Adobe Photoshop and Illustrator, and playtesting in standard mouse/keyboard setups as well as in VR setups.

Our main goal with this project was to give perspective to those who never had the chance to experience what it's like to live on a low budget. Trying to survive, cutting expenses to your health to increase your performance at work, or not paying for health insurance to pay for rent, and other difficult decisions that need to be made to survive on a small paycheck. The Virtual Reality version of this game gives the game a more tangible feeling, makes it seem more serious and involved and forces the user to experience the choices in a more difficult way. We chose to make the game available for mouse and keyboard as well since few people have access to a virtual reality setup, and reaching as many people as possible helps spread our message.

Exhibit 22 / Moving Images / 09.16

Moving Images

Digital media can be made to move in many different ways. Issue 22 of the Nouspace Student Research Gallery highlights the innovate CMDC projects which include animation or video.

In Professor Brenda Grell's 3D animation class (DTC335), students learn how to model a world in three dimensions - the environment, objects and creatures. Then they learn how to bring this world to life. Movement might include guiding a camera eye through the world, animating objects or creaturely gestures.

In Professor Will Luers' Digital Cinema class (DTC338), students model a world by following rules of continuity editing. But what if the world is a computer desktop? One student explored storytelling by showing the movements of a character interacting with a screen. Another student turned a video story into a moving comic strip.

Will Luers
Lecturer
Student Art Work

Mitchell Barnette

Running Late

Adobe Premiere, HTML5
DTC354 Digital Storytelling, Prof. Will Luers
project launch



For my final I knew that I wanted to continue off of my visual narrative, by adding changes that would make it even more comic like. I did this by adding the word bubbles and sound effects. Overall I really enjoyed this project because it allowed me to experiment with something new, which I think could potentially be a new form of video editing. Due to this I plan to do more more "Video" comics in the future. - Mitchell Barnette

Cody Lane

Writer's Block

Adobe Premiere
DTC338- Digital Cinema, Prof. Will Luers
project launch

Throughout the entire class I have been focusing on this story I called "Writers Block". Most of the projects I do are my way of working though my own thoughts and feelings. I like to use art to search my own mind. I wanted to tell the story of the struggle one faces after graduation or during any major change in ones life. We all have this idea in our head of what we want to do with our life, and what people say we should do in our life. But sometimes things don't turn out how you think they should be in your mind.-Cody Lane

Nic Stevens

The Final Decision

Adobe Premiere
DTC338- Digital Cinema, Prof. Will Luers
project launch

This is a movie trailer I made based on situations that go wrong and making hard decisions. This was inspired by our discussions on montage, vine, and movie trailer editing. This final cut had 86 different media pieced together including sound effects, video, music, etc.-Nic Stevens

Brianna Savage

Diamond In The Rough

Maya
DTC335- Animation, Prof. Brenda Grell
project launch

This animation project was created in Maya 16 and inspired from the movie Aladdin. The story is about the white chess pieces against the black side fighting for the magical lamp in a cave. The whole story takes place on a flying carpet in the desert. As the white side is winning the black chess pieces team together and cheat by jumping on the carpet and knocking most of the white pieces off. Once they enter the cave it goes black and all you can hear are both sides fighting and only the black queen is left standing. The king and queen on the white side are the only ones standing on that side. That is when the white queen knocks the black queen off the carpet and wins. Both the king and queen go and they receive the lamp. When creating the king and queen chess pieces I reference the Sultan's hat and Jasmines hair using the colors blue and red to represent the each side. For the audio I combined a creative common song with a mix already created in Garage Band. I tried to keep the pace of the audio on the faster side to get across the feeling of a conflict between both sides. Both sides are trying to over power each other to get to the lamp -Brianna Savage

Erin Carlie

Forest Grump and the Magic Chessboard

Maya
DTC335- Animation, Prof. Brenda Grell
project launch

Despite this being my first 3D animation, I really wanted to push my own boundaries and see what I could accomplish with what I had learned in my short semester. Having previous experience sculpting with real clay, modeling this project was a joy and an adventure. But with that, I wanted to really challenge myself by bringing something new that I hadn't seen in other animations, which was someone actually playing chess. I wanted this character to move independently of the chessboard and to have a very expressive face. Drawing characters is something I do often, so I wanted to work that in as well. I believe having an expressive character allows for stronger audience connection. So in short, I really wanted to draw my experience with other mediums to bring a different perspective. Another theme I noticed was missing was a nature theme. The idea of a less orderly chessboard and chess pieces really got me thinking of how they would be sculpted and how they would be textured. Not to mention the area lighting, the environment, and how those would set the mood. The goal of the story was to connect through sentimentality rather than concluding violence. I wanted to bring a new story to the project, something that would warm the heart rather than stir up a classic feud. The conflict here isn't violence, but the pieces desire to not conform to chess rules. While the rhino turtle wants to play, they do too, just in a different way. -Erin Carlie

Exhibit 21 / Animation / 06.16

Animation

Animation is a technique that gives us the illusion of motion and change over time. Animation can be abstract, like a blinking circle on a web page, or it can explain complex things and tell moving stories through motion and sound. Whether it is traditional cell animation, stop-motion, video, 3D modeling, digital rotoscoping, gif animation, css and javascript animation or virtual reality, animation involves displaying a sequence of discrete images.

In Professor Brenda Grell's classes, DTC335 and DTC435, CMDC students explore the foundations of animation through a variety of methods and platforms for 2D animation, 3D animation, and VR. In these classes, students learn how to simulate motion and tell stories one frame at a time. Students become animators and can then apply these basic principles of motion simulation to game design, video editing, motion graphics, web design and multiple forms of digital storytelling platforms. Animators understand how to capture and sustain attention through the illusion of motion.

The student work in Issue 21 of the Nouspace Student Research Gallery is a small sample of the excellent and diverse animation work coming out these classes and the CMDC program in general.

Will Luers
Visiting Professor
Student Art Work

Amanda Wolcott - Project Manager
Connor Goglin - VR Developer
Randy Lutrell - Visual Effects
Megan Essman - Social Media
Holly Stassens - Web & Design
Matthew Lyons - Video/Sound

T1VR

Oculus Riftdevelopment kit
DTC 497 Senior Seminar, Dene Grigar
project launch

T1VR is a VR environment that tells the story of the Vancouver Washington waterfront's past, present, and future through a dramatic narrative in which users immerse themselves through visual elements, sound, and movement. As a research project it explores the relationship between the applied practice of virtual reality (VR) development and storytelling approaches.

Michael Bird

Mission Interupted

Maya, After Effects
DTC435- Advanced Animation, Prof. Brenda Grell
project launch

For this project, I wanted to do an action sequence. However, I did not want to do a simple chase scene. I wanted to do a chase/fight scene. Every project that we do in school is a learning opportunity and every aspect of this project shows a skill that I was either trying to learn or trying to develop. I wanted to develop my skills in environment modeling which is why I chose a city. Having a city as my settting allowed me to model builings, streets, and what was supposed to be a fountain (however bi frost ended up being too much for this project). I also wanted to develop my skills with motion paths. I had never used a motion path before this project and having a chase scene was a perfect way to develop that skill. Character rigging was a requirement for this project, but rigging is not what I want to do with my animation skills, so I tried to keep my rig and character animations as simple as possible. Keeping my rigs and character animations as simple as possible allowed me to focus my time and energy in areas that I wanted to develop. I also wanted to develop my skills in after effects. Special effects is one of the areas I intend to work after school and After Effects seemed like a great place to drevelop that skill. I have not had too much time to work in After Effects prior to the semester that I did this project. However, for this project, I was able to use the light saber plug in, rain, clouds (that I used particle playground to create), and lightning to really bring my animation to life. Lastly I did not want to use human voices for my characters because I wanted to make them seem like aliens. I used sounds that I got from freesound.org for their alien voices. - Michael Bird

Haley Zach

Dreamscape

Adobe Photoshop and Premiere
DTC435- Advanced Animation, Prof. Brenda Grell
project launch

This is an animation that I made for my Advanced Digital Animation (DTC435) class at Washington State University Vancouver. This was my second "big" 3D animation project using Autodesk Maya. The inspiration for characters and the general theme of the project came from a variety of places. Some of these being the movie Tangled (Disney) and the popular game series Final Fantasy. I really enjoyed attempting to create my first complex characters. They by no means are perfect but I enjoyed the process of trial and error when it came to creating them. It was also fun to be able to do some sound design work with this project. While this project was enjoyable is also presented a lot of problems for me. One of the main problems I had was with my rigging. This was my first time rigging "complicated" characters and I had thought that I had rigged them correctly but when I would go to pose my characters the rigging that I had done would not allow for certain poses. As a result of this I had to find alternative ways to move my characters and use creative camera work to hide weird rigging in order to evoke what I wanted. Another thing that I struggled with was actually having a solid narrative in my animation. For the story that I have it is very minimalist and in my opinion lacking of that certain something that makes a good story. I plan on working on my storytelling so that in the future I can produce better stories. - Haley Zach

Haley Zach

H20 Across the Globe

Adobe Photoshop and Premiere
DTC475- Digital Diversity, Prof. Michael Rabby
project launch

Even with modern day technology there are still parts of the world that do not have access to a clean water source. This video was created to be a call to action to improve that access worldwide. This was a group project for the class Digital Diversity at Washington State University Vancouver. For more details on the project please visit our project website: For our animation we chose to use the technique of rotoscoping. None of us had any background with rotoscoping so it was an interesting learning experience. Rotoscoping is a very tedious process but the final product is very rewarding. Programs used for creation:
Song: Dryness - Ketsa




Anna Hixon

Chapter 1: Design

Chapter 2: Information

Chapter 3: Accessibility

Adobe After Effects, Audacity, and Adobe Illustrator
DTC 478 Usability and Interface Design, Prof. John Barber
project 1 launch
project 2 launch
project 3 launch

This animated project was developed to be a useful resource for individuals who may not be familiar with usability, or usable practices in regards to web design and web development. This project manifested in three areas, or terms: "Design", "Information", and "Accessibility". For each term, I developed an animation that discussed helpful mechanisms and "rules of thumb" to consider when thinking about usability through each term. Each of the three terms follow the main theme of developing a webpage with the user, and a user's needs, in mind. The voice-over is by CMDC student Eli Campbell. - Anna Hixon

Jeremy Testerman

Word

Adobe After Effects, Illustrator, and Premiere
DTC 478 Usability and Interface Design, Prof. John Barber
project launch

I created this animation using the Adobe Suite (After Effects, Illustrator, and Premiere), a Sony Alpha DSLR and a pair of chopsticks. The idea behind this animation is based on Marshal McLuhan's The Medium Is The Massage and how the basis of a word is no longer constrained to its physical form. I used many tricks in After Effects to animate the written word and bring it to life. The real challenge was bringing the animated word into the physical space and giving it believable interactions with it's environment. -Jeremy Testerman

Exhibit 20 / Digital Storytelling / 12.21

Digital Storytelling

Storytelling weaves through many of the student projects in the CMDC program. Whether it is in the creation of a game, a social media campaign, the design of an interface, a video sequence or short animation, students are immersed in the art of digital storytelling - of holding and grabbing attention through a multimedia and interactive text. In DTC 354, Digital Storytelling, students are introduced to narrative theory and storytellling traditions, as well as to emergent forms of digital narrative, but in many classes students research, write, design and distribute their own digital stories made in and for a digital and computational environment.

In this issue of the Nouspace Student Research Gallery, we highlight a broad range of digital storytelling genres, techniques, platforms and narrative styles.

Will Luers
Visiting Professor
Student Art Work

Madeleine Brookman

Escape - A Refugee Story

Twine
DTC 354- Digital Storytelling, Will Luers
project launch



"This hypermedia narrative focuses upon the reality of war and being caught in the crossfire. It is a nonlinear experience that uses visual, kinetic, and sonic elements in order to immerse the reader -- who takes on the persona of a new mother as she tries to escape with her child from her wartorn home. There are multiple outcomes to the story, and as such, it is encouraged to go through the piece more than once.

I used a variety of open-source creative commons image and audio files within this piece. All narrative-text is original and authentic."
-Madeleine Brookman

Student Art Work

Jessica Smith

Big City Bounty

HTML5, CSS3, JavaScript
DTC 477- Advanced Multimedia Authoring, Prof. Will Luers
project launch


"The game takes place in a grungy, futuristic city where a crime organization is on the rise and a bounty hunter, the player, is hired to take down the head of the organization. With a mixture of JavaScript and jQuery, I gave the player the option to choose one of four different character portraits and one of three different weapons. The selection of these options activates the jQuery to input the selected character portrait and weapon images into their designated spaces, as well as activates the JavaScript to set the health and attack damage of the weapon the player has chosen. As the player moves through an old warehouse where the boss of the criminal organization is located, they have a chance of running into one wrong room, an attempt at an option for the player to explore, and they have a chance of running into two different bad guys, thugs working for the crime boss, one of which they will always run into because they guard a mandatory path. Overall, the game is quite simple; however, being relatively new to JavaScript and jQuery, it provided a fun challenge for my newfound skills and showed me new ways of accomplishing different tasks. I enjoyed creating this little game and hope others enjoy playing it."
- Jessica Smith

Student Art Work

Bryn Kristi

The Betrayal

HTML5, CSS3, JavaScript
DTC 354- Digital Storytelling, Prof. Will Luers
project launch


"As a final project for my Digital Storytelling and Multimedia Authoring classes, "The Betrayal" blends techinical skills such as HTML and CSS with storytelling. This story includes a click through photo gallery, videos, and multiple endings. I've chosen to use text only to guide the reader, and tell the story solely through images. The reader can be the judge, view all 3 sides to the story then choose which character is right at the end."
- Bryn Kristi

Paul Meiners

Phone Drones

Adobe Premiere
DTC338- Video Narratives, Prof. Will Luers
project launch

"For this assignment we were supposed to create a three to five minute video that was either a journalistic video or a short narrative fiction. I choose to make a fiction that explored an extreme outcome of the current phone culture. In the video, everyone is constantly staring at their phones, and there is no human interaction. One day the unnamed protagonist of the video breaks his phone and experiences a world beyond his phone. I chose this idea for several reasons. First, because I think this is a universal issue that people of nearly every age are concerned about, and second, because I thought it was an idea that would be interesting to translate into video. One of the biggest challenges I faced during filming was choosing my shots. Since it was a silent video, each shot had to communicate the story without help from words. I also had a large cast so coordinating their schedules, and directing them all during shooting proved to be a difficulty. In the end I was pleased with the result, and felt like this project forced me to use everything I had learned in the class."
-Paul Meiners

Polina Sklyarova, Janelle Cortez

Two Worlds Apart

Adobe Premiere
DTC338- Video Narratives, Prof. Will Luers
project launch

"During the project, we had an enjoyable experience filming all types of creative shots but there were times of difficulty such as lighting and getting the right framing. The biggest challenge we faced was our final scene in which the audience sees these two girls finally crossing paths with each other. That scene was obviously staged, but it was planned carefully and measured exactly for the whole scene to come together and look real. Though, we did want to create a divide and showed that by using the garbage matte effect in Adobe Premiere. We also had a hard time with editing and cutting since we had tons of great footage. Choosing the right shots while making sure continuity was present was also a challenge but we made it work. In addition to meeting the time restriction, we had to cut down on some of the continuity and get rid of extraneous shots. We also applied a speed up effect to save us some time and have room for the final scene. All in all, we learned a great deal about the filming process. Now we see why movies take an incredibly long amount of time to produce. So much effort goes into every single detail, whether something should be in auto focus or not, looking at how the lighting looks, keeping subjects in place for continuity to work, working with camera angles and framing, creating a good setting, etc. Overall, a great and fun process."
-Polina and Janelle

Student Art Work

Kate Palermini, Yuriy Kuprikov, Cody Moncur, Alan McGinnis and Nathan Whittington

Project Real Life

HTML5, CSS3, and JQuery/Javascript
DTC 475: Digital Diversity, Prof. Dene Grigar
project launch


Can games be used to create a deeper understanding of the social issues and challenges of modern society and open pathways of new communication between different perspectives? "Project Real Life" simulates real life experiences focusing on the idea that a person is born into a set financial class that they do not choose and must navigate the world within those parameters.

  • Kate Palermini--Project Manager
  • Yuriy Kuprikov--Designer
  • Cody Moncur--Coding
  • Alan McGinnis--Coding
  • Nathan Whittington––Content Specialist
Student Art Work

Serena Devera-Taualo, Josh Gellinger, Connor Goglin, Justine Hanrahan and Holly Stassens

Xenos

Unreal Engine 4
DTC 475: Digital Diversity, Prof. Dene Grigar


download zip for Mac
download zip for PC 32Bit
download zip for PC 64Bit

What challenges do people with language barriers face in a new environment? This game explores the challenges associated with living in a land where one does not know the language. Game for Change that will run on a PC or Mac using Unreal Engine 4.

  • Serena Devera-Taualo - Project Manager
  • Josh Gellinger - Multimedia Designer
  • Connor Goglin - Coders/Programmers
  • Justine Hanrahan - Content Specialist
  • Holly Stassens - Artist
Exhibit 19 / Digital Publishing / 9.15

Digital Publishing

The Digital Publishing Initiative (DPI) is a research initiative focused on best practices in the design, development and dissemination of innovative multimodal and networked writing. DPI also seeks to model an academic digital press that supports digital innovation in the fields of art, fiction and humanities scholarship, particularly in integrating peer-review into a streamlined digital publishing process.

This issue of the Nouspace Student Research Gallery highlights the work of CMDC students who authored or are in the process of authoring digital objects for the public. A traditional commercial website, though a form of digital publishing, is really a presentation of information. The digital publishing initiative and its imprint Nouspace Publications encourages students to practice multimedia design as authors and to think of publishing as a staging of ideas for networks of readers and users.

Madeleine Brookman was awarded a summer mini-grant to create Chronicles, a multimedia Scalar publication about the game Chrono Trigger. Inspired by her work on Dene Grigar's Pathfinders publication, Madeleine combined video interviews, screen captures and images to write about a video game. Cody Moncur built the prototype of an app that accesses the Google Maps API for instant networked polling of a specified region. The students of DTC338 Digital Publishing collectively researched, wrote, designed and distributed a multi-format publication about digital publishing.

Digital Publishing, in which authored digital objects are brought to networks of readers and users, is rapidly evolving. The CMDC is helping students to question, experiment and practice ideas that will help them be leaders in this exciting and emerging field.

Will Luers
Visiting Professor
Student Art Work

Madeleine Brookman

Chronicles

Scalar publishing platform
Faculty Advisor: Dene Grigar
Technical Support: Greg Philbrook

project launch

Chronicles, an extension of Dene Grigar's Pathfinders project, focuses on Chrono Trigger, a video game, and applies the methodology of "traversal" from Pathfinders, in order to capture and preserve these playing experiences, as well as document the articulation of culture in video games for generations to come. This project takes advantage of an open source online multimedia book environment, known as Scalar, in order to make the resulting information available to video game scholars and enthusiasts alike.

Besides video recordings of traversals, Chronicles offers insightful interviews from various video game players, high-quality images of physical artifacts, translations of in-game dialogue between localizations, and 25 pages of findings concerning the articulation of culture between Japan and North America.

A Summer Mini-Grant, from the Washington State University College of Arts and Sciences (CAS), assisted in the development of this research, helping fund the hardware and software needed to document and examine Chrono Trigger.
-Madeleine Brookman

Student Art Work

Cody Moncur

Pollar - a geolocative polling service

HTML5, CSS3, JavaScript
DTC 477- Advanced Multimedia Authoring, Prof. Will Luers
project launch


Pollar is a web-based geolocative polling system that can be used to create queries for a selected audience of your choice. The benefit of using pollar is that it allows for the most relevant and timely results of any polling system. - Cody Moncur

Student Art Work

Students of DTC338: Digital Publishing

The Digital Book: Design, Structure and Annotation

Adobe InDesign, Video, HTML5, CSS3, JavaScript
DTC338: Digital Publishing, Prof. Will Luers
project launch


The final project of DTC 338: Digital Publishing is a collaborative publication about some aspect of the emerging field. This year (summer 2015), students wrote, built and published a multi-format book about design strategies, book structure and annotation tools in the creation of digital books. The publication is a material demonstration and artful distillation of the ideas explored in discussions, blog posts, readings and creative projects. Students designed the various formats of the book, using the Adobe Suite and the Scalar platform, contributed content and ideas, collected outside quotes, image examples and resources.

DTC338 Digital Publishing students: Dan Asbridge, Daniell Beyrooty, Caleb Carroll, Suhaily Guevara, Natalie Hendren, Warren Marshall, Kyle McGee, Cody Moncur, Lindsey Parker, Sarah Thurman, Jason Wendland

Exhibit 18 / Design Thinking / 5.15

Design Thinking

"Design thinking is a formal method for practical, creative resolution of problems and creation of solutions, with the intent of an improved future result." Design principles and design thinking are integrated into almost all classes at the CMDC. Interactive design, information design, visual design, sound design and narrative design are all aspects of digital media production. Digital design involves aesthetics, but is less about looking pretty than about working well within networked media environments. A digital object must, first of all, be able to function as intended by its authors and within the specific constraints of its medium of delivery. Whether it is creating a website, a video, an app, an ebook , or a work of audio, CMDC students are involved with problem-solving. Issue 18 of the Nouspace Student Research Gallery highlights the work of CMDC students who thought deeply about design for their projects.

Jordan Gonzales uses subtle 3D animation and a brief narrative structure to craft an anti-discrimination message. Madeleine Brookman programs and designs the interface to an interactive quiz for CMDC students using hand-coded javaScript, HTML and CSS. Alan McGinnis programs and designs a drag and drop tutorial about building HTML page structure. Kate Palermini adapts Edgar Allen Poe to a scroll animation website. Holly Stassens presents a simple and effective interface for stories about climbing Mt. Everest. Jasmine Boothroyd and Kelsea Rothaus combine their talents with The Willamette Radio Workshop to tell a multimedia children's story.

These works demonstrate the range of design thinking that goes into crafting a digital object.

Will Luers
Visiting Professor

Jordan Gonzales

AND Campaign Promotional #1 -- Mean Behind the Scene

Maya, Adobe Illustrator
DTC336- 3D Animation, Prof. Brenda Grell
project launch

"Mean Behind the Scene is a piece from DTC 475 for the second group project. As a group with a variety of skills we wanted to do something that benefit us individually while making a great project. We came up with the idea to create a fictional scenario where aliens are being discriminated by humans for being different. We then started implementing an anti- bullying campaign. This was to be used as a metaphor for an act to stop discrimination. My focus is 3D modeling, rigging, and animation. As an introduction to our campaign I came up with a short narrative video. When I set projects for myself I find something I haven't tried before and do it. In this project I wanted to finally test my ability to animate the walk cycle. I also rigged the alien so he could blink and squint to show emotion and make the character more relatable to the viewer. I used Maya 2015 to model, rig, and animate my scenes. I then rendered them out and imported them into Adobe After Effects to piece it all together. This is also where I situated the sound for the finishing touches." -Jordon Gonzales

Student Art Work

Madeleine Brookman


What Is Your Superpower?

HTML5, CSS3, JavaScript
DTC 477- Advanced Multimedia Authoring, Prof. Will Luers
project launch

As a final project for DTC 477, I chose to incorporate my new-found knowledge of Javascript to create a helpful quiz for students majoring in the CMDC program. My goal was to create a simple and friendly tool for determining one's skills (AKA superpowers) and then supplement this with suggestions and advice for developing and enhancing those skills. In particular, I focused the most on the logic behind the quiz, and ultimately discovered a way to count certain responses towards multiple superpowers at a time. As a final touch, I decided to design two CMDC mascots within Adobe Illustrator in order to create a welcoming atmosphere.

Student Art Work

Alan McGinnis


Introductory HTML Tutorials

HTML5, CSS3, JavaScript
DTC 477- Advanced Multimedia Authoring, Prof. Will Luers
project launch

A drag and drop tutorial on how to build HTML page structure. "The goal is to make all of the boxes in the list on the right side of the screen turn green. In order to do this you will have to read the title of the lesson to know what type of document is being setup. The list on the left side of the screen is composed of randomized elements that form the structure of the lesson's document type. These elements are draggable and can be dropped anywhere on screen." - Alan McGinnis

Student Art Work

Kate Palermini


The Telltale Heart

HTML5, CSS3, Skrollr, JavaScript
DTC 355- Multimedia Authoring, Prof. Will Luers
project launch


"I have always loved the work of Edgar Allen Poe. There is something so compelling and creepy about his short stories. When I was given the assignment to create a narrative website, I thought it would be a great way to tell one of Poe's most famous works: "The Telltale Heart".

This story lends itself to a simple design, but I wanted to up the creepy quotient, which Poe was so wonderful at. In light of this, I chose to use sound as the element which not only sets the mood but drives the story itself. I chose to use Skrollr to animate not only the text, but the sound files as well. This was not without its challenges, as I had never used the plugin before and made quite a few errors before completing the project.

I hope you enjoy my version of the Poe classic, "A Telltale Heart"." - Kate Palermini

Student Art Work

Holly Stassens


Climbing Mt. Everest

HTML5, CSS3
DTC 355- Multimedia Authoring, Prof. Will Luers
project launch


"The objective of this project was to create a narrative-based website that would interest viewers. I had a difficult time in deciding on an idea and eventually settled on using this article as my subject matter as the content was both haunting and, though sad in many ways, an interesting reminder of the power of mother nature. The design was meant to read like a book, with the content set up in a left-to-right and down fashion." - Holly Stassens

Student Art Work

Jasmine Boothroyd, Kelsea Rothaus


Aouda's Adventures

HTML5, CSS3, audio, augmented reality
DTC 354- Digital Storytelling, Dr. John Barber
project launch


This project includes a website that Kelsea coded using HTML5 and CSS3 and illustrations for the augmented reality, website and social media. Jasmine created the augmented reality auras using Kelsea's illustrations, coordinated illustrations with the Instagram account she made, and wrote the script for the sound files. The sound files were recorded by the Willamette Radio Workshop and one of their voice actresses played Aouda. The project was featured at the Nouspace Gallery for the Chronicles event over the summer of 2014. Aouda's Adventures was also featured at OMSI's 2014 animation film festival.

Exhibit 17 / Animation / 12.14

Animated Explanations

Issue 17 of the Nouspace Student Research Gallery highlights the work of CMDC students using animation, haptic design and infographics to explain complex issues and topics.

In Professor Brenda Grell's 2D Animation class, students were tasked with creating an animated infographic about a social, political, or cultural topic they are passionate about and demonstrate their creative use of storytelling, data collection, visualization of data, typography, as well as animation in their projects.

In Dr. Dene Grigar's Design and Composition class, student groups created interactive installations involving a Kinect Game System using HTML5, CSS3, JS, Little Brother, and Osculator. In the Senior Seminar, seniors produced a transmedia educational environment that includes augmented reality, 3D simulations, virtual reality, and app technology created Unity Editor 4.6.0f3, Mono Developer 4.0.1, Vuforia Editor 3.0, Creative Cloud 2014: Photoshop, Illustrator, InDesign, MS Paint, Maya 2013 & 2014, Blender v2.71, Apple SDK or Xcode 6.1.1, and Android SDK 5.0.

These works demonstrate the range of possibilities in employing moving images, moving text and even body movement to illuminate, persuade and inform.

Will Luers
Visiting Professor

Dustin Speer

Music Industry Infographic

Adobe AfterEffects, Adobe Illustrator
DTC336- 2D Animation, Prof. Brenda Grell
project launch

"Complications I had encountered while working on this project consisted of timing, placement, structure, and organization. I had 20+ illustrations I was working with in After Effects, and about half-way through my project it became very easy to accidentally misplace or move a layer. As frustrating as it is to have to go back and redo what I had already done, sometimes 2-4x, I somehow survived. Further on through the project I added more sound effects, which became a complete nuisance when I had to go back and change the placement of the layers so they aligned. Upon completion I realized I had about 30 different folders consisting of my works progress, due to frequent file compiling. Now that I am done, I can finally see the background image on my desktop! What a relief!" -Dustin Speer

Brianna Patin

Spiritual Leader Teacher

Adobe AfterEffects, Adobe Illustrator
DTC336- 2D Animation, Prof. Brenda Grell
project launch

"This infographic is centered on the issue of the endangered Grey Wolf population in the United States. My inforgraphic shows the degree to which the wolves have been hunted, and examples of perception in legislative language and historic context. I treated the issue as a two-sided coin, using a duel headed wolf (one aggressive one peaceful) to describe each side. Most of the images used were created in Illustrator, a program I have learned to love. The audio was taken from a free sounds site that gives access to royalty free musical clips and tracks. I picked a Native American drumbeat for the background music because wolves in our culture are generally associated with Native American spirituality and folklore. The audio was recorded and edited in Garage Band. " -Brianna Patin

Shane Sanders

Are GMOs Safe?

Adobe AfterEffects, Adobe Illustrator
DTC338- 2D Animation, Prof. Brenda Grell
project launch

"The goal of the animation is to educate the general public on the extensive research within the scientific community that declares genetically modified organisms (GMOs) safe for human consumption. The idea for the piece manifested itself out of personal curiosity on the subject. Prior to working on this piece, my opinion on GMOs was relatively neutral and I chose to educate myself on them based on scientific research. The greatest obstacle for this project was figuring out how to present complex scientific information in an interesting and engaging way that helps to hold audience interest in the subject. The clear voiceover, coupled with simple and interesting graphic elements, helps to achieve this goal.The greatest success while working on the project was distilling the complex information down to the essentials for the viewer while maintaining the qualifying information for each claim made within the animation." -Shane Sanders

Katie Gullans

Lack of Funding for the Arts

Adobe AfterEffects, Adobe Illustrator
DTC338- 2D Animation, Prof. Brenda Grell
project launch

"I started off with the idea that the very beginning would be a drawing and a person playing an instrument in the drawing. I wanted to open with that so it would set up what the topic was going to be about. It made sense because it was about the arts in schools. Originally, I didn't plan on making the rest of the animation in paper, except for the idea that the paper person would be running across scenes. I changed things like that, but was still able to follow through my storyboard." -Katie Gullans

Matt Lyons

Kickstarter Infographic

Adobe AfterEffects, Adobe Illustrator
DTC338- 2D Animation, Prof. Brenda Grell
project launch

"For this project I decided to limit myself... I took this open project and turned it into a client job, in this case I decided to make it a motion graphics project for the company Kickstarter. Starting out, I had ideas for single transitions and text animations that I wanted to do, going from there I sketched them out in order to figure out their place in the particular project. This process made this project really fun to complete. I came up with the concept of having it actually being a story about two different people (bob and sally) and how kickstarter can solve their problems. Bob being an inventer would be able to get money for starting production of his product while sally could get start up costs covered for her business." -Matt Lyons

Christopher Ellis

Exoplanets

Adobe AfterEffects, Adobe Illustrator
DTC338- 2D Animation, Prof. Brenda Grell
project launch

"" -Christopher Ellis

Joshua Davenport

Ebola Infographic

Adobe AfterEffects, Adobe Illustrator
DTC338- 2D Animation, Prof. Brenda Grell
project launch

"For my project I choose to create an info graphic animation for the disease Ebola. The video starts by describing what Ebola is and where it originated, as well as the people it is effecting in Africa. Some of the techniques I used to portray the information was going off a welcoming color scheme that is fairly easy on the eyes, while showing basic texts and simple graphics that were made mostly in adobe illustrator so the viewer could quickly make the connections of the visuals with the points being made in the voiceover. I used lots of transform options to alter my layers position, opacity, and scale throughout the video to draw the viewers attention where I intended it to be needed." -Joshua Davenport

Student Art Work

Amalia Vacca, Michael Keck, Alicia Uhacz, Kevin Athey, Crystal Millard, Travis Petersen, Autumn Sailer, Josh Thomas, Brittany Wouden, Ashley Castino, Daren Moriarty, Angela Morrelli, Christine Waller, Adam Denny, Frankie Dunn, Patrick Dunn, Joshua Kim, Jason Tsai, Stephen Palermini, Alexandra Backous, Christopher Ellis, Erik Hansen, Colin Miletich


Life Renewed

HTML5, CSS3, JS, Little Brother, Osculator
DTC 497- Senior Seminar, Dr. Dene Grigar

installation (no link)

The Mount St. Helens Science & Learning Center's "Life Renewed" is a transmedia educational environment that tells the story about the rebirth of life on Mount St. Helens following the 1980 eruption through games and other forms of information via touch screen installation, mobile devices, and augmented reality stickers. The project was designed and produced by 23 seniors in the Creative Media & Digital Culture Program at Washington State University Vancouver, under the guidance of scientists and educators from Mount St. Helens Science and Learning Center, the Mount St. Helens Institute and the Creative Media and Digital Culture program.

Student Art Work

Randi Higbie, Alyssa Korinke, Kenneth David Warren Marshall II-, Kate Palermini, Joel Tandberg, Jason Wendland

Diminished

HTML5, CSS3, JS, Little Brother, Osculator
DTC 336- Design and Composition, Prof. Dene Grigar

installation (no link)

Diminished was created as an assignment in the Fall 2014 Design and Composition class taught by Dr. Dene Grigar. As a final project, we were charged with creating a gesturally focused art installation based around the idea of the power of water. We saw that the power of water is in its necessity to sustain and support life. As clean water becomes more scarce, its power increases greatly.

Our installation was created as a digital, interactive piece to be experienced through the X-Box Kinect. Video elements were used to coincide with the poem. As the poem begins, water is abundant and filled with life; however, towards the end of the poem water is a more scarce resource. This idea is shown in the video through large water elements at the beginning and deserts at the end. The video's use of color complements this narrative by using green and blue colors at the beginning to signify its abundance, and by the end of the poem more browns and oranges are shown to symbolize a dried up world.

The animations were built in Adobe After Effects, with videos edited in Adobe Premier, images created using Adobe Photoshop, and sound design in Audacity. We then used Oscillator and Big Brother to trigger multimedia events for each section of the poem as the physical gestures are performed.

Student Art Work

Alan Hwang, Alyssa Karnes, Andrew Johnson, Chris Pacanins, Justin Williams, Varity Schwartz

Enter Light Enter Night

HTML5, CSS3, JS, Little Brother, Osculator
DTC 336- Design and Composition, Dr. Dene Grigar

installation (no link)

Our original inspiration came from the Disney Classic Fantasia, specifically the scene when Mickey, wearing the Wizard's hat, controls a vast amount of water. This thought of controlling the power of water, brought us to the idea of controlling an entire storm. From the rain and wind to the lightning and thunder, the idea of being able to thrust your hand out and produce thunder is a powerful thought and thus our project was born. Justin, who is a metal rock fan, suggested we use a song like Metallica's Enter Sandman to convey the power behind controlling the storm. We knew we wanted to play with lights and darkness, but we were not quite sure how to do this until Alan found the Lightmation video. Chris went to work cutting up the video and audio and putting pieces of it back together to tell our story.

We are all DTC majors, with the exception of Alan who is a business major minoring in DTC. With this diverse set of talents each member of our group brings a unique perspective to our design. Justin, Andrew, and Alyssa all did the coding; Chris and Alan handled design; Varity managed the project and collect assets; and we all contributed to the overall concept. Greg Philbrook also assisted us with specialized programing for the interactive design, and for that we owe him special thanks as we would not have gotten this far without him.

Student Art Work

Anna Swan, Payton Standfill, Dan Asbridge, Alex Backous

The Poetry of Life

HTML5, CSS3, JS, Little Brother, Osculator
DTC 336- Design and Composition, Dr. Dene Grigar

installation (no link)

The concept behind The Poetry of Life began by assessing the power of water with ideas of playfulness as well as water's association with cycles in both the natural and mechanical world. Other topics that were discussed were the powers associated with nature's elements of water, earth, fire and wind, with extra attention to the duality of water and fire. Through these ideas a story formed about the elements creating a cycle of growth in nature.

Each segment of the story uses an analogous color palette--reds and orange for the fire, blues and grey for the rain, and greens for the forest. The colors correspond to the element and mood of each phase, and work against each other to help the piece stand out. The use of animation and video was another use of juxtaposition. It was a chance to bring in some of the playfulness we wanted the piece to have, as well as to show the duality of video and computer animation and how they can interact together. The cycle is created by a series of motions performed by the viewer, drawing them in and making them part of the artwork. Once the fire begins--kicked off by the user entering the forest--he or she is instructed to crouch down and mimic the way a forest may be reduced. Next comes the rainstorm, and the viewer is then directed to stand up with arms raised. This motion triggers the regrowth of the forest and mimics the action of flowers springing up out of the earth. These motions put the user in control of the forest and allow them to become a part of the cycle of nature.

Student Art Work

Yuriy Kuprikov, Viktoria Sokolova, Jason Willmore, Randy Luttrell, Johnathan Turley

Jazz Hands

HTML5, CSS3, JS, Little Brother, Osculator
DTC 336- Design and Composition, Dr. Dene Grigar

installation (no link)

The night swallows the last few remaining rays of sunshine in the swamps. Little fireflies, as if on cue, emerge into the night, playfully swinging their incandescent tails. As you step past the Oak trees, you hear a pulsating rhythm, a beat. The sound of Jazz brings the night to life. Our multimedia installation is called Jazz Hands. The ultimate goal for this project was to get the user to experience a night out in New Orleans. We choose a New Orleans theme primarily because of the kind of music that is played there: Jazz. As the user walks into the Kinect field of view, a New Orleans jazz beat starts playing. The screen also displays three icons with three different instruments. Different hand positions trigger the Kinect to play a different instrument. HTML, CSS, Java Script and Photoshop were used in creating the website, the animations and the overall programming behind the piece.

Exhibit 16 / Scroll Narration / 9.14

Scroll Narration

Issue 16 of the Nouspace Student Research Gallery highlights the work of students in DTC477, Advanced Multimedia Authoring. A continuation of DTC355, DTC477 expands upon students' knowledge of HTML and CSS by emphasizing responsive design, an approach to designing web sites so that they adjust to different device widths (phone, tablet and desktop). Students also learn the foundation of web programming, JavaScript and jQuery, in order to create dynamic pages and animation effects and to explore the possibilities of programming the navigation of web books.

Along with these important web authoring skills, students explore a popular feature in contemporary web design. Scroll animation, or parallax scrolling, started out as a visual effect to create the illusion of depth on a web page. The technique has now become a compelling model for navigating and simultaneously reading a multimedia text. With scroll animation, the interface of text, image, video and audio can dynamically change with the user's one continuous forward or backward movement, rather than through clicking links. Why is this is important? Because it is difficult to design a link in reverse. Navigation bars and back buttons have been so prevalent on the web, because a user/reader needs to orient herself in the text. Reading, especially reading a narrative or developed idea, requires the trace or map of what is read so that the text can be easily accessed as a whole. Scroll animation gets its narrative power by limiting the possibilities for the user, while simultaneously increasing the users access to the whole of the text.

The student works featured in this issue demonstrate the range of possibilities in applying scroll animation to narratives. Students conceptualized a multimedia story and then designed and programmed the scroll narration of that story.

Will Luers
Visiting Professor
Student Art Work

Caleb Nymeyer

The Tangled Frozen Theory

HTML5, CSS3 & JavaScript
DTC477- Advanced Multimedia Authoring, Prof. Will Luers
project launch


This project was created to illustrate the relationship between Disney's Tangled, Frozen, and the Little Mermaid. The stories are told in a simplified fashion to emphasize the core theory of the movie's relationships with each other. -Caleb Nymeyer

Student Art Work

Kelsea Rothaus

The Plague

HTML5, CSS3 & JavaScript
DTC477- Advanced Multimedia Authoring, Prof. Will Luers
project launch


Human Nature is to yearn for immediate gratification, not taking into account the cost to future generations. By our own greed, we accelerate the deterioration of earth. The process in creating this narrative was a long one. It began with the idea of a poem which spawned into illustrations that were created by using Illustrator. Many of the images are augmented images from online sources, but the majority are original. The next step was to analyze the structure of the "Walking Dead" site to see how they implemented the skrollr plug-in to make certain images seem to "animate". After inserting the characteristics of that site into my own, I worked to add data-point transitions that mimicked what was going on in the story. Using a combination, of layering and changing the opacity and position, the special effects were achieved. -Kelsea Rothaus

Student Art Work

Ricky Leitner

Peyton Manning

HTML5, CSS3 & JavaScript
DTC477- Advanced Multimedia Authoring, Prof. Will Luers
project launch



Despite being a computer nerd my whole life, I inherited my family's absolute devotion to Colorado sports teams. This was helped by fond childhood memories of the Denver Broncos and Colorado Avalanche being led to success by great leaders like John Elway and Joe Sakic. While the 2000s were a depression for Colorado sports, signing Peyton Manning completely revitalized the Broncos franchise and breathed new life into their hopes of becoming champions once again. Building my site's narrative on the career of Manning had many benefits. For one, it's a theme that my family would enjoy reading about, so I kept them in mind as I made certain decisions throughout the process. Also, when discussing Manning's storied and lengthy career, a lack of content was far from being an issue. All of that aside, Manning has been a huge source of excitement in my life recently, so it was fun going more in-depth with his story and what makes him so great. Manning's career going from Tennessee's orange to the Colts' blue and concluding with Broncos' orange was too convenient to pass up, and made for an effective color scheme that transitioned well into one another. I picked fonts that were bold and would feel familiar to the football and collegiate brands. This was probably the most fun I've had with a project thus far, and I'm proud of the results. - Ricky Leitner

Student Art Work

Corrine Murphy

Pokémon Regions in Japan

HTML5, CSS3 & JavaScript
DTC477- Advanced Multimedia Authoring, Prof. Will Luers
project launch


The purpose of this website was to inform users about the regions in the Pokémon games that were based on real locations in Japan using a scrolling narrative format. Some challenges I faced while building this website included implementing skrollr on only the container, understanding Google Maps and customizing the markers and applying jQuery to create this section. All of these challenges required additional research and correspondence with my professor to overcome. The biggest challenge that I am still working on is getting my website to be fully responsive. Though it works on the desktop, I am still working on perfecting the tablet and mobile platforms. Regardless, I had a fun time creating this website and am proud of my accomplishment. - Corrine Murphy

Student Art Work

Caleb Carroll

Rhasmagian

HTML5, CSS3 & JavaScript
DTC477- Advanced Multimedia Authoring, Prof. Will Luers
project launch


The objective of this assignment was to build a narrative-driven website optimized for tablets. It acted as our final project, wrapping up our course-long studies on HTML, CSS, JavaScript, and jQuery. Rhasmagian is a work of fiction, accounting the history of an alternative world and its inhabitants through text and dynamic images. I wrote the story as I coded the website, creating graphics in Adobe Illustrator along the way. I do not have much experience in animation; therefore, the greatest challenge in working on this project was bringing the motions and transitions I envisioned to life. Simply scroll down each page to progress through the story. As of May 2014, there are two chapters—the story is still in progress. - Caleb Carroll

Student Art Work

Mark Vantassel

Oscillating Muybridge

HTML5, CSS3 & Javascript
DTC477 - Advanced Multimedia Authoring, Prof. Will Luers
project launch


This project grew from a desire to present something using 2D tools that appeared to be 3D. The core of that project can be viewed at Oscillate. This core function relies on Math.sin() to produce a wave, which I use to create the appearance of depth. My son, Grant, contributed to the math side of the problem solving. I also wanted to create a machine-like environment, and a set of gears made sense. I created a proof of concept in Adobe AfterEffects, rendered it in a series of 360 still frames, and created a simple Javascript program that would swap images when scrolling, like a flip-blook. The final version is not historically accurate: Zoetropes are typically mounted vertically, and Muybridge used a device of his own invention, called a Zoopraxiscope, to display this work. However, as a proof of concept and demonstration of the functionality of 'Oscillate,' it is compelling. - Mark Vantassel

Student Art Work

Caleb Carrol, Jennifer Shroy, Alan McGinnis, Ashley Castino, Adam Wang

Net Neutrality

HTML5, CSS3 & Javascript
DTC 475: Digital Diversity, Dr. Michael Rabby
project launch


We expect the Internet to be open and unbounded. It's been that way since the beginning, after all. When we connect to the Net, we can visit any website we want. We don't have to pay to access different sites, as we do with television channels. Net Neutrality, the fundamental principle of the Web, has given us equal access all these years. Why would we want to change that?...

Exhibit 15 / Community Outreach / 5.14

Community Outreach

Issue 15 of the Nouspace Student Research Gallery features digital projects by CMDC students that engage with local Vancouver organizations and communities. Whether it is getting middle school students excited about digital technology and entrepreneurship, coding a website for a local music school, county sheriff's office, business publication or national park, or documenting the workings of the local food bank, these projects, and others like them, challenge our students to step out of their comfort zones in front of a computer monitor.

CMDC students have the freedom to explore their own creative potential, to experiment with digital media and to successfully "fail" in these experiments. Collaborating on projects for and with local organizations (with real needs) gives students other skills that are just as important as creatively coding and designing. The students involved with these community outreach projects, took research field trips, held meetings with clients, presented ideas, built prototypes, listened to feedback, redesigned based on this feedback, delivered a digital product on deadline and were accountable to themselves and others at every step in the process.

Will Luers
Visiting Professor
Student Art Work

Brittany Wouden, Amalia Vacas, Mychael Jones, Steve Palermini, Angela Morrelli, and Frankie Dunn

Pop-Up Gallery

Aurasma - Augmented Reality
DTC 497 Senior Seminar, Dr. Dene Grigar
project launch


The Pop Up Gallery: Jobs That Don't Exist Yet is a mobile gallery presented through augmented reality technology. The theme of the project, generated from participation in the National Collegiate Innovators and Inventors Association Innovation Fellowship, emphasizes the need for entrepreneurship and innovation among students and stresses the importance of a college education through a kinesthetic and engaging activity. It asks the question, is augmented reality an effective means of education for students, particularly in a K-12 environment? The Pop Up Gallery Team developed a gallery show focused on entrepreneurship and innovation in order to understand and answer this question.

Student Art Work

DTC 475 students

Opera Quest NW

HTML5, CSS3 & JavaScript
DTC 475 - Digital Diversity, Prof. Michael Rabby
project launch



For this class-wide project, students divided into teams to design, produce and code a website for the Vancouver Children's Opera, an organization that connects school-age children throughout the greater Vancouver area to the arts, specifically opera. Participating students: Daren Moriarty, Alexander Montgomery, Katherine Gullans, Jenel Cohen, Morgan Brice , Maxine Damore, Josh Thomas, Derick Lock, Benjamin Longbons, Steve Breland, Trevor Elliott, Cami Peterson, Kathryn Christopher, Stephanie Venturella, Kaitlyn Wise, Jayme Shoun, Nicholas Bare, Jared Abraham

Student Art Work

Lucas Wiseman, Amanda Bonduraunt, Madison Watson and Crystal Millard

Fort Vancouver Mobile Project: Old Apple Tree Module

Sample slideshow for mobile app
ComJour 333, Prof. Brett Oppegaard
project launch


This project was designed to extend the Old Apple Tree module on the existing Fort Vancouver Mobile app. We picked three places along that path that, based on their geo-coordinates, will trigger the intended audio and slideshow content. Each of the pieces is designed to give a bigger picture of what the apple orchard stands for, and why it is significant to preserve the past for future generations. Here is a sample slideshow from this module. - Lucas Wiseman

Student Art Work

Whitney Anderson, Wes Halverson, Katie Fennelly, Chelsea Parkhurst, Pauline Ramos, Josh Turner, Lake Konopaski

Book of Lists

HTML5, CSS3 & JavaScript
DTC 497 Senior Seminar, Dr. Dene Grigar
project launch


In an effort to improve and expand upon the experience current and future subscription holders have with the printed version of the Book of Lists, the Vancouver Business Journal has asked CMDC students to help bring their printed resource into a digital format. Developed in conjunction with Washington State University Vancouver and Instructional Technologies, Inc., The Multimedia Book of Lists displays a clean and simple interactive experience that provides users with the tools to search, sort through, and save listings for future use. With integrated tap-to-call functionality, users can now immediately get in touch with potential clients or contractors effortlessly. Student-created clickable and animated advertisements give businesses the opportunity to engage with their intended audience in a more dynamic way than traditional static ads. An elegant and responsive design, progressive functionality, and creatively captivating advertisements all come together to help bring the Vancouver Business Journal into the digital age with grace. The finished product includes a "proof of concept" package that can be used as a template for other business journals. The full package is comprised of a client side interface and sign in page that will be filled with database information by Instructional Technology Inc., 15 multimedia advertisements, a promotional email, as well as social media and promotional resources.

Student Art Work

Melina Jesser, Brian Idle, Glenda Rothfus, George Olson, Evan Flanagan, Aaron Wintersong

Virtual Precinct: Clark County Washington Sheriff's Office

HTML5, CSS3 & JavaScript
DTC497 Senior Seminar, Dr. Dene Grigar
project launch

This project was based on the vision of a "virtual precinct" that would provide a more enjoyable experience for using services that the Clark County Sheriff's Office provides, as well as including imagery and content that informs the public about the office and its functions. It is a responsive, single-page website that is dynamic and easy to navigate.

Melina Jesser, Project Manager
Brian Idle, Content Specialist
Glenda Rothfus, Lead Designer
George Olson, Lead Coder
Evan Flanagan, Social Media Specialist
Aaron Wintersong, Project Advisor

Student Art Work

Dustin Speer

Defeating Hunger in Clark County

Video
COMJOUR466 - Video for News, Prof. Will Luers
project launch


I chose to film a short documentary about fighting hunger in Clark County. I first sat down with the program manager at Clark County Food Bank, and discussed my outline and plan for this video. From there I was set to go, for she had set me up with times to film at the food bank, as well as providing contacts for agencies in Clark County. I had initially planned on interviewing some of the homeless or "hungry" people at these facilities, but most of them didn't want to be filmed, and the more I was told "NO", the less I kept asking, resulting in zero interviews from them. I got about 5 interviews, as well as a few words from other volunteers. I learned a lot from this assignment. Most importantly, more video is better than less, and "just ask" people. There were times were I could have filmed, but I didn't, and I regretted it in the editing process. My favorite part of working with this assignment was filming the B role and incorporating the "small" things, such as the eggs, the laughter, and most of all the emotions that show the viewer that the volunteers really care about giving to the community. - Dustin Spear

Exhibit 14 / Thirteen Ways / 1.7.14

Thirteen Ways

Issue 14 of the Nouspace Student Research Gallery features the first assignment that CMDC students must complete in DTC355/Multimedia Authoring, a rigorous (and fun) introduction to hand-coding websites, using HTML5 and CSS3, and to the basic principles of visual and interactive design. The assignment is to build a single-page web site of Wallace Stevens' poem "Thirteen Ways of Looking at a Blackbird." Each stanza in the poem has a unique poetic voice and style (difference), but its central image of the blackbird makes a unity out of the parts (repetion). The poem's design is a demonstration of the challenge of the assignment: how to design a visual text with difference and repetition.

Students begin with formatting and structuring semantic content of the page, such as the header, stanzas, bio, and footer. They then work at design by applying a layout, color scheme, imagery and typography. What at first is a significant challenge for many students - especially those that are new to computer languages and/or visual design - becomes an expressive and creative exercise to bring the poem to life online. This selection of thirteen "blackbird" student projects, out of the hundreds of projects over the past three years in DTC355, gives a sense of the variety of voices and styles of CMDC students.

Will Luers
Visiting Professor
Student Art Work

Daniel Spung

Blackbird I

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch




Student Art Work

Whitney Anderson

Blackbird II

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch




Student Art Work

Shane Sanders

Blackbird III

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch




Student Art Work

Adam Denny

Blackbird IV

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch




Student Art Work

Chelsea Parkhurst

Blackbird V

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch




Student Art Work

Jake Melara

Blackbird VI

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Adele Dandeneau

Blackbird VII

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Erik Hansen

Blackbird VIII

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Franky Dunn

Blackbird IX

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Jenny Foster

Blackbird X

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Kevin Athey

Blackbird XI

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Luke Wiseman

Blackbird XII

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch



Student Art Work

Sarah Robison

Blackbird XIII

HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch



Exhibit 13 / Multimedia Books / 9.13

Multimedia Books

The projects in Issue 13 of the Nouspace Student Research Gallery were all developed in the iPublishing Summer Initiative 2013 (iPSI 2013). Envisioned as both a "think tank" and "sandbox" to explore the possibilities of new models of publishing, the initiative gave seven students (Alexandrea Chaudoin, Katie Fennelly, Jennifer Hanson, Mychael Jones, Chelsea Parkhurst, Daniel Spung, and Amalia Vacca) the opportunity to take three core DTC courses that focused on designing, authoring and publishing web-based digital books. With the generous support of Instructional Technologies, Inc., iPSI 2013 fellows received full tuition for three courses, along with additional support for instructional materials.

The goal of the initiative was for students to 1) model ideas for digital textbook design based on the book/chapter/section structure and 2) to explore more creative possibilities for organizing and presenting multimedia books. Students explored a variety of digital affordances that would enhance reading and learning, while remaining unobtrusive. In DTC 336 Design & Composition and DTC 477 Advanced Multimedia Authoring, iPSI fellows (along with non-fellows) worked on the following:

  1. notes: a sliding notes panel where students can retain highlighted passages and their own (or a professor's) notes on the reading. these notes could be saved, emailed or printed for later use
  2. multi-color highlighting: a sliding colors panel allows selection of color, which is retained in highlighted passages sent to notes.
  3. progress bar & bookmarks: a variety of ways to show position within a chapter
  4. text animations: hide/reveal applied to content that involves deeper/slower reading, ie. samples of paraphrasing; highlighted text that can be synchronized with an author's audio explanation; moving text blocks to grab reader's attention
  5. segmentation of content: breaking up the chapter into stylistically distinct blocks for ease of reading and global understanding of chapter structure
  6. interactive quizzes: true or false questions to test reader's understanding through the chapter
  7. video/audio content: a video (prototype only) that introduces the chapter with author's voice and a demonstration of paraphrasing
  8. progressive & adaptive design: design of content that adapts to different devices - including phone, tablet and desktop - so that students can read in different contexts

In DTC 338 Multimedia Publishing, iPSI fellows and non-iPSI students, experimented with integrating multimedia content into an HTML5 "book." In an effort to think beyond both traditional book and traditional web design, short creative assignments focused on the following areas:

  1. spatial text: arrange text spatially on the screen, provide typographic and other visual cues (positioning, font, size, style, white-space, etc.) and sequencing for the reader to "perform" a path through the text, rather than follow a prescribed and author-controlled path of a typical column of text.
  2. visual book: use images - symbols (but not language), shapes, colors, drawings, graphics and/or photos - to build a coherent book. images are not to be used as illustrations for a pre-written story. instead, investigate new ways to organize images in order to get across a single idea.
  3. conceptual book: create a digital book using a set of instructions for the gathering of images and text (a "score") written by one of your classmates.
  4. cinematic book: design a narrative sequence using images, text and media (video or audio), using at least one of the continuity editing principles of cinema language.

The projects below are just a small selection of the many ideas explored in the summer initiative. The first five projects, explore the more creative approaches to multimedia book design using HTML5, CSS3 and JavaScript. The last two projects, are examples of adapting a textbook chapter to a web-based book for different devices.

Will Luers
Visiting Professor
Student Art Work

Daniel Spung

White Night

HTML5, CSS3 & Javascript/jQuery
DTC 338 - Multimedia Publishing, Prof. Will Luers
project launch




For this project, I set out to create a love letter to (i.e. blatantly rip-off) some of my favorite new and old-school games, including Dark Souls, Shadowgate and Mass Effect. Primarily, I wanted to create an interactive comic mixed with elements of old point-and-click adventure games. I purposefully left the controls somewhat vague, and omitted any form of obvious exposition or explanation of the "story." I believe that the fore- and background imagery alone can communicate events as they unfold little by little. I wanted to leave the viewer (player?) in a somewhat confused state; my hope is that they will construct their own narrative based around the images they see (another nod to Dark Souls). Also, because the "path" of the narrative splits in different directions – and events can unfold in different ways depending on interaction – the story may be slightly different for each person. There may even be more than one ending…

Student Art Work

Whitney Anderson

The Run

HTML/CSS, Adobe Illustrator
DTC 338 - Multimedia Publishing, Prof. Will Luers
project launch




In this digital book I tried to communicate the enjoyment, and the nagging inner voice that occurs while I am running. The design was inspired by the rhythm of running and the "thought snap shots" that are gathered while you are on a run. This digital book was created for the DTC Multimedia Publishing class at WSU Vancouver. The project was to create a digital book that used cinematic principles like eyeline match, the 180 degree rule, and continuity to create a narrative sequence.

Student Art Work

Alexandra Chaudoin

The Passion of the City

HTML5, CSS3, Javascript/jQuery and Adobe illustrator
DTC 338 - Multimedia Publishing, Prof. Will Luers
project launch




This is an HTML5 book where the user can drag the main character, the Detective, around an apartment to interact with the tenants. The goal is to find out which of the characters stole the Fire Topaz. Each character has his/her own passion and own thoughts about the Topaz. There are eight total pages in this book, including the character information page, the statement page, and the credits page.

Student Art Work

Amalia Vacca

The Spirit of Motion

HTML5, CSS3, Javascript/jQuery and Adobe illustrator
DTC 338 - Multimedia Publishing, Prof. Will Luers
project launch




The concept for the final piece was that of motion. I found an open source poem that was based on motion. I then looked into Kuler to come up with a color palette for the book. I decided early on that I would pick one color that would be used for all of the verbs in the poem. I decided to pull out all of the verbs in the poem and put them into a Google image search to come up with which images I would use. After choosing my pictures, I used Photoshop to give them all the same blue duotone color that I had used in the spatial text assignment. I placed them into an HTML document so that I could let the images scroll horizontally, giving a feeling of motion as the reader does so. I then decided to use CSS and its animation property to give each of the images different motions and placements. I then decided to give the verbs in the poem a button feature to give the reader the power to decide if they wanted to show and hide each of the images in their own timing.

Student Art Work

Chelsea Parkhurst

Trayvon

HTML5, CSS3, Javascript/jQuery and Adobe illustrator
DTC 338 - Multimedia Publishing, Prof. Will Luers
project launch




The goal for this conceptual book was to create a piece based on randomly drawn written instructions from an anonymous student. The instructions I received indicated that I was to take the top common news story from at least three different sources. This story happened to be about the case involving the shooting of Trayvon Martin. From there, I was to take the main image from one of those news stories and place it into a Google image search in order to find a similar image based on their recognition software. My next step was to take an image from the first page of my Google results and repeat the process so that I was two steps away from my original image. For the main body of text I was supposed to take three paragraphs from the article I chose and translate it using Google Translate five different times consecutively. The final text I used in my piece was translated from English to Norwegian, to Vietnamese, to Bosnian to French, and finally back to English. The title I used was a result of placing the headline of the original story into N+7, on online tool that replaces each noun with the seventh one following it in a dictionary.

I decided to sequence the images I found in the opposite order from the way that I discovered them from the top to the bottom of the page so that as the user scrolls down the imagery's relation to the content would increase and perhaps add context to the story over time. I tried to highlight my result through the use of color and font variation, but I also thought that is was important to add the original text so that the viewer could take part in piecing together the origins of my final work. The use of parallax scrolling was an attempt to make the viewer feel as if the content was being hidden and revealed to them asynchronously, just as it was for me.

Student Art Work

Jennifer Hansen, Alex Chaudoin

Chapter 5: Can You Say It?

HTML5, CSS3, Javascript/jQuery and Adobe illustrator
DTC 477 - Advanced Multimedia Authoring, Prof. Will Luers
project launch



Using a textbook chapter on paraphrasing, "Can You Say It?", students explored a variety of digital affordances that would enhance reading and learning, while remaining unobtrusive.

Student Art Work

Daniel Spung

Chapter 5: Can You Say It?

HTML5, CSS3, Javascript/jQuery and Adobe illustrator
DTC 477 - Advanced Multimedia Authoring, Prof. Will Luers
project launch



Using the textbook chapter on paraphrasing, "Can You Say It?", students explored a variety of digital affordances that would enhance reading and learning, while remaining unobtrusive.