PEPSI TRACKBALL WEBSITE
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
The two animation projects below were created for Tribal DDB Worldwide. Both projects were for one of their major accounts, Pepsico. ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
The first piece was for a "Trackball" website. Individuals would go to the website and spin the trackball with their computer mouse. As the trackball turned the different collectable versions of the Pepsi soda cans would scroll through like they were on sitting on a conveyor belt. My part of the project was to model and animate the Pepsi "Ball" falling off of the soda cans. Once the ball fell, it would bounce on the table and then fall into a trackball slot. This would occur when the individuals arrived at the website. Once the ball fell and landed into its appropriate place on the screen then the person would be able to interact with the ball by spinning it thus driving the conveyor belt to bring up different soda can designs.
PROCESS
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
There were several issues that arose while doing the project. The first was to deal with the Pepsi Ball "Swoop". The original design is a 2D cheat to look three dimensional as the swoop goes around the ball. This illusion could not be followed on an actual 3D ball. So I had to create several versions of the swoop as a 2D texture map to wrap onto the 3D ball before we came up with an acceptable middle ground.''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Next I designed several different surfacing shaders to get the right balance of graphic swoop coupled with glossiness and reflection. Four "Trackball" shaders were developed and presented. The next issue to solve was how much bounce and character animation technique "Squash and Stretch" were to be incorporated into the animation to give the right amount of balance between real world physics and exaggerated "bouncy" style traditional in character animation. Three solutions were presented and an appropriate solution chosen.
PEPSI FREERIDE WEBSITE
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Another Pepsi website project I was involved with was called "Freeride". On this website people would be able to enter a code to unlock the site. Once inside they would be able to design different versions of several cars by inputting variables like color, what kind of wheels, different trim, etc. Based on the design provided I modeled the exterior and interior of the automotive garage. The exterior included the surrounding structure including the Freeride logo, sconces, the garage door and of course the surfacing and lighting. Inside I created the back of the garage, mid-ground structures and the stage for the cars rotate on. After building the structures I animated the garage door opening. I also modeled and animated the interface that pops up from the bottom and the monitors that drop down from the top. I also built and animated the initial code key lock. After animating the various parts and pieces I rendered them out with alpha masks and provided them to the Tribal web specialists who handled all of the web site programming.''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
PROCESS
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
One of the first issues I had to solve on the "Freeride" project was how to animate a folding garage door. My first experiment came out well but the door had too many sections and came off more like a venetian blind. The principles behind the linking of the individual slats worked well but the overall look was too segmented. My second attempt looked much better and the amount and size of the slats looked more accurate in depicting an industrial garage door. I also adjusted the speed that the door opened to be a little more visceral. In the third attempt I embedded the door into a warehouse exterior. It was not exactly the final look of the facade but it allowed me to narrow down the solutions both in look and functionality. In the fourth piece below I incorporated bitmap surfacing onto the door slats. I also adjusted the specularity to get the appropriate shine to sell the illusion of a painted surface. ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
PROCESS
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
In this section I am showing four more test I created in solving the look of the final piece. The first animation below shows the initial test of the animated drop down combination lock. Timing as well as appropriate surface qualities were experimented with. Next I moved on to creating the navigation that would unfold up from the bottom of the website. The structure, timing and procedure for the unfold sequencing was experimented with and solved. The next thing to solve was the construction and animation of a drop down display monitor. Surfacing and adjusting for the appropriate lighting to bring the piece to life was solved. The last test I am displaying shows the sequencing of the multiple monitors that were going to drop down. The displays had to come down in a rapid fire manner without seeming too mechanical and stiff. An offset overlapping timing was determined to capture the appropriate look and mood.''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
