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.
Issue 30 features works from DTC summer sessions where classes tend to be smaller and less frantically in competition with other classes. Summer can be a great time for students to expand creatively.
"Seen" is a collaborative work of fiction, where the entire class took on a role for building a video about a veteran's return home. "North County" is visual poem about the ways the natural and human worlds meet in Clark County. "Preparing Her Space" is a portrait of a therapist and her work space. "Education by the Numbers" is an animated inforgraphic calling attention to some worrisome statistics.
Will LuersDTC 491 - Digital Cinema, Prof. Will Luers
The inspiration behind “North County” was based off of a previous idea I had to create a photography zine that depicts life in rural Clark County, Washington. When the time came to start working on the final project for DTC 491 “Digital Cinema”, I felt as if I could take the idea for the photography zine and re-create the idea as a cinematic work. I dedicated an entire day to filming, capturing shots of rural Clark County that I felt best represented the area. In regards to my editing process, I created a montage sequence of the shots I had taken in order to encapsulate the desolate, slower-paced way of life in rural Clark County, while allowing the viewer to create their own interpretation of the region.
Music: "Drawn Black" by Hotel Neon
Special thanks to Elaina Sundwall for being my guide around the area during the creation of this project.
DTC 208 - Introduction to Digital Cinema, Prof. David Alonzo
“Seen” was the final film project for the Introduction to Digital Cinema (DTC 208) course, Summer 2019. Class lessons on narrative structure, lighting, filming, editing, and production, using various media and equipment, built up to this collaborative effort. Students were given the opportunity to function as a real film crew from start to finish, with each being assigned roles such as Director, Producer, Writer/Script Supervisor, Editor, Photography, Production, Actors, etc. The student screenplay was written during an earlier project in the course and was modified to accommodate local shooting locations. The narrative story was inspired by an actual event and the writer’s desire to bring attention to the struggles of returning veterans.
(Written by Jen Yager, screenwriter for "Seen")
DTC 491 - Digital Cinema, Prof. Will Luers
This is an interview with DianaLynn Canfield, a licensed clinical social worker, about how she cleanses her therapy space, including how she cleanses using her drum. The video begins with the sound of the drum to build interest, paired with a montage to establish place. Next DianaLynn introduces that therapists need to cleanse their space between clients, then she talks about some of her methods for cleansing the space, and finally we return to the drumming. During the drumming we see more of her personality, as she talks about projecting love into her space using her intentions and that drumming is an act of self-love as well.
DTC 336 - Animation, Prof. Brenda Grell
This assignment was meant to be an introduction to animating vector graphics while presenting information visually within specific constraints. Each element was constructed entirely in Adobe Illustrator at an isometric perspective and imported into Adobe After Effects.
I chose the topic of education reform and presented data relating to education inadequacies and dropout rates. Due to the 25 second time limit, I wasn't able to expand with more data, so I stuck with key pieces of data concluding with a call to action presenting a resource dedicated to helping struggling students as a way to step closer to solving the problem.
In the making of any creative work, there is a tension between the materiality of the media and the intentions of the maker. With digital media, the ease of manipulating code allows seemingly endless possibilities for intention. Changes to a digital media file can happen with a mere keyboard selection. The challenge for any maker, but particularly for digtal makers, is in allowing a conversation between materiality and intention. In CMDC classes, assignments provide specfic starting points and constraints so that a process of discovery with the material can take over.
Issue 29 features a range of CMDC student projects that exhibit this conversation between materiality and intention: a Twine remix of one of the earlist works of Interactive Fiction, a cinema poem in which text and video move forward, escape and retreat, five attention-getting animated public service anouncements, and a tribute video about man who was awarded First Citizen in Clark County Washington.
Will LuersDTC 338 - Electronic Literature, Prof. Will Luers
project launchRed Riding Cave Adventure is a combinatory, interactive fiction piece collectively written in twine. Our game references and draws inspiration from Colossal Cave Adventure and ZORK. Traversing more thoroughly or multiple times is rewarded with more text and multiple story endings. The narrative and structure were heavily influenced by the process of Jake and I collectively writing the work. It has game like structure and is traversed spatially like a piece of interactive fiction, while having a hyperlink structure by benefit of being made in twine. - Elaina Sundwall
DTC 338 - Electronic Literature, Prof. Will Luers
For my E-Literature Final Project, I created a kinetic poem in video format. Inspired by both kinetic poetry and cinema writing, I took a poem written for my Creative Writing: Poetry class and adapted it into a fully digital piece of literature. My intention was to evoke the feeling of running from a stressful situation, juxtaposing clear, calm reality with hazy, anxious memory through both text in motion and video cuts.
Independent Student Project, Prof. David Alsonso
This is a tribute video about Ed Barnes who was awarded the First Citizen award for outstanding community service in Clark County Washington. The video contains several different subjects who discuss the great attributes that characterizes Ed Barnes.
DTC 201 - Tools and Methods for Digital Technology, Prof. David Alonso
For our final project, we created a short, animated PSA about the “pay in exposure” epidemic. After doing a bit of research on the art industry and how much of an impact in has on the economy, we wanted to showcase what it means to pursue art as a career. The main message is that art is a luxury and not a right and should be treated as such. This PSA is mostly targeted towards the online community, and we hope that it has an impact in teaching the importance of respect in the art industry. As we did more research on this issue, we learned just how many different types of creatives were affected by this epidemic- not just fine artists. In our animation, we share stories from different kinds of creatives- writers, photographers, artists etc. We hope that this makes the subject more relatable and widens the target audience. When deciding how to use the five digital elements to showcase our viewpoint, we had difficulty trying to find a place for each. We remedied this by making the “social media” styled segment the focal point and included most of the elements during that segment. We kept the rest of the video simple by just using animated text to give a “call-to-action” feel. Instead of using a traditional narration for the piece, we decided to use powerful, impactful (royalty-free) music to create an attention-grabbing backdrop.
DTC 435 - Advanced Animation, Prof. Brenda Grell
For my first project for Advanced Animation, we were prompted to create a public service announcement for Vancouver Washington. I decided to go with a not-so-serious approach by creating a PSA on what to do if a giant movie monster "Kaiju" attacked the city. The goal and intent was to raise awareness of Washington's Emergency Resource Guide. It's a handy guide for what you should do given any natural or non-natural disaster. I created my own Kaiju-based symbol to fit the motif to feel like it would fit in as a page of the guide book. Through audio and visual effects, I tried to simulate an old television with a bad reception alongside some intense music to create a large feeling of tension and urgency. To create this, I found some useful free audio samples on Free Music Archive and Freesound for Creative Commons music and sound effects. Assembling them in REAPER, I then voiced over the PSA to a script I wrote. From there, a majority of the work was creating assets in Adobe Illustrator in which they were then imported over to After Effects to piece together. The biggest struggle with this project was figuring out how to pull off certain effects, such as the various effects that went into making the old television effect as well as some movement with the art assets like parallax scrolling in the first scene. Overall I'm pretty proud of how it turned out as it plays into some silly themes I find interesting and fun while pertaining to the class assignment.
DTC 435 - Advanced Animation, Prof. Brenda Grell
This was the first project for the DTC 435 Advanced Animation class. We were tasked with making a 30 second long PSA on a topic of our choosing. My PSA was animated through the use of Adobe After Effects over a period of three weeks. Each character or item was drawn in Adobe Illustrator and then imported into a single composition file in After Effects. Additionally, the audio was also edited together in the After Effects Program. The topic I chose for this my animated PSA was the consequences of leaving uncovered food out overnight in one's house. This was inspired by the personal experiences at my own home where we continually have ant problems due to family members not properly sealing or putting away their food after they are finished eating. I created several basic character designs to easily animate in the animation. Altogether, there are about 40 different layers that were animated in the actual composition. One of my goals for this project was to make the human character very expressive with blinking eyes and many different heads with dramatic expressions that were drawn in Illustrator. Another one of my goals was to see how well I could utilize only one background for the entirety of the video. The animation is confined to only one background that changes with the use of different windows for day and night, as well as the different characters that appear in the room, like the bugs. In the end, I felt very satisfied with this PSA animation.
DTC 435 - Advanced Animation, Prof. Brenda Grell
This is a Public Service Announcement about the vegans and the vegan industry.Initially the idea behind this was that this was a response to things vegans typically hear as criticism from other people. However, I believe this could also be interpreted in a different way in that it's a wake-up call to vegans. It's not a bad thing to be an activist, but I believe that people who are passionate about something shouldn't make it a barrier in between their relationships with other people.I should mention that this is also from the perspective of a vegan, so take it with a grain of salt. The assets were made in Photoshop and assembled and animated in After Effects. The character was inspired by the animation style of the YouTube channel "Odd1sOut." I think that the simplistic character design will hopefully help people to envision themselves in the position of them, and perhaps reflect on the idea that they might be guilty of pushing their ideals on other people as well.The broccoli in the video was a 3D model created in Autodesk Maya and rotoscoped in Photoshop. This was the part that I enjoyed the most out of the video, and I think it fits well with what the text was explaining over the visual.The most difficult part of the project was the transitions between the scenes, and lining it up with the audio. I think I could have improved the pacing a bit, and even cut out a few things to improve the coherency of the overall piece.
DTC 435 - Advanced Animation, Prof. Brenda Grell
This is a Public Service Announcement regarding the measles outbreak in Clark County, Washington during the winter of 2019. It draws on the “Measles Investigation” posted on Clark County’s website (clark.wa.gov). At the time this animation was being produced (January 24th), thirty confirmed cases of measles had been reported since January 1st. By the time the animation was posted (February 13th), there were fifty-three confirmed cases reported. In addition to referencing clark.wa.gov, mayoclinic.org was used to determine the effects of measles. The outbreak has become a major concern to people within Clark County, many of which are seeking more information regarding the topic. Popularly visited areas, such as Kaiser Orchard’s Medical Office, are being listed by clark.wa.gov if suspected to be contaminated by the virus. Because of this recent issue, the goal of the animation is to inform locals about the signs of measles, statistics on the recent outbreak in the area, what actions they can take for protection, and where to learn more.
"Worldbuilding" is the process of constructing an imaginary world, or whole fictional universe. While the word is used specifically in reference to making games and fantasy fiction, its meaning can be applied to any form of storytelling. Plot and character are important, but so are the details that construct the story world for the imagination.
Issue 28 features a range of student digital projects that build story worlds. Whether it is a short video fiction, a mini-documentary an interactive fiction, a game or 3D animation, CMDC students learn to build worlds out of landscapes, objects, facial expressions, gestures and actions. These details must work for the imagination in creating a believable whole out of fragments. In DTC 491, Digital Cinema, students learn about the importance of "visual evidence": the depiction of visual (and auditory) details that will convey setting, character, plot and meaning. In documentary work, "B-roll" is what drives narration with details that are supported by the interviews or voice over. In interactive fiction and games, writing, design and interactivity work to build cohesive story world. In the animation projects featured here, personalities, humor and conflict are conveyed from the gestures and movements of chess pieces.
Will LuersDTC 491 - Digital Cinema, Prof. Will Luers
When I began this project, I did not start with what visual effects I wanted to incorporate, or what action scene I could create. I wanted to tell a good story. Any piece of cinema needs good story. That was my goal. Moreover, I began with the script and started busting ideas out. This process was very important because without a good script, you will find yourself improvising later on, which can hurt the overall quality of the finished product. It took four drafts before the script was in a good place for the production to move foreward. Then, I began coordinating with my cast on what props we needed, what shooting locations we would be filming at, and I created a shot list so that I did not have to remember/imagine how I wanted the film to be shot. Then, using about four days for filming we finished shooting the film. Then post-production went into effect. The first thing in post-production that I did was edit the footage. I looked through all the shots, picked the best ones, cut them, reshot anything that I needed, and then tightened it up so I could work on the audio. Audio, by far, was the most challenging part of this project. For some scenes, I had to entirely replace the audio because the audio recorded on location did not work. Also, finding good SFX for gun shots, radios, and even footsteps was very time consuming. However, finding a good SFX is key to creating a scene that is believable. Once, I finished designing the SFX for the world the story took place in, I created the VFX for the muzzle flashes. Then I moved onto color grading, titles, and music to finish up the short film. It was a lengthy but rewarding process. The one thought that I kept in my head for the entire production of the short film, when doing any task, was: "How does this part effect the story?" It is very important to keep story in the forefront of everything for cinema because if you do not, the film could drag, be confusing, or just lack direction.
DTC 491 - Digital Cinema, Prof. Will Luers
I've always loved "behind-the-scenes" type videos - the ones that explain how something was made, or a look into a creative process before the final product is produced. With that in mind, I knew for this final project that I wanted to create something of that sort, so I chose a documentary style. Filming my friends in local band Holiday Friends was a natural fit for the project, as it allowed me to tell a story by shooting all aspects leading up to a single show of theirs. Essentially, I shot one night of interviews and rehearsal, and a separate night of the actual concert. I asked certain questions that I knew would provide good visual evidence, such as the ones about rehearsing and pre-show rituals, and listened to the interview in between shoot days so I was prepared to film anything else that had mentioned. Making everything cohesive required a lot of piecing together and was actually done more-so at the end, when I listened to the interview and realized that a certain few sentences would go perfectly over a certain bit of footage. For example, pairing footage of the crowd and their phone lights, and the band jumping, with audio of the drummer talking about the magic that sometimes happens on stage. In terms of storytelling, I wanted it to be fairly chronological to demonstrate that these are the things that go into a single show for the band. I also tried to vary my framing to keep it visually interesting.
DTC 491 - Digital Cinema, Prof. Will Luers
In creating Dylan's story, I wanted to show the emotional journey of going through the gender transition process. To make this work, Dylan and I talked about her thoughts and feelings about the process before we sat down and had a straight forward interview. Going to multiple locations and filming helped make the conversation flow more naturally. Doing this allowed me to collect some visual evidence to strengthen then narrative. Timing was key when creating this documentary, as it gives the viewer a chance to let the information sink in, and offers the chance to reflect and put themselves in her situation. The film came together in editing, where I was able to edit down hours of material into a narrative that captured the more raw and emotional aspects of her world.
DTC 491 - Digital Cinema, Prof. Will Luers
This is my career interview project for the WSUV CMDC Digital Cinematography course, and the profile video I was hired to create for the Ridgefield Boosters President and Ridgefield District Volunteer of the Year, Debbie McGravey.
DTC 491 - Digital Cinema, Prof. Will Luers
For this short documentary, I worked with Haily Holt and Mike Wilson, a Collegiate Shag dance instructing couple. I knew I wanted to highlight their dancing skills and love of vintage fashion, so I planned a list of the b-roll shots I wanted. I also prepared interview questions that were focused on getting them to talk about those things. We filmed at the Light Box, a beautiful studio in Portland. I filmed with my Canon 6d and used both a 50mm 1.4 lens and a 24-70mm 2.8 lens with a Rode Video Micro shotgun mic. I shot in 60fps so I could use slow motion for cinematic effect during the b-roll of them dancing. While the studio had the most amazing lighting, it had a super loud heating unit that made me regret not using a lav mic during the interview. During the video editing process, I realized I was lacking visual evidence to match them talking about the community and friendship aspects of dance, so I downloaded and used videos from their Facebook pages that showed them at many dance events with their friends. I really wanted to focus the narrative on the sense of pride and community they had built. Following this passion of theirs led them to create lifelong friendships all over the world. Overall I was happy with the end result.
DTC 491 - Digital Cinema, Prof. Will Luers
My mom always has a story. They're always beautiful, they're always heartfelt, and they always have a certain magic to them. They're also almost always about dogs. For my job/hobby profile, I wanted to try and capture some of her magic while also providing some basic information about what she does. Training truffle dogs is already a topic that usually gets a bit of interest- especially considering truffles' value in culinary communities- but it was important to me to highlight the deeper relationship that she has with her work and her truffle dog. I paid special attention to the framing of each shot to help accomplish those goals. Her interview is meant to feel casual and personal, so being down on the ground with her really helped ground the scene in a similar way. Medium and long shots left plenty of open space, helping to emphasize the forest and its important role in the story. It also left plenty of space for Rhu, the dog, to move around without having to maneuver the camera on my limited tripod. Framing also played an important role in helping the continuity of the video. I wanted to each shot to feel like it flowed into the next easily; letting the editing be as invisible as possible so her narration could take center stage. The choice to not use music was also aimed to help emphasize her narration and story. Hopefully, by only using the chirps and whispers of the forest behind her voice, the viewer can feel just a little closer bit closer to the moment.
DTC 208 Introduction to Digital Cinema, Prof. David Alonzo
"Story, story, story" is the word that enumerated consistently from Professor Alonzo. It can be so tempting to focus purely on getting the perfect lighting, or the steadiness of a shot when conformulating a film, but I chose to focus specifically on what the narrative of my "Hidden River Roasters: Mini Doc" would be. Making a story from basically no script is tricky, so the quality of the video relies a lot on what the interviewees say based off of questions. Using the acquired dialogue, I focused on presenting the world and people of Hidden River Roasters accurately, with a bit of exaggeration. I wanted to show each different tear of the company, so I made a point to interview a owner, a manager, and a barista. This way I could gather the rich perspectives of multiple people. When editing, wrapping these three different perspectives together was tricky, because they all gave unique answers. It quickly became apparent that these three interviewees are quite positive people, which is terrific in real life, but hampers building conflict for a narrative video. As a result, I had to use any minute conflict to establish a tension in making the story progress. By combining the perspectives of multiple members of the Hidden River Roasters family, I weaved the little bit of conflict they showed to represent the bean-based world they function in daily.
DTC 354- Digital Storytelling, Prof. Dene Grigar
project launch"Beyond the Horizon" is a fictional story created with HTML5, CSS, Jquery, and JavaScript. The story tells the tale of a mad monarch named Avarice. Avarice, believing the "others" beyond their borders are attempting to infiltrate their kingdom commands his people to destroy their land and lower his tower into a pit. The people of the land of Avarice forced at gunpoint are made to comply until they find themselves with the upper hand and finally put an end to his reign of terror. Beyond the Horizons art style was heavily influenced by author Stevan Zivadinovic's story Hobo Lobo of Hamelin. I very much enjoyed the rough and textured feel of Zivadonvic's imagery. I tried to encompass some of this same style in Beyond the Horizon as I believe it lends itself to the atmosphere created for this story. The narrative of Beyond the Horizon has a rhyme and cadence running through it that came about organically while trying to put pen to paper. Having never written any forms of poetry before, creating any semblance of rhythm became quite an endeavor. The audio, which can be played by selecting specific words throughout the text of the story, is used to engage the reader and aid in the creation of a sense of immersion.
DTC 354- Digital Storytelling, Prof. Dene Grigar
project launchFor my DTC 354 class, we were asked to create a game with a narrative. I chose to use RPG Maker MV, a template from Steam, to create my game. I had never used such a thing before so I watched tutorials and made some test maps until I had a basic concept of what I wanted to do. Based on the templates allowed, I focused my narrative around "anthro" or people with animal-like features, such as cat ears or tails. My protagonist, is an anthro woman who has been enslaved to a human Lord who has somehow been erasing her memories, and also torturing her, to keep her compliant and under his control. Using the RPG maker, I was able to build each map in my image; the castle, the city, and nearly every character with a name and emotion, was my own creation. It was after the main story line that I realized there are pre-loaded maps to use and I did change or use some as a base further on in the story. After this project I have found that I thoroughly enjoy using RPG Maker MV and will be using it again in the future.
DTC 335 - 3D Animation, Prof. Brenda Grell
Starting from a storyboard Cody came up with the idea of implementing robots and a “cheesy” transformation scene that starts at 27 seconds. Since we all like anime we wanted to stylize the transformation scene to be similar in taste along with some of the music. The models were divided amongst each group member; Cody modeled the chess pieces/robots/stereo/chess board, Val modeled the chairs, and Miranda modeled the table/tear drop. The hardest part during this project was learning how to correctly rig both robots and get them to bend in the correct direction along with making sure each piece moved appropriately. This was done by Cody and it made animating a lot easier later on. Rigging each robot provided a more “realistic” movement pattern that the robots carried out compared to the separate pieces. The lighting throughout the animation was done by Cody as well as most of the textures, Val and Miranda textured the table and chairs and Miranda edited the skydome by lowering the saturation and giving it a slight gaussian blur to prevent distraction. Along with rendering, the animation including the cameras was divided by each group member to complete; 1-6/20-27 seconds was done by Cody, 7-13 was done by Val, and 14-19 was done by Miranda. The rest was; 28-40/62-68 seconds was done by Cody (transformation scene), 41-61/69-84 was done by Miranda. The final music, SFX, and compilation of the whole project was done by Val in After Effects to get it ready to upload in Vimeo.
DTC 335 - 3D Animation, Prof. Brenda Grell
The DTC 335 class taught by Brenda Grell served to introduce how to model and animate 3D figures in the program Maya and render them into a video. Through the class, we were asked to work in groups and create a short animation using chess pieces to display the skills we learned in the class. For our animation, we wanted to create a chess playing chess theme. We thought it would be cool, and a little bit funny, if chess was playing chess through a computer. Then we brainstormed how we would go about creating our animation. We decided we would animate two separate files on Maya, one of the chess pieces playing on the keyboard and another of the actual screen game they play. After creating these elements, we would then use Adobe After Effects to join them.
DTC 335 - 3D Animation, Prof. Brenda Grell
Cosmosian Love is a tale of love conquering war and hate. Where all it takes is one or two individuals who can see past each others differences and come together to tip the scales in their favor. Finding the beauty in one another to break down walls in a society that would dictate sides is where power truly lies. Life doesn't have to be a game in which you're a pawn. Blaze your own path.
DTC 335 - 3D Animation, Prof. Brenda Grell
Peace Among the Pieces" is an animated story about a pawn rebelling against its ruthless leader, advocating for peace after years of pointless violence and bloodshed between the two sides. The animation was created by students of the CMDC program in Washington State University, Vancouver. The goal of the assignment was to communicate a narrative through the use of chess pieces, and to demonstrate an understanding of the concepts learned over the course.
DTC 335 - 3D Animation, Prof. Brenda Grell
This video opens with a sweeping panning motion of the battle between the silver pieces and the gold pieces. The battlefield takes place in a pixelated clearing surrounded by pine and oak trees. A violent explosion greets the scene with a tree falling upon members of the gold team, who cry out in pain. Our story follows the hero, the golden mustachioed pawn. After the death of the golden king's queen at the hands of the silver bishop, the king is maddened with rage and grief at the death of his beloved. The hero is given a top secret mission to infiltrate the enemy lines to kill the enemy king. Our hero rides into battle on a majestic unicorn and engages in an epic battle with the silver bishop. Upon the defeat of the silver bishop, he takes his head and uses it as a disguise to take his place next to the enemy king. The hero is reminded of his mission and without hesitation, stabs the king in the torso. The silver king is strong and remains standing. With our hero's true identity exposed before the king, he makes a last ditch effort to make the king fall by launching his disguise at the silver king, rendering the king unconscious. The camera zooms out as the king takes his last breaths, and the golden pieces rejoice once the silver king's crown is raised confirming the victory. Realizing the battle is lost, the silver queen admits her defeat and raises the white flag of surrender.
Issue 27 of the Nouspace Student Research Gallery features 10 projects that are in some sense immersive experiences. The new Special Topics course taught by Professor Dene Grigar, DTC 338 VR/AR Environments, brought CMDC students a class dedicated to the theory and practice of virtuality and augmented reality. The great variety in these class projects, from conception to execution, is testament to the possibilities of immersive and embodied technology in the fields of education, therapy and good 'ole kinesthetic fun.
Along with the new VR class, two new video classes DTC 208 Introduction to Digital Cinema and DTC 491 Digital Cinema furthur develop the CMDC program in the area of digital video. Both are theory and practice classes, providing students with foundations in cinema language and history, along with the latest practices of online video journalism, fictional shorts, remix video, interactive and database cinema. The video works in this issue all use techniques of cinematic immersion, yet each depicts a unique story world or emotional environment.
Will LuersVirtual Reality
DTC338- VR/AR Environments, Prof. Dene Grigar
My team's objective for creating the Radioactive Rock Monster project was to combine the player and audience experience as much as possible. Specifically, have you ever wondered what it would feel like to be in a movie, not acting in a movie, but experiencing the events portrayed? What would it feel like to physically stand next to the super spy, or super hero while they save the world? VR allows players to get that experience and we wanted to reach a level of immersion that extends beyond the player to the viewer. We focused on building up the viewer experience with a trailer video in order to create tension for the viewer that would transfer to watching the player in the game. We added in game tension building elements such as a timer that counts down, music and sounds designed specifically to produce feelings of unease and a clip of the trailer to connect the game and the video. We also placed a rock climbing helmet in the game on the player and two pick axes for picking up ammunition rock that were visible to the viewer in the green-screen environment. Our goal was to firmly place the player in the scene for the viewer to make a connection between their self and the prescience the player experiences. We worked hard on making the VR terrain as real as possible so that the fantastic elements, the monster, glowing axes with super strength and cartoon helmet on the players head, would juxtapose with the terrain in an interesting way that actually helps the player and viewer suspend disbelief a little as if experiencing a motion picture in real time.
oVRflow Demo Video from TWSKO on Vimeo.
Virtual Reality
DTC338- VR/AR Environments, Prof. Dene Grigar
Integrating virtual artifacts and interactions with graspable, real-life objects, our Mixed Reality experiments help educate K-12 STEM students in practical but captivating ways. This demonstration re-imagines the classic baking soda and vinegar volcano as a tangible digital experience. Using Vive controllers, students hold digital flasks containing the "baking soda" and "vinegar," which they can pour into a scaled-down, but lifelike, 3D volcano. Once both "substances" mix in the crater, an animated eruption catapults sparks, smoke, and lava. Not only does oVRflow teach the same chemistry as the traditional experiment, it does it in more exciting, cleaner, economic, and sustainable ways. The experiment can be repeated over and over and conducted virtually anywhere.
Virtual Reality
DTC338- VR/AR Environments, Prof. Dene Grigar
In this environment, the user is standing on a platform and has to solve a series of puzzles in order to advance to the next platform. The user's main goal is to “balance” on these platforms while simultaneously finding and pressing buttons to unlock the next platform. There are attacking objects that are directed at the user that must be deflected with a shield. More objects will appear with each platform which will make it more difficult for the user to advance. When the attacking object collides with the shield the object disappears. The user's body occupies an actual space on the platform and if they look over the edge or down for too long then they will fall and the scene will reload. This experience is designed to test the user's multitasking ability under stressful conditions. The project is being developed with Unity and tested on an HTC Vive while utilizing the stereo camera to show the user's interaction in real space.
Video
DTC491- Digital Cinema, Prof. Will Luers
project launch
Our primary vision for this mixed reality project was to create a physical therapy training aid for those entering the field of physical therapy. In our project, physical therapy students will engage with a virtual dummy. The virtual dummy, acting as a stand in for a physical therapy patient, will allow students and trainees to practice techniques that would otherwise be practiced on expensive medical manikins. Upon starting the program, trainees will be presented with the option of choosing which physical therapy techniques they'd like to practice. These could include a variety of different exercises such as shoulder rotations, scaptions (the elevation of the scapular plane), shoulder extensions, and possibly more. From here, users will be placed into a physical therapy room where they will see a manikin in which they can manipulate and another manikin which will be demoing the movement and techniques for each specific scenario. Our current model allows for an internal shoulder rotation exercise used for strengthening and shoulder injury prevention.
When the trainee approaches the manikin they will be prompted through the use of visual cues where to place their hands on the dummy. As the trainee manipulates the manikin and follows the training exercise they will be informed of techniques to remember (such as reminding the trainee to keep the patients elbow close to their body). Upon successfully completing the training exercise the user will be notified with an auditory cue and returned to the starting screen.
The use of a virtual manikin and a virtual environment come with many affordances not found in traditional training methods. The virtual mannequins will help alleviate the exorbitant costs of a providing medical manikins (ranging from $1500-$3000 per manikin) for students. Further, costs found in hiring trainers and providing training locations can be cut through the affordances of distance based and virtual learning.
Video
DTC491- Digital Cinema, Prof. Will Luers
Dear Enemy, by Valerie Parrish
You trespass with darkness
A paralyzing blanket of deception
Causing an escalation of fear
Torturing the vulnerable soul
I see you
Draining your victim's light
Slithering into the streams of my being
The anguish
The despair
The pain
Though I must warn you
My strength
You've underestimated
Your malice has seen its final days
Welcome to your downfall
Video
DTC491- Digital Cinema, Prof. Will Luers
This is a short documentary about how this band writes their music and how their ideas work together to become the songs that they preform.
Video
DTC491- Digital Cinema, Prof. Will Luers
Forgotten is a hybrid/fictional video that focuses on a girl that suddenly wakes up in the forest. Unable recall past events that could have to lead her to where she is, she tries to uncover the truth to the forest and discover why she was brought there. However, some things are better left undiscovered…
Video
DTC491- Digital Cinema, Prof. Will Luers
Creative burnouts happen at the most inopportune times. It just so happens that I was experiencing one this semester, and it really took a toll on my final project for this class. I originally wanted to create a video about how difficult it is to deal with sensory input when I am reading. However, as I was planning out the project I realized that my vision could not be expressed in a simple video and required a lot more special effects than I was capable of. Weeks went by while I tried to beat an idea out of my head. I had gone to a few locations and shot some random footage, hoping for any kind of spark of inspiration, but I ended up with nothing. For a brief moment, I played with the idea of doing a short biopic of myself, or something that captured my frustration of the semester, but both of these ideas felt flat and unappealing. A week before the rough cut was due, it was suggested by Will Luers that I write about the creative block I was experiencing, as well as to put my footage together and try to write a story to the images. The result was my final project titled “Creative Blocks are AWFUL”.
Video
DTC491- Digital Cinema, Prof. Will Luers
project launch
For my final project in DTC 491 (Digital Cinema) I went for trying to make a hypervideo website made entirely from using short ten to thirty second loops. The most difficult part of the assignment was that I had to show narrative or some kind of storyline. Even more difficult was trying to find ways to make the story loops branch off into a multilinear storyline. I was successful at making ten loops with narrative, all linked to the hyper template, and proper CSS. The part that I was unsuccessful about was having the storyline be multilinear. I wanted this to be a game in which the player has to start over if they don't pick the right button from two button options. I could only get my girlfriend and myself to act in the loops so I made most of the story about her character. I wanted the website to be about a mysterious woman who seems like a normal and everyday woman running errands, but she really has a hidden agenda. This is a cinema game in which you click the screen to move forward in the story.
Video
DTC491- Digital Cinema, Prof. Will Luers
project launch
Persons of Interest is a database narrative that tells the story of four young adults whose friend has been murdered and they were the last ones to see her. The story is told through police interrogation videos and occasionally shows flashbacks of what the friends are describing. The clips can be viewed in any order but are on the website in an order that clearly tells the viewers what happened and by the end it will be fairly obvious who the killer is.
The CMDC program gives students the skills to design, code and build digital objects for practical uses in the world. The program also encourages students to break with standard methods and techniques in order invent new forms, either by working with emerging technologies or rethinking more common forms of communication.
The projects featured in the Issue 26 of the Nouspace Student Research Gallery are all thoughtful in their design and implementation, but stand out in their creative invention of objects that have not existed before. The Senior Seminar project for Providence Academy was a large endeavor involving an app with augmented reality and a media-rich website. Bill Erickson went in his own direction with a work of electronic literature that uses JavaScript to change a text in unexpected ways. Evan Torres went beyond the standard JavaScript battle game by getting the user to stategize against an opponent. John Alexander created a geolocative game that can be played wherever you are. Katelyn Lindsey mixed a riddle game with the horror genre. And Holly Slocum used effective parallax animation to persuade about the global impact of the clothing industry.
Will LuersUnity, HTML, CSS and JavaScript, Video
DTC497- Senior Seminar, Dr. Dene Grigar
project launch
Students of the Creative Media and Digital Culture program at Washington State University Vancouver have created a visitors' engagement tool utilizing contemporary augmented reality technology via smartphone and tablet for Providence Academy in downtown Vancouver, WA. Students also developed an interactive website with a digital timeline that further showcases the accolades of Mother Joseph and accompanies the content of the application.
Web Dev Team
Jessica Smith, Team Leader
Nick Chow
Jenel Cohen
Austin Lewis
Jen Prosser
Mark Campbell
Multimedia Design
Savage Savage, Team Leader
Chuck Mitchell
Polina Skylova
Content Development Team
Eli Campbell & MacKenzie Koch, Co-Team Leaders
Mitchell Barnette, video
Bernd Hoffman, audio
Samantha Van Luik, 3D modeling
MacKenzie Koch, video
Ryan Schafte, 3D modeling
Amanda Egan, animation
Digital Marketing Team
Adam Goddard, Team Leader
Brittany Davis
Cody Lane
HTML5, JavaScript, jQuery
DTC477 Advanced Multimedia Authoring, Prof. Will Luers
project launch
My desire with this piece is to make a work almost completely void of user interaction. I know that this runs counter to many popular uses of Javascript and jQuery development, especially as they pertain to creative works. Nevertheless, I want to create a work to be experienced and (almost) nothing else. I want to make a poem that evokes a certain angst as readers cede control to the narrative and to the code. Using Javascript timing events, I create an endlessly scrolling text that changes one line at a time on a 45.5 second interval; to stagger all the line changes, the first interval function is fired with a setTimeout of 0 second, the next interval is fired with a setTimeout of 1.5 seconds, and the subsequent functions all run thusly, 1.5 seconds apart. The hover function for pausing is blocked with a div that has been unbound from .mouseover, and it is set display none every time the last line change equals the first, or when the poem is in full view with all changes made. There is a history function written for each change, attached to a hoverIntent plugin, which I altered to delay for roughly 30 second. When fired, the history function cycles rapidly through all changes made until stopping at the first; upon moving away, it resumes where it left off. Each interval records its own state, so that, when paused, it will resume where it left off with the remaining time between intervals and with the correct text change. Because the scroll function operates on a pixel height, there are minor inconsistencies in the time taken to revolve the text as it changes, thus discrepancies arise in the percieved timing of word changes as well. Likewise, sometimes, when paused, the resume function misfires and throws the timing. All of these inconsistencies, I think, play into the overarching themes of the poem itself. Finally, all the audio and visual effects are made with conditionals based on the state of line changes, which are recorded as global variables so that I could call up their state at any point in the poem. I was thus able to effect changes at particular points when the mood changes. None of the style changes are subject to timing events, so they are unaffected by pauses. All code and music attributes below.
HTML5, JavaScript, jQuery
DTC477 Advanced Multimedia Authoring, Prof. Will Luers
project launch
Inspired by classic RPG games, where your imagination drove how monsters and heroes looked, Evan's Battler pits you, the hero, against an enemy with semi-randomly generated stats. The goal of the project was to create a simple battle engine with a few options for customization, including weapons, stats and trinkets. This goal was met beautifully and the game now has 27 options for trinkets, 5 weapons, a somewhat balanced enemy generator, an enemy description, and three classes to choose from.
The greatest challenge I faced was cleaning up the project from it's rough form during midterms, as well as modifying it to use arrays for the different weapons and trinkets available to the player: There were initially three different sections where I had to put the information for all of the items in the game as I added them, but now I simply have to fill out a single array. In theory, I could add as many or as few items as I want at this point.
HTML5, JavaScript, jQuery
DTC477 Advanced Multimedia Authoring, Prof. Will Luers
project launch
Bomb Run is a Geolocation based game for both those who jog/run or those who just want to play outdoors. This is the first game I've ever coded using HTML, CSS, and Javascript. The process of creating this game has been a very fun and challenging experience. I first began this project working with the Google Maps API unsure of what possiblities were attainable with a very basic knowledge of Javascript. Through many hours of research and help from many sources I was able to get this game running. The two main and invaluable sources in the creation of this project have been w3Schools.com and StackOverFlow.com. They both contain an amazing body of knowledge for anyone learning Javascript. Below is a list of many of the specific sources I accessed in creation of this project.
HTML5, JavaScript, jQuery
DTC477 Advanced Multimedia Authoring, Prof. Will Luers
project launch
For my project, I wanted to create a simple horror game using Javascript. This is something that I had never attempted before and so I thought the challenge would be fun. I ended up writing more Javascript than I ever have in my life and ended up with this vaguely creepy game. Most of the time I spent on this project was doing research for various things I wanted to accomplish in the game, such as the typing function. Overall, I am happy with the way that it turned out and I would like to continue the story of "Annie's Dollhouse" in the future.
HTML5, JavaScript, jQuery
DTC355 Multimedia Authoring, Prof. Will Luers
project launch
Hope is not lost. Technology and information has give workers in affected countries tools to begin to fight back. Protests, worker's rights groups, and businesses are working toward putting an end to the mistreatment of gamrent workers. Fashion is big though, and it's become a central part of many people's lives. Change won't happen over, and they can't do it alone. As long as we keep buying the clothes they die upon, their fight is made harder. Buy used clothes. Research companies that support fair trade practices and work to fix where the supply chain has failed and buy from them. Make businesses that source ethically and care about humanity your priority, and leave the heartless giants of the past behind.
The hardware and software for making video is now ubiquitous, accesible and affordable. Many of us have a production and post-production studio on our smartphone.
DTC 491 / DIGITAL CINEMA is a new CMDC course that addresses these many technical, social and professional changes in video as a communcation medium and artistic practice. Students are exposed to a range of digital cinema styles and approaches – video journalism, video remix, “webisodes”, cinematic games, hyperlinked video, video installation and database cinema-–and ultimately choose the approach that fits best with their creative and professional goals.
The course also gives students practical experience in working with digital video cameras and audio recorders, developing storyboards, interviewing and lighting subjects, editing with Adobe Premiere, integrating video on a webpage and preparing and distributing video for the web. The course approaches video production less as a set of specialized technical skills using high-end equipment, and more as a set of composition practices using commonly used tools.
The three works featured in Issue 25 show the range of expressive styles and approaches in our students' growing interest in cinema arts.
Will LuersAdobe Premiere
DTC338- Digital Cinema, Prof. Will Luers
project launch
"The inspiration for this work came after watching a few films directed by Terrence Mallick. I was intrigued with his ability to capture powerful and complex feelings, emotions and relationships while using limited dialogue. My vision was to portray the struggle that can exist within ourselves to deal with the competing forces of good and evil. I wanted to capture someone who was trying to understand the presence of an overbearing corruptness within herself, while externally she existed in a beautiful world. My biggest takeaway is to always shoot footage in good lighting, you can always adjust the feel and atmosphere while editing without compromising detail." - Julli Krishcko
Adobe Premiere. After Effects
DTC338- Digital Cinema, Prof. Will Luers
"Anyone who's ever had roommates will agree that it can be difficult to get along sometimes and it's no different for Jedi's. The point I was trying to make in this video was that fighting gets you nowhere and in this case only makes the mess bigger. The video was my final project in the Digital Cinema class. I wanted to use this video to showcase my cinematography, Adobe Premiere, and After Effects skills. My biggest challenge was working within such a confided space such as a kitchen. It really limited the shots that I was able to get. It made me think outside of the box and ultimately I decided to have the fight start in the living room and end up in the kitchen." - Cody Gilbert
Adobe Premiere
DTC338- Digital Cinema, Prof. Will Luers
project launch
"This project started out as a job profile (intended to show what someone does for work) and turned into a short documentary about going back to school and changing careers. I filmed Bill Erickson either in his Glass Shop or at his home, depending on the subject of the interview questions. When we were discussing glass cutting, we were at the shop, and when we were discussing his switch to education and writing, I filmed him in his home that is littered with books. The locations acted as visual evidence for b-roll and allowed for shots of him performing the actions he was talking about. One challenge I ran into was the microphone not working. I had to rely on the on camera mic, which let in a lot of traffic noise when we were filming in the shop. I have titled the work “Glass Ladder” because Bill has reached the top of the Glass industry ladder, which couldn't support his intellectual passions." - Taylor Jones
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 LuersHTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch
HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch
HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch
HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch
HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch
HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch
HTML5, jQuery, Responsive Design, Photoshop
DTC355 Multimedia Authoring, Prof. Will Luers
project launch
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 LuersHTML5, 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
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
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
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.
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.
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 LuersAdobe 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
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
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
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
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
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
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.
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
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
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
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
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
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
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
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
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
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
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
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.
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.
Issue 18 of the Nouspace Student Research Gallery highlights the work of CMDC students
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 LuersMaya, Adobe Illustrator
DTC336- 3D Animation, Prof. Brenda Grell
project launch
Anti-Nitrous Discrimination is an organization dedicated to the equal treatment of humans and the Nitrous people.
HTML5, CSS3, JavaScript
DTC 477- Advanced Multimedia Authoring, Prof. Will Luers
project launch
Quiz...
HTML5, CSS3, JavaScript
DTC 477- Advanced Multimedia Authoring, Prof. Will Luers
project launch
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.
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".
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.
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.
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 LuersAdobe 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
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
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
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
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
Adobe AfterEffects, Adobe Illustrator
DTC338- 2D Animation, Prof. Brenda Grell
project launch
"" -Christopher Ellis
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
HTML5, CSS3, JS, Little Brother, Osculator
DTC 497- Senior Seminar, Dr. Dene Grigar
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.
HTML5, CSS3, JS, Little Brother, Osculator
DTC 336- Design and Composition, Prof. Dene Grigar
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.
HTML5, CSS3, JS, Little Brother, Osculator
DTC 336- Design and Composition, Dr. Dene Grigar
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.
HTML5, CSS3, JS, Little Brother, Osculator
DTC 336- Design and Composition, Dr. Dene Grigar
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.
HTML5, CSS3, JS, Little Brother, Osculator
DTC 336- Design and Composition, Dr. Dene Grigar
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.
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 LuersHTML5, 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
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
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
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
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
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
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?...
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 LuersAurasma - 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.
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
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
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.
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
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
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 LuersHTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
HTML5 & CSS3
DTC 355 - Multimedia Authoring, Prof. Will Luers
project launch
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:
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:
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 LuersHTML5, 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…
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.
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.
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.
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.
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.
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.
Collaboration has always been central to the creation of digital objects. As with the production of industrial objects, digital objects require many levels of expertise and abstraction, from the design of front-end interfaces to the coding of back-end databases. While the CMDC program embraces hand-crafted singular visions, our students are given many oppourtunities to work together on larger projects.
Group projects allow students to contribute their individual strengths, learn new techniques and approaches from their colleagues, develop interpersonal skills and gain the professional confidence of working on projects that impact the greater community.
The three group projects highlighted in this issue of The Nouspace Student Gallery are all community-driven, creative projects that not only required a range of skill-sets to implement, but also balanced the need of invention with the specific needs of a community or organization.
Will LuersWordpress, Javascript, Video, Twitter and Facebook
DTC Senior Seminar, Dr. Dene Grigar
project launch
view video about #nextchapter
#nextchapter, a citywide reading and discussion program held during March and April of 2013, was designed to spread digital literacy throughout the Vancouver, Washington community. The community read, workshops, lectures and discussions focused on the book, Program or be Programmed: 10 Commands of the Digital Age, by author Douglas Rushkoff. Rushkoff's ten commands raise ethical issues that individuals of all ages face when using digital interfaces and products. The #nextchapter team created a website with upcoming events, a mapped book tracker, a way to purchase or check out a book, multiple social media platforms, an opening launch event with entertainment, community engagement and media press releases, 5,000 informative bookmarks with discussion questions on the back, a label to track 1,000 books on our website, and a mobile app that has all the functionalities of our website. These tasks and more were all accomplished during a three month engagement in the project.
Aurasma (AR platform), HTML/CSS, Video and Adobe Illustrator
DTC Senior Seminar, Dr. Dene Grigar
project launch
The project we created for the Community Foundation for Southwest Washington's (CFSWW) 2013 annual luncheon is an Augmented Reality (AR) environment that highlights philanthropy through contributions of community members by employing multimedia objects such as animations, infographics, and video that were produced by our three content specialists: Michael Chaudoin, Andrew Dizinno, and Joshua Clem. All media objects are loaded into Aurasma (our AR platform of choice) by our team's AR consultant Jason Cook, and accessed through a mobile device such as an iPad or smartphone. The media objects are introduced through "trigger images" which are displayed on 12 10'4' banners that our lead designer Stephanie Bailey composed using Adobe Illustrator CS6. In addition, an interactive website for the event was hand-coded by our web developer Emily Spannring to archive all media objects so that they may be further explored in the future. Project manager Morgan Hutchinson is responsible for guiding the development of all project elements and facilitating communication between the team and the CFSWW.
For more information about CFSWW's annual luncheon, please visit their website
Video, HTML and Adobe Photoshop
ComJour333 Reporting Across Platforms, Prof. Brett Oppegaard
project launch
We started with an empty field, a 300 page document, and some images. Our assignment was to create media content for an app about the former Spruce Mill that occupied the field now adjacent to Fort Vancouver. The class divided into three groups, each with complete freedom to pursue any topic related to the Spruce Mill. With little defined direction the groups set forth to learn about something forgotten.
Some of us researched and read numerous documents (including old microfilm), while others spent hours editing, recording, writing, and designing. While in production, we learned about the historical resources available in our community and was surprised by the amount of content and subjects available to explore related to the Mill.
CMDC faculty strive to provide students with the foundations in digital practice and theory that will help them respond creatively and analytically to their community's digital needs.
In the area of mobile production and publishing, The CMDC program has been a leader in the Vancouver/Portland commmunity. Through the 2009 Mobile Tech Research Initiative, students built an app for Dick Hannah Dealerships. Dr. Brett Oppegaard continues his research with students in mobile app storytelling for the national historical park, The Fort Vancouver. With Autovation, a permanent exhibit for the Oregon Museum for Science and Industry, Dr. Dene Grigar led her students to develop an augmented reality app for the iPad. In classes, students have taken the initiative to build apps for local companies, advocacy groups and cultural/educational institutions.
What kind of app does a local coffee business need? How do you access datasbases for the needs of a local kiteflying community? What is the best user interface for urban paddlers, national park tourists or a visitors to downtown galleries? How can a whoduunit game bring opportunities for social interaction on campus? The digital works featured in this issue of the Nouspace Student Research Gallery are mobile web apps made by students in DTC 477 Advanced Multimedia Authoring. DTC 477 builds on the HTML/CSS skills developed in DTC 355 and provides a broad look at the various tools, design approaches and scripting languages (such as HTML5, CSS3, Javascript and jQuery) for creating mobile web apps. Four of the featured apps are local information resources that include maps, gallery images, directories and even local advertising as possible revenue sources. One is a mystery game that involves traveling the campus of Washington State University, Vancouver to pick up clues. These are all apps in various stages of development, as students want to continue working on them and getting them out into the world.
Will LuersHTML5, CSS3, Javascript, jQuery, jQuermobile
DTC 477 Advanced Multimedia Authoring, Prof. Will Luers
project launch (if opening in a browser, narrow the width to simulate a mobile device)
UrbanPaddle provides a mobile resource for paddle sport enthusiast who want information and maps of rivers and other water features within the city. My current development focus is centered on stylistic elements. The use of translucency and cool, gray-blue colors is intended to reflect the unique water evironment of the Pacific Northwest. The app is still in ongoing development. I intend to migrate the code to native platforms and to continue implementating the large amount of media and locations required. Please click on the image to see the current version.
HTML5, CSS3, Javascript, jQuery, jQuermobile
DTC 477 Advanced Multimedia Authoring, Prof. Will Luers
project launch(if opening in a browser, narrow the width to simulate a mobile device)
"Galleries in Vancouver" is a mobile application for android and iPhone devices dedicated to bringing visitors to downtown Vancouver, Wa art galleries. The mobile app offers a menu that navigates to three other pages within the app. "Gallery" leads users to a page with a ‘swipe feature' to view inside and outside images of each gallery. The second button "List" provides the user with a list of all the galleries with contact information for each gallery page. In addition to the "List" there is a comments page for users to post information about each gallery. Finally, the app also provides a google map plug in with markers of all of the galleries, and a geolocation feature for easier navigation.
HTML5, CSS3, Javascript, jQuery, jQuermobile
DTC 477 Advanced Multimedia Authoring, Prof. Will Luers
project launch(if opening in a browser, narrow the width to simulate a mobile device)
This app was built as part of a project for the DTC 477 Adv. Multimedia Authoring class. It uses images, some audio, and a map to help guide visitors on an ordered tour of Officer's Row. In addition to information about a location on the Row, the app also provides short bio's of various famous or infamous people who lived in or visited one of the houses. The app is only partially complete in the sense that there is far more history and features that could be added. Content and feature may be added in future classes and/or projects. The plan is for this app to grow.
HTML5, CSS3, Javascript, jQuery, jQuermobile
DTC 477 Advanced Multimedia Authoring, Prof. Will Luers
project launch(if opening in a browser, narrow the width to simulate a mobile device)
I recreated the site KiteMap.org as a mobile web-app. The app features search via user location and address, a simplistic design, contact forms, submit forms, a slide in menu, and advertisements.The major pieces of this project were working with the menu, advertisements, search, and JSON structure. The menu is a modified plugin that took some work to get working properly with the desired look. The advertisements took some time getting the advertisement to display on the footer and randomize on each visit. I coded the advertisement section from scratch. The search function uses a storefinder plugin. I modified this to display properly for mobile devices, and to work well for this context. The search plugin utilizes .json as the source of data for the locations. I am using this .json format to allow the site to hold a large amount of data, without being particularly heavy, and without requiring a large amount of hand coding.
HTML5, CSS3, Javascript, jQuery, jQuermobile
DTC 477 Advanced Multimedia Authoring, Prof. Will Luers
project launch(if opening in a browser, narrow the width to simulate a mobile device)
In this mobile web application designed for DTC 477, WSU Vancouver students are encouraged to put their knowledge of the campus to the test in a Carmen Sandiego inspired crime solving game. As per the requirements of the course the application features the Google Maps API with custom markers to navigate through WSU Vancouver and solve the crime. The application features animations created with jQuery and forms coded in JavaScript with Notepad++ and Textwrangler. Adobe Photoshop was used to resize and isolate all of the images. The most challenging portion of the design was to create alternate pathways for incorrect locations and properly use callback functions when animating elements. Adept users will be able to solve the crime within nine pages yet this is less than half of the total content created. For future development I intend to update the application with more crimes to solve and explore the possibility of adding sound.
HTML5, CSS3, Javascript, jQuery, jQuermobile
DTC 477 Advanced Multimedia Authoring, Prof. Will Luers
project launch(if opening in a browser, narrow the width to simulate a mobile device)
The Black Rock Coffee app consists of six different page types including a home screen, RSS feed, contact form, map/store listings page, menu, and directions/store and bio pages. The app was created with Jquery Mobile and consists of HTML, CSS, Javascript and Google Maps API. Included in the app is a "get directions" feature integrating Google's navigation abilities. The app was presented to Black Rock Coffee Bar on December 7th, 2012 and a version will be made by Cameron Whitman and used by Black Rock Coffee Bar.
CMDC students, in almost all of their classes, explore forms of digital narrative. Narrative is perhaps the most familar form of communiation. We share anecdotes daily, consume stories across an array of media and discuss our appreciation for the subtleties of narrative art in novels, movies and television. But in many ways, narrative is the most difficult to teach within the context of computer-based digital media. How does one "tell a story" in a work that includes multiple links and media files? What are the narrative limitations and new possibilities of building and distributing nonlinear narratives? How should a narrative function when it is consumed in a networked environment, when another story is just a click away? These are questions that we ask students to examine in their creations, whether in a work of video, of journalism, of animation or of webdesign.
The digital works featured in this issue of the newly named Nouspace Student Research Gallery - named to coincide with the opening of The Nouspace Gallery and Media Lounge - are "narrative" in that they are time-based structures with beginnings, middles and ends. Two are "experimental" (a video story told with text and an animation about inanimate objects); and three are more "traditional" nonfiction narratives that use juxtapositions of video and text. All of the works push boundaries of what we term "narrative" in subtle and interestings ways.
Will Luerstext and video
COM 295, Dr. Brett Oppegaarde
project launch
"The following is a profile article I did for the required COM 295 course in the Communication minor. Students were tasked with selecting and securing a profile interview with a person in our chosen field, as well as multiple interviews with outside sources to cite in the piece. I was able to get an interview with Vancouver local, Season 11 American Idol Contestant, Britnee Kellogg. Research told me that Kellogg's previous interviews only skimmed the basic information of who she was and what her American Idol experience was like. Despite the varying pieces that covered her in the past, none made me feel like I knew her as a person. I didn't have a human connection to her, and wanted to achieve that in my piece. I also wanted to show the controversial side of her pursuing music as a single mom, raising two boys. The hard part was creating a cohesive work that was focused and well balanced, while giving a larger picture of who this person was and what she was facing. There was a lot to consider. I was surprised with how the piece came together. The actual writing process proved to be very organic and came together quite easily. I think this was due to the ground work of thorough research, asking the right questions, and building a good rapport with those interviewed. " - Marzee Dyer
video: LiveType & Final Cut Pro
DTC 354 Digital Storytelling, Dr. Dene Grigar
project launch
"Collection is a short, text driven video about the self-imposed loneliness of a man living behind his video camera. Though a technically simple piece made entirely in LiveType and Final Cut, this brief narrative exposes a raw, unwavering feeling of regret and helplessness." - Greg Philbrook
video: Final Cut Pro
COM 466 Video for News and Documentary, Prof. Will Luers
project launch
"My learning challenges in the project were multiple because I had never used a video camera prior to the class. I self taught myself to use the iMovie application by studying online tutorials and videos. From the class lectures, I gained concept ideas about editing. I overcame my total lack of knowledge regarding camera angles and audio by reading the class textbooks and listening to Prof. Luers explanations about what constitutes good video. Finally the challenges and experience of trying to get good video from real life situations was very vital. Each lesson brought new understanding which helped make the next video field event more fruitful." - Diana Brown
website, video
DTC 355 Multimedia Authoring
Prof. Will Luers
project launch
"This website was built primarily using DIV-based HTML and CSS, but also uses a small bit of jQuery for the drop-down menu. The process of creating just one of the books is quite long and involved, so it seemed only fitting to create and include sequential, sped-up videos of the creation process. The hope is that this emphasizes the amount of care and time involved in making each one." - Bryan Ruhe
3D animation, video
COM 466 Video for News and Documentary, Prof. Brenda Grell
project launch
"This project, being my first 3D project, turned out better than expected. Although not technically perfect, the animation tell a conclusive story with an unexpected ending. Lots was learned about the software and work flow within a short period of time. If more time was given, the textures would be parented correctly and animations smoothed out. Overall, I am happy with the quality and complexity of the project with the amount of time given and no prior knowledge of the software." - A. J. Robertson
There are currently 14 forms/genres of digital media:
The projects in issue 9 of the Student Research Gallery demonstrate the innovation, the responsiveness to community and civic issues, and the range and of digital objects produced in CMDC classes. Nicole Buckner used Google Maps to create a national multimedia map of Occupy Wall Street activity. Aaron Wintersong and Greg Philbrook created games that raise moral questions. Geoff Wallace created an Arduino sensor-based drumkit that acts as an interface to a multimedia performance. The Autovation team worked with Oregon Museum of Science and Industry (OMSI) and Dick Hannah Dealerships to create a 3D simulation for a car exhibit. Students from The Mobile Tech Research Initiative (MTRI) worked together through four classes in the summer of 2011 to produce the first CMDC native iOS and Android app for Dick Hannah Dealerships.
As the CMDC program grows alongside the growth and impact of digital technology in all facets of daily life, we encourage students to find new aesthetic and meaningful forms that integrate media, and that engage users with a wider community.
- Will Luers, visiting professor
Google Maps
DTC 338 Social Media, Dr. Kathi Berens
project launch
"The "Occupy Global Map" is an ongoing collaborative research project that involved several students from a WSU-V social media class. The students researched and added information related to the 2011 Occupy Wall Street Movement to an interactive Google Map. The map is a functional guide that includes links, photos, and videos to organize and illustrate Occupy events. Contributed Content by: Nicole Buckner, Mark VanTassel, Madi Kozacek, Vernon Blystone and Kathleen Schultheis, Saundra Beauchaine, Katie Campbell, Phil MacArthur, and Zachary Stahlr." - Nicole Buckner
Adobe Premiere Pro, Reaper(x64) Digital Audio Workstation
DTC 338 Games for Art, Prof. Kathi Rick
project launch
"The Puppet game-world explores the effects of our current economy, driven by consumption, on the daily life of the individual. Specifically, it examines the relationship between those who possess significant capital advantage and those who have few economic resources. In essence, Puppet is a social experiment carried out in an environment that could be described a live-action role playing game with a gambling twist. It allows players to make money by subjecting a person, the puppet, to debasement and privation. The intent is to provide a relatively granular examination of a global condition; individuals and societies regularly leverage economic power to gain benefit at the expense of the less fortunate. The Puppet project proposes to answer a question that underscores current worldwide inequality: to what extent will humans deprive others for their personal gain?"- Aaron Wintersong
Inform 7
DTC 338 Games for Art, Prof. Kathi Rick
project launch
"As you explore the house in "one," you will find yourself faced with morally ambiguous choices. "one" is not a traditional text-based adventure game, as there is no true ending. The game has a definite beginning, but it only concludes when you as a player decide to end it. The game is as much an experiment with content as it is with form. Though "one" is far from finished, the current version gives the player a brief look at the game's questions on morality and narrative." - Greg Phibrook
Unity 3d, Mateio, Junaio
HUM 338 Dr. Dene Grigar
project launch
"Using an iterative design process, with input from Oregon Museum of Science and Industry (OMSI) and Dick Hannah Dealerships, we are developing "Autovation," an interactive augmented reality environment about innovative car technology. To create this project, we have researched over 100 design ideas involving digital media installations from across the world in fields such as art, education, business, and science. Ideas that best related to the audience and exhibit goals were selected and expanded upon. As augmented reality became the front-runner of technologies for further exploration, the project goals were narrowed to analyze the applications of the emerging technological medium." - Autovation Team: Jason Clarke, Jason Cook, Hunter Crawford, Natalya Gruntkovskiy, Jacob Hochhalter, Madi Kozacek, Michael Langlois, Kerri Lingo, Anaya Martella
HTML5, CSS3, Javascript, jQuery Mobile Framework, iOS & Android Dev Tools
Mobile Tech Research Initiative: DTC 478, DTC 477, DTC 338, DTC 336
project launch
"The Mobile Tech Research Initiative (MTRI) was a special summer program that taught students to produce cutting edge environments in mobile media. MTRI focused on the imagination, conceptualization, and production of smartphone app technology, spanning both front-end design to back-end development. The culmination of the program was a smartphone app for the iPhone, called "Dick Hannah Customer Care," developed for Dick Hannah Dealerships, a leading car dealer in the Pacific Northwest. MTRI Fellows: Hunter Crawford, Natalya Gruntkovskiy, Michael Langlois, Kerri Lingo, Anaya Martella, Chad McClure, Brian McGovern, Artem Popov, Kathleen Schultheis, Margarete Strawn
Arduino, Resolume Avenue, Ableton Live
DTC 476 Digital Literacies, Dr. John Barber
project launch
"IMPACT/backlash is an interactive multimedia project envisioned, conceptualized, and in development at Washington State University Vancouver. It is created by Geoff Wallace, a senior in The Creative Media and Digital Culture Program at Washington State University Vancouver. Utilizing Arduino sensor-based technology, IMPACT/backlash translates analogue cues into digital signals. This, in turn, produces behaviors in the form of video clips, sound responses, robotic light movements and smoke machine activation. The end result is that the drumkit becomes an interface for multimedia performance." - Geoff Wallace
Remix, as a creative impulse, is as old as human culture, perhaps older if we consider mimicry in nature. In the production of digital and web objects, remix is unavoidable. Digital objects are made of code, a universal language that we link, copy and paste at a pace and on a scale never seen in human history. Remix culture is our culture.
The projects in Issue 8 of the Student Research Gallery come from three different CMDC classes. Most are from DTC 338 Remix Culture (Spring 2011), where students were exposed to remix art in various historical and contemporary forms of writing, music, visual art, and cinema. Concepts such as authorship, reproduction, fragmentation, simultaneity, collage, montage, juxtaposition, detournément and mash-up were the spring boards for students to develop their own practice-based research. Through short creative exercises, collaborative experiments and individual projects, students discover their own ways of generating new forms out of appropriated media.
The works featured in Issue 8 stand out because their authors pay attention to the unique materiality of their sources – let the materiality dictate the direction of the work – and because of the care in the design and execution of the final remix object.
HTML/CSS/Javascript/Graphics website
DTC 355 Multimedia Authoring, Prof. Will Luers
project launch
"I don't usually allow myself the time to wander, and when I do, I decide where to turn and where to stop. But I wanted a chance to be challenged. I drove to a random area of town and stepped out with my camera, two lenses, and a pair of dice. The dice dictated my next move...To my surprise, in these unplanned and apparently dull locations, I found an abundance of photographic opportunities." - Liz Wade
HTML/CSS/Flash/Video website
DTC 475 Language, Texts & Technology, Prof. Will Luers
project launch
"Love Poem by Richard Brautigan, a one-line poem, is recited by 17 different people over and over again. Each video communicates a feeling, or an emotion in a different way. It delivers a different experience, thus creating a story inside the viewer's head through reciting and repeating this one sentence. The project is a form of textual remediation, consisting of hyperlinks that open individual video clips. It is an experiment with mixing textual and audio-visual forms that in a process create a non-linear story." - Mikhail Oparin
Video
Remix Culture, Prof. Will Luers
project launch
"This project isn't an original idea, but true to remix, borrows existing material in the creation of an original piece. While I was working on this, I started thinking of Nam June Paik's work, and thought it would be fun to create a sort of dance mosaic; kind of a dance within a dance. I incorporated several effects, including zoom in, zoom out, mirror, reverse and lighting. I'm pleased with how the dance clips fit with the music. I tried to make linkages from one clip to the next (e.g., the penguin tap dance leading to Fred Astaire tap dancing)." - Kathleen Schultheis
HTML, CSS, jQuery
Remix Culture, Prof. Will Luers
project launch
about page
"Multicolored Noise, focuses on the cause-and-effect relationships between industrialization, the environment, and people. The layering and overall busy-ness of the page are meant to imitate the constant noise and chaos that we are surrounded by everywhere we go. The audio is made up of unrelated sounds that together sound dull and muddled, much the background noises we've grown accustomed to." - Stephanie Bailey
HTML, CSS, jQuery
Remix Culture, Prof. Will Luers
project launch
"I wanted to incorporate images that were abstract and layered upon each other to form a complex moving image that would not be overbearing. The audio is a mixture of many songs that were sampled from genres that don't necessarily blend together to create a maelstrom of varying emotions. As the images progress it changes from the faster dark night into indistinct ghostly shapes being transformed into cybernetic." - Margarete Strawn
Video
Remix Culture, Prof. Will Luers
project launch
"I have embraced the spirit of the mash-up in order to create a glorious amalgamation of four of my most beloved music videos found on YouTube. Consider this a loving homage to that which inspires me the most." - Rick Vodicka
The first question drove the action research portion of the course. The second question promoted theory into practice. Students read and responded to several digital graphic novels and demonstrated knowledge by conceiving and constructing digital graphic novels focusing on social consciousness and/or civic engagement as their final project.
Generally speaking, graphic novels are long-form works in the medium of comics noted for their ability to juxtapose images, text, visual rhetoric, and multiple literacies over a perceived timeframe to create a believable and sustainable narrative engagement with the reader.
Each work in this exhibit foregrounds significant and interesting changes as the traditional print-based forms of graphic novels are remediated by the narrative affordances of socially collaborative digital multimedia, and each proves that digital graphic novels might serve as effective media for promoting social consciousness and civic engagement.
HTML/CSS/Javascript/Graphics website, 18.6 MB
DTC 338 Graphic Novels, Prof. John Barber
project launch
"Revolution was conceived as a fictional story that explores one character's awakening to the need to be critical of news sources. We created a design that utilizes digital technologies to explore the multimedia presentation of a graphic novel. We included a media type not normally found in graphic novels (video) and not only made it fit with the genre, but used it to advanced and enhance the theme of the story. We were able to accomplish this by adhering to a basic characteristic of the cartoon - amplification through simplification applied to a video animation. Maintaining the same visual style also helps in unifying the video with the comic panels." - Nicholas Hill
HTML/CSS/Javascript/Graphics website, 19.2 MB
DTC 338 Graphic Novels, Prof. John Barber
project launch
"During our early brainstorming sessions, we wanted to include time travel and alternate realities. From the very start, we aspired to have a storyline that the reader could manipulate as they read through. One plan was to use alternate realities to display one string of the story and then, through reader involvement, open up other paths the story could take. Through the use of alternate realities, we also wanted to allow the reader to see from various points of view by being able to switch between the different realities." - Kyle Schaeffer
HTML/CSS/Javascript/Photography website, 14.9 MB
DTC 338 Graphic Novels, Prof. John Barber
project launch
"The title, based on ‘incarceration', denotes the common misconceptions standard Americans have toward Latinos and immigration from a legal standpoint. In order to create a localized and relatable view of illegal immigration and deportation, we chose to focus on Hector Lopez, a young man who was deported from what he considers to be his homeland. Using Hector's story as an internal framework, we will include research documentation that will help construct an experience that is both enlightening and a motivation for change." - (from the group's introduction)
pdf book and powerpoint, 12.4 MB
DTC 338 Graphic Novels, Prof. John Barber
project launch
"In the beginning, we wondered if a digital graphic novel could be a viable form for getting this story out into society. Ultimately, Alisha and I both agreed that it was. We feel that this is a new and exciting way to get people to take a look around at their world. As the old adage goes, a picture is worth a thousand words." - Matt Schwartz
HTML/CSS website with campus location Beetags for mobile, 17.1 MB
DTC 338 Graphic Novels, Prof. John Barber
project launch
"In our story, an un-named VanCougar photographer travels to certain places. The reader/user would need to go to those places to scan the Beetag. The Beetag takes the reader to the next chapter or panel to continue the story. This lets the reader/user be immersed in the story" - Brian McGovern