IMD: Ron Fewik

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

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.

IMD – Assignment 1

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.

 

Assignment 4

A4-Presentation

Assignment 1: Grid and false perspective

Slides in Pdf: First: Interactive-Motion-Design 

Second:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(ppt was too big, can’t upload it neither to GoogleDrive nor the IMA Blog

Link to the whole assignment folder: https://drive.google.com/drive/folders/1G32BVkD3lYfe7ArlFFRBUG5m1t4_CV5Z?usp=sharing

First 30sec assignment: Laugh away your insecurities:  https://drive.google.com/file/d/1HObjlxcLMBMq_O177zDUPVvp3sHKbgXE/view?usp=sharing

Grid 10sec Piece: Caught off:  https://drive.google.com/file/d/1NrpA9Lkbmg9f0NheUqtwk9fwBE__gKeG/view?usp=sharing

Helpful resources: Lynda 

Other resources: https://www.youtube.com/watch?v=rnRc4_3PzWc , https://www.youtube.com/watch?v=uuaBg1agd70

Grid Inspiration: Animation by Maya Erdelyi: Africa Calling 

Cultural Grid: Doctor Strange Mandala

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

 

Week 1: What’s Motion

What’s motion design

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.

IMD – “What is Interactive Motion Design?” by Bruce

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.

Week1: What is interactive motion graphic design?

To define motion graphic design, we need to start with graphic design. Generally, graphic design keeps still. As a graphic designer, one need to place picture and texts in the proper position on a paper, such as movie poster or booklet, with certain design principles. However, motion graphic design is dynamic. Even though, graphic design and motion graphic design share the same design principle, motion graphic design has more various forms of expression. Instead of merely placing a picture or texts in the proper position, one can move, rotate, and transform a object on a screen. If graphic design is a piece of paper, then motion graphic design will be a flip book animation.

“Interactive” means the motion is not passively displayed to the audiences. It has to react to some elements in real life. The motion can change with the input, such as certain data and a gesture of the audience, so that the experience can be more immersive and interesting.

People’s eyes are sensitive to movements. Compare to graphic design, motion graphic design is more attractive. Moreover, it can help user understand some complex concept and process more easily, especially when interaction is added to the design.

What is motion design?

    In case of motion design, I can only associate to animation when we learned movement portrayal. How subtle, little things can change how one perceives a movement. For example squash and stretch can make all the difference in a walking cycle, making the character more realistic. Or timing, building up the movement matters, first to start slow, then to speed up and before the movement ends, to slow down again. These differences movement can make the viewer associate to anything, even that a piece of pizza can do the catwalk.

 

     Motion design is getting more and more important in every field because by studying the relationship of movement and human perception, even the most boring and simple video redesigned can suddenly become exciting and eye-catching to the audience. I believe just like in animation, those 12 rules apply to motion design as well. Not just because it looks more appealing to the human eyes, if the motion design is “played by the rules”, but also movements need some consistency.  If there is no rule to the design, we don’t know where to look and the information gets lost. That’s why I think the timing, and slowing in and out are exceptionally important.