Yue-Ling Wong's Portfolio of Works Related to Digital Media

Email: ylwong@wfu.edu

Design and development of interactive digital media projects, especially computer games and animation, have always been my passion. I have been developing interactive digital media projects since 1990's. Here is a list of my selected works related digital media. Some are results from my academic scholarly activities and some are simply labor of love.

• • Textbooks in Digital Media and Digital Art
  • Category: Books, Digital Media Curriculum Development
  • Brief Description: In 2008-2009, I published two textbooks in digital media with Prentice Hall: Digital Media Primer: Digital Audio, Video, Imaging, and Multimedia Programming and Digital Art: Its Art and Science. The key features of these books are the interactive and multimedia components that are designed to be tightly integrated with the text. The books were based on the curriculum development projects that were funded by the NSF (National Science Foundation) CCLI (Course, Curriculum, and Laboratory Improvement) program. I was the principal investigator of these two projects. The books emphasize both concepts and practice, and use an integrated approach to teach students computer science and technology through learning digital media and digital art. The book Digital Media Primer has been translated into Chinese. The digital art book already has an international edition and will be translated into Chinese too. In Feburary 2012, the 2nd edition of Digital Media Primer was published. It also will be translated into Chinese. The key additions to this edition include: 1) two chapters on OOP ActionScript (intro to OOP, and inheritance and polymorphism) in the context of game programming; 2) a chapter on HTML5 video and audio, and a chapter on intro to HTML; 3) integrating relevant topics from the Digital Art book.
  • 
    
            
    
      
• • Introductory Computer Programming Course
  • Category: Digital Media Curriculum Development
  • Technology Used: Dreamweaver, Flash/ActionScript
  • Brief Description: In 2007 I developed an introductory computer programming course in the context of game programming with Flash/ActionScript for non-computer science students. I designed and developed all the instructional materials for the course. These include the labs that program full games. I have been teaching the course since then. The developed curriculum is included in my textbook, entitled Digital Media Primer (Prentice Hall Publisher, 2009). Go to the course site of the latest semester »
• • Introductory Computer Lab
  • Category: Digital Media Curriculum Development
  • Technology Used: Dreamweaver, HTML, Photoshop, Audition, Premiere Pro, JavaScript, CSS
  • Brief Description: In 2001 I developed the lab components for an introductory computer course for non-computer science students. I designed and developed all the instructional materials for the course. These labs include creating Web pages (writing HMTL and using graphical editor), writing JavaScript, CSS, digital image editing, digitial audio manipulation, digital video editing. I have been teaching the lab since then. The developed curriculum is included in my textbooks, entitled Digital Media Primer (Prentice Hall Publisher, 2009) and Digital Art: Its Art and Science (Prentice Hall Publisher, 2009).
• • Periodic Table Game
  • Category: Educational Games
  • Technology Used: iPhone SDK, Flash/ActionScript, Director Lingo
  • Brief Description: This game is kind of a marriage between Periodic Table of the Elements and Tetris game. The game was originally created for Web using Director/Lingo in 1996, and was recreated using Flash/ActionScript in summer 2009. And, in December 2009, it was recreated for the third time--for iPhone this time.
    See the iPhone version of this game on Apple App Store »
    See the Flash version of this game »
  • 
    
    
• • MaThEemaTRIS
  • Category: Educational Game for Kids
  • Technology Used: Flash/ActionScript, iPhone SDK
  • Brief Description: A game for kids to practice their skills of addition. When the game starts, an apple with a number is dropping down from a tree. Before the apple hits the ground, you have to adjust its number and move it to the correct position for things to add up.
    See the iPhone version of this game on Apple App Store »
    See the Flash version of this game »
  • 
• • FroggerSpeller
  • Category: Kid's Game, Casual Game
  • Technology Used: Flash Lite, Director Lingo
  • Brief Description: This game is kind of a mix of Frogger and Hangman games. When the frog lands on a block, a letter will be uncovered. The blocks make up a word. If not all the frogs get to land on a block, you will need to guess the word. The game was originally created for Web using Director Lingo in 1997, and was recreated for cell phones Nokia 3650 using Flash Lite in 2006. I plan to recreate it once again but for iPhone this time. See the game and read more »
  • 
