Interactive Motion Design

Remarkable Architects

Partners: Kefan Xu and Ellen Yang

In this project we created a motion design sequence where we presented three remarkable architects from The Pritzker Architecture Prize. Kefan did I.M. Pei, Ellen did Wang Shu, and I did RCR Arquitectes. We each presented two of their architectural works. We decided to follow Kefan’s design proposal, which consists of simple black and white images along side with black lines following the shape of the architectures. He got this inspiration this apple commercial:

For the typefont, I proposed using Big Caslon ad we all agreed to use it, as it is very elegant and suits our overall design. Here is the specimen for Big Caslon:

The work loads were divided based on preferences. Kefan created the title sequence, I created the end credits, and Ellen composed everything together.

For my sequence of architects, I chose RCR Arquitectes. RCR Arquitectes is a colective from Spain and they have designed building in many parts of Europe. For this piece, I chose their Bell-Lloc Winery, in Spain, and the Soulages Museum, in France.

This project was done in After Effects. In my sequence, I used fade in/out, the enlargement of the components of each frame, the black lines, revealing the images slowly, and the letters in the background to make the transitions and the overall sequence very smooth and elegant. The letters in the background were chosen based on the shape of the buildings and on their name. Thus, for instance, for the Soulages Museum, I chose the “S” for “Soulages” and aligned it with a structure in the middle of the image. ou can see this in the images shown below:

For the end credits I decided to keep the simple style of just black lines to support the text. Here are some images of the end credits:

Here are both my sequence of RCR Arquitectes and the end credits for our project:

Assignment 3 & 4

Silhouette

In this silhouette exercise I pretty much followed our in-class procedure. But I made two versions of this exercise. In the first version, I made it seem like the subjects are aligned in a row. Here, the camera moves along the z-axis to give depth to the sequence. In addition to this, the videos start at different times. Here is the sequence of this first version:

For the second version of this exercise, I decided to have no camera movement. In this case, I simply copied and pasted the footage many times into the timeline, and I also changed the color of each of the copies in order to make it look more interesting. Furthermore, I delayed the starting point of each copy. Here is the sequence for it:

Particles

For the particles exercise, I decided to have a sequence for a potential version of my logo. I started by creating particles for the background. Then, I created the particles that are later seen through the logo. Since my name is Marina, and Marina in Spanish essentially means ocean, I decided to make the particles very tiny and blue in order to represent water particles. After, I created my logo with the pen tool, which then allowed me to created a mask for the outline of the shapes. So the sequence starts by having particles in the background, then moves on to showing the logo with the particles, and then this logo expands and fades out of the screen, introducing a graphic version of the logo. To do this exercise and give the particles different motions, I mainly changed the physics values of the Particles World effect. Here is the end result of this exercise:

Morphing

I started doing this exercise in a very different way than what I ended up having. My original idea was to split the video into many, many different squares, and them place them randomly within a cube shape. However, I did not realize that I would have had to create separate layers and masks for each of the squares, and this would have taken me forever. Thus, I followed Kefan’s method of splitting the video vertically and placing each rectangle in a diagonal shape, forming a stairs form. Below, you can see the two images I choose to morph (front view and back view of a 3D model of me) and the top view of the layout of these images in After Effects:

Open-Option

For the 30 second open-option piece I decided to use Particles.

Motion Capture

For the motion capture exercise, I followed the what we previously had learned for tacking a set a pixels and assignment those points to a different object. The only thin I did differently was the background color and the ring color.

High-Speed

I took this video outside of the AB, by the garden. As you can see in the video, I poured water onto the plant to make this exercise. To record this footage, I used my phone and used the slow-motion video effect, which allowed me to record at 720 p at 240fps. However, since the only way to record at these values is by using the phones slow-motion effect, I had to undo the slow-motion manually in After Effects so that I could then divide the video at different percentages of the speed. Thus, once I converted the video to realtime speed, I divided the sequence into 50%, 25%, 12%, 6% and 3%.

Horror Scene

Since the horror scene is only 30 seconds, I wanted to keep it simple. The scene starts with the subject smiling naturally, and then as the time passes the subject starts doing weird movements as if he was beings possessed by something or about to turn into a monstrous creature. When recording the scene, I started by holding a spotlight at his eye height, and then as the scene develops, I lower the spotlight in order to create a more frightening environment. His shadow also gets bigger as the spotlight lowers, and I think this suits the piece very well.

In terms of the sound, the two audio files that I used for this video were found at FreeSound. I added a white noise sample and a scary distorted sound sample. I think they fit my piece.

As to the video, I recorded the footage and edited in After Effects. I used several different effects, such as the gaussian blur, a red tint, brightness and contrast, echo, and turbulence displacement. Most of these start at 0 and increase throughout the video, so that it gets scarier and scarier as the subject starts getting weirder. I also added a glitch effect by downloading a glitch screen recording and applying it as the displacement map of an adjustment layer. I added this towards the end of the footage, also increasing steadily, and then increased it further for the last text screen of the end of the scene, which says “One day all of this won’t matter”.

All the works shown in Ron Fedwik’s research are incredibly well done. Although you can tell the animation are not ‘real’ in the sense that you can tell it is not a video, the movement of the particles very well simulated and feel like they are very natural and almost perfectly represented.

All the works amazed me very much, but some of the animations that surprised me the most are: Energy Conservation for the Simulation of Deformable Bodies, Fully Automatic Generation of Anatomical Face Simulation Models, Codimensional Surface Tension Flow on Simplicial Complexes, Simulating Free Surface Flow with Very Large Time Steps and the higher resolution facial model that is currently being built.

IMD: Assignment 2

Infomotions Piece