• • Go-Cart
  • Category: Kid's Game, Casual Game
  • Technology Used: Flash Lite
  • Brief Description: This game was created with Flash Lite for cell phones Nokia 3650 in 2006. This game simulates a 3D environment where you drive a go-cart in a country lane. You get points when you hit a spinning star. Animals and fantastical creatures occasionally cross the road. You have to stop for them. You lose points if you hit the animals. I plan to recreate it for iPhone. See the game and read more »
  • 
• • Two-player 3D Dark Forest
  • Category: Prototyping for Two-Player 3D Game
  • Technology Used: Flash/ActionScript, Flash Communication Server, CGI/PHP
  • Brief Description: A prototype for two players interacting in a 3d dark forest. Each can see the other's avatar in the game. This (the earlier version with simpler graphics) was tested on the Flash Communication Server (FCS) in the early days when FCS was available. Then, I tested it with simple CGI/PHP. I plan to continue the development using Interactive Flash Media Server. This will be the continuation of my earlier game, Michael's Haunted House (as described in the Michael's Haunted House project).
  • 
    
• • Two-player 3D Racing With Adobe Stratus Peer to Peer
  • Category: Kid's Game, Two-Player 3D Racing Game With Peer to Peer
  • Technology Used: Flash/ActionScript, Adobe Stratus
  • Brief Description: This is a two-player go-cart racing game connected through Adobe Stratus's peer-to-peer. Each player can see the other's go-cart in the game. The go-cart can fly up too. The 3D x, y, and z coordinates of the two players are exchanged through the peer-to-peer communication 10 times per second. There are 100 trees randomly placed in the scene. The first player who enters the scene has the tree location randomly generated. These locations are then sent through the peer-to-peer to the other player who enters the scene later. Shown in the screenshots are the game views of the two players placed side by side. The left window shows the game view of the pink-hair player. The right window show the game view of the red-hair player. As you see in the second screenshots, when the red-hair player flies up (in the over-the-shoulder type of first person point of view), it shows in the other player's view too. Goodies will be added to the scene which can be done easily; for example, spinning stars that will give you a boost forward, an oil spilt that will make your cart skid, fantastical creatures appear randomly crossing the road, a player can leave an oil spilt on the road and bump the other player. See a screen capture video of the game »
  •  
    
    
    
• • 3d Campus Fly-through
  • Category: Game
  • Technology Used: Flash/ActionScript
  • Brief Description: A 3d fly-through with selected buildings of Wake Forest University campus. Giant mascot, spinning hoops, spinning stars, and UFO will appear at random time at random location. Going through the hoops or hitting stars gives you a boost forward. Hitting the UFO or the giant mascot bounce you backward. You can click on the trees to toggle on and off of different patterns of toilet papers on trees. Note that the chapel clock shows the computer time. In addition, the background changes as the time changes. You may see sun rise or sunset depending on what time you play it. There is a subtle twinkling star in the night sky! See the game and read more »
  • 
• • 3d Fly-through with T-Rex and Pterodactyl
  • Category: Lab Developed for My Class
  • Technology Used: Flash/ActionScript
  • Brief Description: A 3d fly-through with moving T-rex and flying pterodytyl. The pterodytyl is not a flat graphic but a 3d stick figure with linear perspective. The stick figure is drawn using Flash's drawing API and using linear perspective to compute the location of each end point of each line.
    See this game and more examples of stick figures »
    See more game labs that I have developed for my class »
  • 
• • 3d Stick Figures
  • Category: 3d Visualization
  • Technology Used: Flash/ActionScript and its drawing API
  • Brief Description: Use simple projection math and ActionScript draw API to draw 3d stick figures; no 3D API is required. This can be used for visualization of a network of object relationships, such as social network, web site map, and even lottery drawings (just for fun).
    See demos and read more »
    
  • 
    
    
• • Papervision3d
  • Category: Papervision3d
  • Technology Used: Flash/ActionScript, papervision3d, 3ds max
  • Brief Description: A low-polygon character was modeled in 3ds max, then associated with biped and a dance motion. The model and animation were exported as a DAE file which was then loaded in Flash using papervision3d. See the demo »
    
  • 
• • Michael's Haunted House
  • Category: Kid's Game
  • Technology Used: Director Lingo, 3d Studio Max, Photoshop
  • Brief Description: I started this game in 1996 using Director. The story was about going on an adventure to a haunted house with a kid you met in a Halloween night. So far, the game went up to finding and entering the haunted house. I got many great suggestions from kids who had tried the game when I first posted it. I plan to recreate and develop this game further in Flash, possibly a two-player game using Interactive Flash Media Server (as described in the Two-player 3D Dark Forest project).
  • 
• • Low Polygon Character Modeling and Animation
  • Category: 3D Modeling and Animation
  • Technology Used: Maya, 3d Studio Max, Adobe Photoshop
  • Brief Description: I modeled a low polygon little girl with a pony tail from my sketches. It was then animated using biped and applying motion capture data. I am also using it for a 3d iPhone game project. The screenshot of this model on iPhone shows the model displayed on iPhone using openGLES.
  • 
    
• • 3D Model and Stereoscopic Animation of a Dragon
  • Category: 3D Modeling and Animation
  • Technology Used: Maya
  • Brief Description: I modeled and animated a chinese flying dragon, from pencil sketches to fully rendered stereoscopic animation, for a dance production (see the project Dance Production: The Bridge).
  • 
    
    
    
• • Dance Production: The Bridge
  • Category: Performance Art, Stereoscopic Animation
  • Technology Used: Maya, 3d Studio Max, Adobe Premiere, Flash, Director
  • Brief Description: This is the second collaboration with Alban Elved Dance Company. I created total about 15-minute of 3-D stereoscopic animations, using Alias Maya and Adobe Premiere. This time the stereoscopic projection was done on a silver screen and circular polarizer 3-D glasses (not red-blue glasses), the audiences watched the virtual animated creatures and environments emerging on stage with the dancers. See more pictures and read more »
  • 
• • Fractal Tree
  • Category: Interactive Art, Production for Dance Performance
  • Technology Used: Flash/ActionScript, CGI/Perl
  • Brief Description: This tree was an interactive piece entitled Fractal Tree of Verses for the dance performance, Fibonacci + Phi (see the project Dance Production: Fibonacci + Phi). It expressed the reflection that if we pass up the chance to appreciate beauty, all we will see is the gibberish on the ground. In this piece, words become part of the trees' foliage. Each fractal tree is computer-generated in real-time using recursion. They are not pre-rendered. Each tree generated is unique; the chance you see the exact same tree again is extremely low. Each twig grows a word, a phrase, or a leaf. When the shedding of the foliage was triggered, words started falling and flying off the twigs. While the audience's eyes jumped from word to word or followed their paths, the words might recombine into sparks of verses in their mind. Each audience member might construct a different poem by following different words in a different order. Then, after this transient moment of chaos, the words would fly off the screen or drop on the ground and be jumbled together in an unintelligible heap. The audience before the show the show provided some of the words to grow on the fractal tree--some are audience's hand-written words captured with a tablet PC.
    Try out the demo »
    See more pictures and read more »
  • 
• • Interactive Dancing Mannequins
  • Category: Interactive Art, Production for Dance Performance
  • Technology Used: Director Lingo, Shockwave 3D, 3d Studio Max
  • Brief Description: This was another interactive piece for the dance performance, Fibonacci + Phi (see the project Dance Production: Fibonacci + Phi). Artists use mannequins posed in various ways to render accurate copies of human gestures and motion. The paradoxes that I wanted to express in this piece were: What if the roles were reversed? What if a human tried to dance with a mannequin, and the mannequin led the dance? Who, then, is the master of whom? In Manipulation Dance, two computer 3-D models of mannequins, created in 3ds max and computer programmed in Macromedia Director, led a dance with human partners. Although the mannequins’ movements were based on motion capture data, their movements became original and unexpected during the performance by means of an original twist in this design. Taking a signal from dancers by means of a wireless joystick and a computer keyboard, the upper and lower bodies of each mannequin were able to move independently. Each of the upper and lower bodies could dance forward or backward in its own timeline and at its own speed. To enable an interaction between human and computer, live dancers on stage tried to keep up with the mannequins. The Manipulation Dance explored the nonlinear re-creation of dance phrases by deconstructing and recombining pre-choreographed movements in real-time into new forms of expression.
    Try out the demo »
    See more pictures and read more »
  • 
• • Dance Production: Fibonacci + Phi
  • Category: Performance Art, Interactive Multimedia Production, Stereoscopic Animation
  • Technology Used: Maya, 3d Studio Max, Adobe Premiere, Flash, Director
  • Brief Description: Fibonacci + Phi Dance Production was a production of Alban Elved Dance Company in collaboration with me and other Wake Forest faculty, students and staff members. The production was performed in MainStage, Wake Forest University, on December 4-7, 2003. I produced several interactive multimedia and stereoscopic animation for the performance. See more pictures and read more »
  • 
• • Go Fishing
  • Category: Kid's Game, Just for Fun
  • Technology Used: Director/Lingo, Photoshop, Expression
  • Brief Description: I started this game in 1997 using Director. The game was about helping the character to go fishing--kind of a puzzle game. For example, you control when the character to jump into the boat. If the timing is not correct, he falls into the water and you have to pick him out of the water and put him into the boat. You also need to figure out how to release the boat, how to fish, how to get the character on the island, and so forth. There was Caribbean type of loop music all the way to match the theme.
  • 
    
    
• • IMEJ (Interactive Multimedia Electronic Journal)
  • Category: Online Journal
  • Technology Used: Dreamweaver, QuickTime, Director/Lingo, Flash/ActionScript, VRML, Adobe Audition, Photoshop
  • Brief Description: IMEJ (Interactive Multimedia Electronic Journal of Computer-Enhanced Learning) (1999 - 2005) was a prototype for an interactive multimedia electronic journal edited and produced at Wake Forest University. My responsbilities as the Creative Director of the journal included designing the online journal Web site and template for articles, and working with authors of peer reviewed papers to create interactive demonstrations of their work on the Web Converted the papers into Web format. Go to the site »
• • Online Chemical Inventory Database
  • Category: Online Database
  • Technology Used: Oracle, SQL, CGI/Perl
  • Brief Description: I have developed an online chemical inventory database for the chemistry department at Wake Forest University. The inventory database is resided on the university's Oracle server. CGI/Perl with SQL are used to query the database for keyword searches, and to add and remove chemicals and users.
• • CD and Workbook in Chemistry Atomic Orbitals
  • Category: Books, CDs, Chemistry
  • Technology Used: Director/Lingo, Photoshop, 3d max, Adobe Premiere
  • Brief Description: In 1997, I published a CD (Windows and Mac compatible) and a workbook in atomic orbitals with Jones & Barlette Publisher: Atomic Orbitals CD and Workbook. It was a self-paced interactive multimedia tutorial and visualization on atomic orbitals. It combined scientific visualization techniques and 3D computer animation to help students understand the abstract concepts about atomic orbitals. It also include history about atomic orbitals along with the scientists' pictures and 3D animation. The scentists' pictures were acquired from the Nobel organization with their permission. The CD can also be used effectively by instructors for classroom multimedia lectures without any time-consuming customizing. The CD was a finalist in the Educational category of NewMedia '97.
  • 2012-10-16: Update Available!! Atomic Orbitals CD users, if you have purchased the original Atomic Orbitals CD 1.0 and would like to continue to use it on newer computer systems, click here to get the update for the Windows version.
  •  
    
    
    
    
• • Interactive Tutorial: VSEPR Tutor
  • Category: Educational Tutorial, Interactive Practice Exercises, Software Application, High School to Freshman Level Chemistry
  • Technology Used: Director/Lingo, Photoshop
  • Brief Description: VSEPR Tutor provides a brief introduction to VSEPR. The key feature is its interactive practice exercises that closely mimics the homework on paper. For example, it allows you to add electron pairs to the molecular structure by dotting out electrons with different colors. It also provides a 3D visualization of different molecular structure (in red-blue anaglyph). You can then assign the atom to each position and check your answers.
  •  
    
    
• • Chemistry Tutorial: Redox
  • Category: Educational, Freshman Level Chemistry Tutorial
  • Technology Used: Director Lingo
  • Brief Description: An interactive tutorial on balancing redox equations. It is developed in collaboration with a chemistry professor. Go to Redox Tutorial site »
• • Chemistry Tutorial: Balancing Equation Tutorial
  • Category: Educational, High School and Freshman Level Chemistry Tutorial
  • Technology Used: Director Lingo
  • Brief Description: An interactive tutorial on balancing equations. There are several tutorials and online practices: basic tutorial showing step-by-step balancing simple equations, interactive practices on balancing combustion equations, interactive practices on balancing more difficult equations.
    Go to Tutorial site » (Shockwave plugin required)
    Go to Practices of Combustion Equations site » (Shockwave plugin required)
    Go to Practices of General Equations site » (Shockwave plugin required)
• • Chemistry Simulation: Acid-Base Titration Simulation
  • Category: Educational, High School and Freshman Level Chemistry Simulation
  • Technology Used: Flash/ActionScript
  • Brief Description: An interactive acid-base titration simulation. I developed this because thinking back my college life, I would have found this very helpful in practicing acid-base titration before going to lab. Go to Acid-Base Titration site »
  • 
• • Organic Chemistry Exercise: NMR and Chemical Tests
  • Category: Educational, College Level Chemistry Tutorial and Interactive Exercise
  • Technology Used: Director/Lingo, Web
  • Brief Description: These online tutorials with interactive practice exercises are not simply text-based questions but are interactive and graphical to suit the need for the nature of the NMR peak assignment practice and chemical test experiments. I developed these in collaboration with a chemistry professor at Wake Forest.
    Go to a NMR sample page » (Shockwave plugin required)
    Go to Chemical Tests page » (Shockwave plugin required)
  • 
• • Physics Game: Wet-A-Moe
  • Category: Educational Game for High School and Freshman Level Physics
  • Technology Used: Flash ActionScript
  • Brief Description: Have students use their projectile knowledge learned in physics to shoot a water balloon to a moe. The physics equations on projectile are used to compute the water balloon's projectile path. Go to the site »
  • 
• • VRML
  • Category: Just for Fun
  • Technology Used: VRML, 3d max
  • Brief Description: I have always been fascinated with 3d and VR technology. In the 90's, I experimented with VRML. Almost 20 years later, I was so excited to get a chance to take a virtual environment course at UNC-Chapel Hill and be able to "walk" through my 3d creation with the head mount display. (See the description in Virtual Environment.)
  • 
    
     
    
    
    
    
• • Graphic Design for T-shirt and Lunch Bag
  • Category: Graphic Design
  • Technology Used: Expression, Adobe Illustrator, Adobe Photoshop
  • Brief Description: Graphic works are inevitable in interactive media production. In addition to interactive media, I also did some graphic design works. These were the graphics I did in 1999 for the Get Set Go program (a science education outreach program) organized by a chemistry professor.
  •  
     
• • Multiuser Game for a Economic Research Project
  • Category: Multiuser game, research project
  • Technology Used: PHP, HTML, CSS
  • Brief Description: This is a game created for a economic research project that I am collaborating with an economic professor. During the game, multiple players are submitting their choices based on the given scenario in each round. In each round, the program needs to determine whether all the players have been submitted their choices. After all the players have been submitted their choices, the program processes the submitted choices and, based on the submitted choices, determines the new scenario for the next round to present to the players. The research is to investigate how the different scenarios and economic aspects affect people's decisions. The challenging aspects of designing and programming this game involve: (1) determining when all players have submitted their choices (it needs ALL the submitted choices before it can determine the scenario for the next round); (2) dealing with the situations when more than one players submit at exactly the same time. The user interface desgin considers how to best present information to the player so that they are get the information within a few seconds of time limit to make a decision.
  • 
    
• • Virtual Environment: Modeling and Interaction
  • Category: Computer Science Graduate Course Assignment
  • Technology Used: Head Mount Display, UNC-CH EVEL API, Gamebryo plugin, Maya, 3d max
  • Brief Description: This is an assignment of the course in virtual environment at UNC-CH. I modeled an office and all the furniture. It was loosely based on the Oval Office picture I saw at the White House Web site. The texture images were acquired from various sources. The office can be walked through using the head mount display in the 30'x30' VR lab. I also added a dart board and a dart. You can use the wand to pick up the dart and shoot. Gravity was added using ODE solver for RK4. (Forward Euler should be sufficient but since I had coded RK4 in another course's assignment, why not try it in a different assignment like this one.)
  • 
• • Virtual Environment: Redirection
  • Category: Computer Science Graduate Course Project
  • Technology Used: Head Mount Display, UNC-CH EVEL API, Gamebryo plugin, Maya, 3d max, Poser
  • Brief Description: This is a term project of the course in virtual environment (VE) at UNC-CH. It is a challenge for walking in virtual environments that are larger than the size of the tracked physical space. The goal of this project was to apply redirection using humanoid avatars as deterrents to prevent the user from running into the physical boundary. The basic idea was to rotate the virtual house so that the user's heading direction lies within the allowed tracked physical space. To put the approach in context, the scenario of this project was a house party and the user explored the VE finding 5 car keys in the house where the virtual house was larger than the allowed physical space. Twenty avatars (modified models from Poser) were placed in a victorian house model (purchased online as 3d max file). Their motion (avoiding collision with other avatars and walls, and going around furniture) was controlled using RVO (a motion planning API developed at UNC-CH). The virtual house was constantly rotating (using the rotation code developed at UNC-CH) to direct the user away from the boundary of the allowed physical walking space.
  • 
• • Cloth Simulation
  • Category: Computer Science Graduate Course Project
  • Technology Used: Microsoft Visual C++
  • Brief Description: This is my term project of a computer science graduate class on physically-based simulation, modeling, and animation at UNC-CH.
  • 
• • Robotics
  • Category: Computer Science Graduate Course Project
  • Technology Used: Interactive C, Botball XBC robot
  • Brief Description: This is my term project of a computer science graduate class on robotics at UNC-CH. The goal of my project was to model a strategy of sheepdog approaching the herd. Sheepdogs don't approach sheep heads on. Instead they go around to approach from behind. Here in the project, I model such a path using a approximation of clothoid paths. It was implemented on a robot, Botball XBC, that was equipped with a small digital video camera and a GameBoy Advance (a Nintendo DS was used too). The color vision system of the XBC was used to track the object of interest (the "sheep") and the goal pole (the "pen"). In order for the video camera to scan the environment for color blobs, the camera needs to be able to turn programmatically while the Botball robot stays in place. So, I designed a setup (with some experimentation with different mounts and Lego parts) to mount the camera on a servo motor (which was in turn mounted in front of the robot) so that the camera was able to turn programmatically.
  • 
    
    
    
    
    
    
    
    
    
• • Robotics: Multiple iRobots
  • Category: Computer Science Graduate Course Assignment
  • Technology Used: iRobots, Microsoft Visual C++, AR Toolkit
  • Brief Description: This is an assignment of a computer science graduate class on robotics at UNC-CH. The goal of the assignment is to have four iRobots move to the diagonal corner without colliding each other. The locations of the iRbots are tracked during runtime with a ceiling-mount camera and AR Toolkit. The iRbot received instruction for next move from the computer through Bluetooth. There are scenarios with and without obstacles in the center of the area. A simulator to test ideas was done in Flash/ActionScript. The final code was done in VC++.
    See video of a scenario »
    See a simulator in Flash »
  • 
• • Computer Vision Course Work
  • Category: Computer Science Graduate Course Assignment
  • Technology Used: Matlab
  • Brief Description: Computer vision is also a course I took during my pursuit of computer science graduate degree. There was no term project in the course. But the assignments included demosaic, scale-space blob detection, image stitching, epipolar geometry estimation, triangulation, stereo matching, bag-of-Features image classification.
• • AI: User Modeling
  • Category: Computer Science Course Project
  • Technology Used: Prolog
  • Brief Description: This is my term project of a computer science class on artificial intelligence. The purpose of this project was to recommend courses to students by performing user (student) modeling. The user modeling approach adopted was the collaborative approach, which was based on the tenet that the course preference of a student was predicted from the other like-minded students. The project used naive Bayes to match students' preferences of courses and movies.