For the infomotions piece, I used the things that describe me best in terms of my work and and my background. Thus, I decided to share some details such as my name, my height, where I live, the languages I speak, the year I was born, and some skills and things that I like, including generative art, photography and creative coding.

Instead of using a type font, I decided to use my handwriting because I think this makes since the infomotion piece is about me, I though my handwriting would represent me the best. I choose to use my more personal details in the shots where I appear, and my skills in a black background alternating between footage of me and the black background.

For the handwritten words, I used a tablet and wrote them in Illustrator, which I then imported into After Effects in order to add them to the sequence. And I also did my logo in Illustrator, but I not completely happy with the result because I was not able to get the exact spiral shape which I intended to create, so I will try to improve this with a different method.

Here is my infomotions piece:

Kinetic Typography

For the kinetic typography piece I decided to use the lyrics of a song which I really enjoy: “The Moment” by Tame Impala. This song is very special to me so I really liked creating a kinetic typography piece for it. I used After Effects to animated the

I used several different fonts for this piece. Tame Impala is a psychedelic rock band based in Australia that started playing in 2007. So although it is not a very old band, I researched what were some of the fonts used by psychedelic rock bands during the 1960’s in the USA. Based on my reason, I selected the ones I thought would fit Tame Impala the best. Among these were: Prisma, Filmsense, Davida and Amelia. And I then also added two other fonts which I thought were a bit more simple, such as Nuri and Times New Arial.

Here is my 10-seconds kinetic typography piece:

Open-Option Piece

My open-option for this assignment is a continuation of my 10-second kinetic typography piece. For this sequence, I changed something in order to make it more exciting and used a longer part of the song.

Interactive Motion Design: Assignment 1

What is interactive motion design?

When I think of motion design, the first characteristic which comes to my mind is something that is visually stimulating. Nowadays, it is very hard to make something that stands out from the rest of the media pieces, because everything has become visually stimulating to some extent. But I strongly think motion design should at least be interesting to watch to some extent. In addition, when talking about motion, motion design clearly needs to have an order of frames or pictures so that it seems as though the figures in screen are animated and in action. Furthermore, interactive motion design means that there is a cause-effect relation between the user and the work. When the user makes an action, the work reacts to this and triggers a function. Including motion design to user interaction makes the piece more engaging and easy to use. And lastly, I think motion design should also provoke an emotional reaction to some extent, but it is not required.

Dynamic Grid

For the dynamic grid exercise, I wanted to experiment with 2.5D motion, so I decided to make a bird flying sequence by using images and animating them. In order to do this, I first selected some images that I had previously taken and adjusted them in Photoshop. I then used After Effects to translate the position of the bird images so that it looks like they are flying and forming a grid with their flying path. I also created a camera object and placed it in a 3D space to make it look more realistic. Here is the result:

I was not very satisfied with this, so I tried to think about other ways to represent a grid system and I thought of perspective. I then realized we had learned about false perspective in class and thought it was a good idea to add this in. In this next piece, I placed the background in a 3D space as if the center of perspective was in the middle of the working board, and I used only one image of a bird to animate its position and make it seem like it is flying in different depths.

But again, I wanted to create a sense of false perspective while creating grids. Thus, instead of having three images to create the dimensional background, I just used one of them while still having the bird fly in the same position.

But I was still not very satisfied with the result, so I decided to use Processing instead. In this piece, I used the dynamic grid system as a way to play with the visibility of shapes.

False Perspective

The first time I made this exercise, although I followed every step we learnt in class, my motion tracking was very shaky, so I redid it and fixed the issue. All I had to do was make the motion tracking box bigger so that it would track a greater amount of pixels and have a more accurate tracking. Below you can see the original piece and the fixed one:

Open-Option Piece

For the open-option piece I decided to use Processing because I was having some issues with After Effects and I simply did not know ho to use it for what I wanted to make. So this piece is a bunch of lines forming a circle which are still on one end and in motion in the other end.

1st: installing a new font to After Effects
2nd: Creating a circle texture from the text and stripes made from solids by using “Polar Coordinates”
3rd: Creating shape layers
4th: Pre-compose gradient shape layer with time displacement for exciting transformations
5th: Hand tracking on real life footage, parenting the mandala to hand
6th: Coloring the mandala (fractal noise, tinting, glow)
7th: new solid, mask and feather it

To me, motion design is a field where one creates visual work that moves in a meaningful but also pleasant manner. I like to think that while it doesn’t necessarily mean that everything has to address the big questions or problems in life, the way the graphics move needs to somewhat represent/mean something as opposed to being entirely arbitrary. This meaningful-ness will hopefully allow the audience to understand the message that the designer tries to create or perhaps set the tone for a message the designer is about to share with them.

From my earlier memories, motion design means something seen on television. It is the animations connecting sections of the program, and the animated info charts to be the first thing when I think about motion graphics design. More specifically, they are animations not strictly containing characters or a story piece. In the recent 10 years, personal devices are becoming powerful enough that designers are putting more and more effort into interactive motion designs to enhance the user experience.

The first design system that attracts me to this area is Google’s Material Design. By using the metaphor of paper, elegant and meaningful animations are tools to help create a fluid and intentional workflow. The animations are not only beautiful to look at, but they are functional. They deliver information and communicate in a more efficient and useful manner.

From static graphics design to a moving media, motion design can help guiding viewer’s attention, expressing information with different hierarchies, or even accomplish a mini storytelling through staging. And by adding interaction to the formula, it now takes the responsibilities of providing feedback to the natural interaction. To summarize, interactive motion design is adding the “time” dimension to the traditional graphic design, and connect discrete and isolated scenes as a whole.