Mini Project 4 – Reflective Analysis

For my 4th mini project I recreated a scene from the films Friday and Gravity using kinetic type which replaced the original cinematography. Kinetic type basically means animated text. For this project the program that I used was Adobe After Effects, I had never had any previous experience with this program but on reflection I have realised that it has always been around me without me being aware via my inspirations. Some of my favourite designers, including Cyriak (http://www.youtube.com/watch?v=WF34N4gJAKE) and Lemon Jelly (http://vimeo.com/21041231) use After Effects for their design/art. At this realisation it made me think about many future projects I could work on (as I’m a musician and friends with lots of musicians I’m always looking for new ideas of visuals to compliment their music). I found that this project was a good introduction to a program that could become useful for me to become more familiar with in the future.

In terms of reflecting on what I felt about the quality of my work I was generally quite pleased with the outcome of the Gravity video, I think there is room for improvement as always, but I was pleased with the time I spent, firstly learning how to navigate the After Effects interface (especially when having to learn flash, blender and trying to carry on learning Javascript and CSS3 and PHP, all at the same time) and then syncing the visuals up with the audio, which is always quite tedious and time consuming.

I feel that I came up with some good ideas and a lot of thought went into considering how I could play around with the words so that they reflected what was being said in the dialogue. I also didn’t necessarily go for the obvious solutions. An example of this is when the voice of Dr Stone repeats the ‘yes, yes, yes’ section in the Gravity scene. For this section I could have just added the word once each time it was said, instead of doing this I decided to double the word each time, which I felt was more effective considering the panic in the characters voice and especially after the previous line in the dialogue was ‘do you copy?’ and the word ‘yes’ was copied, this is subtle and might not even be recognisable upon viewing the video but I think that it helps to make the sequence flow better and is more interesting than the former solution I mentioned of just copying the word once each time it is said.

Another thing that I was pleased with was my selection of fonts and colours for both the Gravity and Friday scenes. This has been something that I have previously not spent enough time in considering (especially with my websites) and I have usually gone for experimental fonts to be unique and then regretted it afterwards because I have realised that they don’t actually look that great, instead of just picking what I personally thought looked good I tried to relate the designs to scene and base the style on that instead of my own personal taste. You can see this in the Gravity scene as I have chosen the colours black and white, I think that black represents the void of space and the white could relate to the light of the stars on the black sky. The typeface was also selected for the reason that it looked quite science fictional and is also quite reminiscent of old computer command prompt typefaces (it actually reminds me of the teletext font).

Eaxample of teletext font, I find the Gravity font somewhat resembles this but is a lot smoother and cleaner.

dreamcast_virtuatennis201_teletext

The colours and fonts I used for the Gravity scene were totally different to the Friday scene which was a more light hearted, humorous scene, for this I tried to use brighter colours and a less ‘sharp’ text.

I my previous post about this project I also discussed how I was trying to experiment with the word ‘nothing’. Since then I have actually came across a video of kinetic typography which uses some of the same techniques as I did, the only difference being is that this video actually deals with the concept of nothing as it’s main theme where as my video just included the word nothing and it didn’t play as an important role in the overall scene.

This is the video that experiments with the concept of nothing.

The only thing I would have liked to have done differently is experiment with shapes instead of text, I feel as though I spent a lot of time on the Flash Mini Project when I could have been doing more with After Effects. I think this would have been more useful to me and will also be more beneficial to learn in the long run as opposed to Flash which is less used especially when working with the motion of objects (e.g. panning from left to right on an image or bringing one object into the visual space and leaving another behind such as this animated directed by Josh Raskin, animated by James Braithwaite and Alex Kurina does http://www.youtube.com/watch?v=E3ilNnBrJHk).

Mini Project 3 – Reflective analysis

For the keyboard type project I worked with Lydia Odai to make an interactive website which would make images of letters appear on the screen at the press of the associated letter. Each keypress also played a note of the alphabet song (see if you can play the full song).

I found this project useful to me especially because of its development and the concept and ideation process that it went through. Looking back on where the idea originated from it only happened ‘accidently’ when I was working in room W119 and noticed the picture of the keyboard on the wall. This made me think about how I could use a keyboard with the pictures I had previously taken which resembled letters. My only intention at first was to display the images on a keyboard in the blog, at this stage I hadn’t really thought about actually using a keyboard to make the images interactive. As I started to think about the idea more it became clearer to me that I could take the idea further, especially after seeing the alphabet photography website (http://www.alphabetphotography.co.uk/).

This shows that ideas don’t necessarily come straight away as it took me approximately a week or two – thinking about the project on and off – to come up with a solid idea of what I actually wanted to achieve. Before me and Lydia started working on the project we had to work out how we would actually make it work in practice. Although it wasn’t even necessarily a complex idea I think having time to explore the idea was important because compared to other projects (the flash animation and the zoetrope drawing) I didn’t allow myself enough time to explore what I should do and went straight into working on the design, this wasn’t a useful approach because it meant that I didn’t consider the possible problems and solutions to those problems and there was no preparation, hence the outcome was untidy and unprepared where as with this project I knew what it was that I wanted to achieve before doing it which gave me a sense of direction.

I also found that this project (in contrast to previous projects) was useful for me because I was able to collaborate with other people. Although I understand what the code is doing in Javascript I would have found it hard to achieve making the code actually work if I was doing it by myself. Before this project I didn’t understand things such as event listeners and event handlers so this project has helped me to understand Javascript better which is one of the main reasons why I wanted to use Javascript in the first place. I found Lydia easy to work with and although I’m not as familiar to programming languages as her she was very helpful in making me understand the processes that we went through to make the code work. I think me and Lydia worked well together and this project is a good example of people combining ideas and knowledge to achieve a common goal. Furthermore it is something that we can continue building upon in the future if we wanted to. This was also a good experience in helping me understand how to use a programming language in a productive way and will help me when working on projects using Javascript in the future.

After finishing the site my friend sent me this website (http://www.patatap.com/) which sort of has the same principles but uses animations and is a lot more interactive and fun to mess around with and less buggy. This is the type of coding I wanted to aim towards. But Rome wasn’t built in a day and I am happy that I had an idea, and didn’t just leave it at that. Because it is sometimes quite easy to come up with a good idea, but to make that idea happen is the part that requires hard work.

Mini Project 2 – Reflective analysis

For the flash mini project I created a number of short animations and made music for the animations, I wanted the music to compliment the animation because I didn’t see the point in trying to mix sound and images together that didn’t mix well. As I come from a musical background I actually wrote the music first as I wasn’t really sure what to do with the animations and was uncomfortable with using Adobe Flash.

I didn’t think the quality of the work was up to a good standard, the work was fun to make and a good starter point for learning, but it wasn’t something I would be happy to show off as my work. I think it was messy in that there were keyframes that I accidently unknowingly deleted and didn’t recognize until later and didn’t amend those mistakes, this made the timeline and the keyframes very hard to work with as I became confused with what was going on as parts of the animations kept on appearing where they shouldn’t be. This was also due to my lack of understanding of how Flash works though.

One thing I did find useful for this project was that it allowed me to explore using ‘cutout’ images. With the monkey animation I used real images for the animation which is similar to the style of animators such as Terry Gilliam from Monty Python (http://www.youtube.com/watch?v=QYgqdaI-NRg). This is useful for me because it something I would like to experiment with more.

In the future I would like to explore making animations to music but I would prefer not to use Flash as it gives me a headache.

Mini Project 1 – Reflective Analysis

For my 1st project I at first drew an animation by hand and I then recreated the animation by using adobe illustrator and saving each frame as a jpeg. I found this useful particularly as I had never done any animation before and this gave me a really basic understanding of the of important aspects of design such as the fluidity of the animation (how each frame fits into each other so there are no ‘gaps’ in between frames which ruins the illusion of movement) and speed and motion (how quickly the frames are shown, and how to make the animation look lifelike). It also made me realise how much time a certain length of animation would take and the amount of effort I would have to put to make a well structured animation.

It also made me more aware of what I should be focusing my attention on and dedicating my time to. I felt that as I don’t really enjoy drawing animations by hand – as it is quite a tedious task – that I should dedicate my time to learning how to animate on computer programs such as Adobe After effects and Blender, to me this was already quite apparent as I’m not really that interested in hand drawing but this task cemented the idea that I should leave the drawing by hand to other people who are dedicated to doing that although as well it also helped me to realise that sometimes drawing by hand is useful even if the quality of the drawings isn’t that good, I found that drawing by hand and writing notes by hand also are sometimes more useful than using a computer because its actually less time consuming to jot down simple ideas on a piece of paper than open up an application and start messing around with all the tools.

For my gif I wasn’t really that happy with the outcome as it was just me messing around and I didn’t really dedicate enough time to trying to make a proper animation though I didn’t see any point in spending too much time on creating a decent gif as it doesn’t really have any use other than it’s fun. If I was to progress on my ‘Pie on the windowsill’ idea I’d most likely redo it in Adobe After effects or something similar.

One thing I did find useful was experimenting with illustrations and real images, this was interesting because it doesn’t work all of the time as in some images there is too much in the image and this makes it uncomfortable on the eyes to see the illustration in the foreground for example when I was using the real images as a background. I found putting some filters on the images helped this issue slightly though I think if I use images and illustrations in the future I will have to choose my images wisely and probably plan it out in a storyboard or something similar first.

Mine Project 3 – Part 2: Interactive Letter Images

For the keyboard project me and Lydia Odai originally went out and took pictures of images which resembled letters. I had been working on the idea of using a keyboard and was trying to work out how I could make the letters interactive in some way. I originally drew inspiration from an Alphabet Photography website (http://www.alphabetphotography.co.uk/) which was shown to us in a lecture. What I liked about this website was that there were a number of different selections for each letter and you could change the letter if you didn’t like the look of one of the images. This is what inspired me for my project and I originally wanted to do something where I could have different selections of letters and then be able to manipulate them or ‘call’ them at the press of a key.

This website was my original inspiration and lead to me formulating my idea around interactive type.

Screen shot 2014-03-26 at 16.15.44

After we presented our work in one of the seminars I noted that I might like to explore this idea of somehow using a keyboard and having numerous different versions of each letter and somehow making the user able to interact with the letters and change the selections. I was given some useful feedback and ideas which helped me in moving forward with the project. At this stage however I hadn’t yet formulated a solid idea and as I have limited experience with programming languages I wasn’t sure how to do certain things and I knew that it was going to take a lot of research and time to do something too complex. I eventually dropped the part of the idea where there would be more than one selection for each letter and focused on trying to make the letters responsive to a keypress. The reason for this was because I didn’t have enough letters to have replacements for each one. I also wasn’t sure how difficult it would have been to randomise each letter at the press of a key so that different ones showed up each time.

This eventually made me come up with the idea of making the letters appear on the screen after a key had been pressed. The reason why I wanted to do this was because I felt that although the letters by themselves looked nice I wanted them to be more recognisable. I wanted to try and find a way to make the images that resemble the letters be recognisable quicker. If there was an association to the letter by pressing a key first I felt that this would make a person already have the symbol of the letter visualised in their head before the letter appeared on the screen. To me this was a much more playful way to present the letters than just simply showing them in my blog or using them to spell out a word.

Due to my limited knowledge in Javascript I discussed the idea with a number of people as to how I would actually go about writing the code for this project. Because me and Lydia had worked together in taking the pictures for the project and previously in group projects on the course we decided to work together. Because Lydia had previous experiencing in programming I found that the task was made easier as I wasn’t trying to figure out how to do it alone. The first thing that we did was create the html and CSS for the project, this was a very simple task and all I had to do was format each image to same size in Adobe Photoshop and then put each image in a div in a html document. I then put all the divs inside another div named ‘letters’ so that there was a containing div for all of the images. What I did next was assign the z-index attribute to each div that contained the image in css so that each letter was displayed ‘under’ one another. This meant that when we went to write the code in javascript all the images would be in the same space on the webpage but just on top of each other, we would then have to specify which letter we would want to be shown depending on what key was pressed.

This is what the website looked like before any javascript was added, because the z image has the highest z index it is on the ‘top’ of the ‘stack’.

Screen shot 2014-03-26 at 19.02.14

Fundamentally what we did was make the image display as ‘block’ in css depending on what key was pressed and then change the image back to style.display=”none” when the key wasn’t being pressed. To do this we firstly had to add an event listener so that javascript was ‘listening’ for the onkeydown event. If there was no event listener then javascript wouldn’t know what it was looking for. After this, Lydia put all of the divs into an array with the variable ‘letterArr’. We then created a function that assigned a keycode to each div and would search the array for the correct number, for example if the keycode was 65 then the function would match that to the div called “a” in the array. By creating a variable which assigned the keycode to minus 65 of what it originally was we were able to tell javascript that the first element in the array was equal to keycode 65. Because all the keycodes are in alphabetical order this meant that the order of the array would match the letters starting from 0. To make the image disappear after the onkeydown event we used the setTimeout method to call an anonymous function which set the variable ‘letterArr’ back to ‘display:none;” in css after half a second.

This is what our project looked like before we added sound.
http://lukemonetdesigns.com/keyboard

What we then did was add some notes to each letter, my idea was to assign a note of the alphabet song to each letter so that when they were pressed in the correct sequence they would play the song correctly, this introduced an aural element into the project as well as visual, and because it was a song that is familiar with the alphabet I considered that it might further help in associating the images to the letters. I created the notes on Garageband by playing the song and then ‘slicing’ each note and exporting each note as a separate mp3, what me and Lydia then did was used the audio tag in html to add the sound clips to each div that we had previously put the images in. Then all we needed to do was create another function that would call the sounds on the keydown event as well as display the image.

Here is the final version of the project with the audio added to the clips, the code still has problems, for example if two keys are pressed at the same time display=”none” doesn’t execute and the image stays on the screen. Though if you press the same key again then the image disappears. Although this is not a massive problem and could probably have been fixed quite easily if we had more time to work on the project.

http://lukemonetdesigns.com/keyboard/indexfinal.html

This is the Javascript code, for the audio we added another array for the audio. and assigned a new id to each audio element in html. We then used document.getElementById to call the array of audio ids and then used the play() method to make the audio play on the onkeydown event.

Screen shot 2014-03-26 at 18.38.24

Although I understand what the code is doing in Javascript I would have found it hard to achieve making the code actually work if I was doing it by myself. Before this project I didn’t understand things such as event listeners and event handlers so this project has helped me to understand Javascript better which is one of the main reasons why I wanted to do this project in the first place. I found Libby easy to work with and although I’m not as familiar to programming languages as her she was very helpful in making me understand the processes that we went through to make the code work. I think me and Libby worked well together and this project is a good example of people combining ideas and knowledge to achieve a common goal.

Mini Project 2 – Part 2: Flash Animation

For another flash project I decided to focus on actual imagery this time as opposed to ‘drawn’ imagery. The reason for this was because it has always been a type of animation that I have been interested in and is reminiscent of Terry Gilliam’s cutout animations in Monty Python’s Flying Circus and more recently relates to work by digital media designers such as Cyriak (http://www.youtube.com/watch?v=WF34N4gJAKE). I also felt that it was more relevant to my style than other forms of animation (I like to doodle but generally don’t spend a lot of time drawing).

This idea formulated out of the thought experiment that if there were an infinite amount of monkeys with an infinite amount of typewriters one would eventually type out the complete works of Shakespeare. The animation was quite simple to make and what I had to do was find an image of a man on a typewriter and a chimpanzee. I needed to find two images that would fit on each other because if there was an image of a monkey with its head facing forward it would not have fit on an image of a man on a typewriter facing to the left. I have had previous experience in finding images that work together in this way so I had quite a lot of experience in knowing what images would work together.

The animation was generally quite simple to make, I firstly had to create another arm from the mans first arm so that I could make the animation look like two arms were moving up and down where as because I was using a 2d photograph one of the arms was behind the other and therefore it would not be visible. I also had to cut up certain parts of the images in Photoshop such as separate the typewriter from the mans body because I wanted the layer that the right arm was in to be behind the mans body but in front of the typewriter, and having the typewriter and mans body in the same layer did not allow this to work.

These are the two original images I found.

1142121-chimpanzee

ToryRage

Firstly I created 4 different images and tested this out in a gif, but after looking at the gif I realised that first I would have to edit one of the arms because there were watches on both wrists and when the two images intersected they broke the illusion that one arm was behind the other. I fixed this by firstly covering the watch in Photoshop using the brush tool and the eyedropper tool to make the watch the same colour as the rest of the arm. I then made one of the arms slightly darker by decreasing the brightness which made the arm in the foreground stand out more.

This was my test gif to see if the animation was right, as you can see from the gif the arm didn’t look right as the shoulder moved up.

output_kKnE5A-1

I then imported the images into flash and started to resize each image so that it grew larger until it reached the full size of the screen. I then copied this so that the same images kept on appearing to mimic the infinite amount of monkeys on typewriters (although I obviously would never be able to replicate actual infinity). After a while I decided to change the direction that the monkeys were going in as I didn’t want the animation to carry on doing the same thing until the music had finished. This created problems in flash because it meant that because the layers were below each other instead of on top of one another the images weren’t behind one another anymore after the direction had been changed. I could have fixed this by putting the reversed images on the layers which had already been used, the problem with this however is that flash doesn’t allow no keyframes in between two keyframes on the same layer (timeline). I realise now that I could have fixed this issue by making the space in between two sections blank keyframes, though unfortunately I didn’t have much time to work on this project more and wasn’t able to fix the issue as it would have been time consuming.

I found that flash was really frustrating to work with especially when trying to get the animation to work in time with the audio because flash doesn’t permit you to stop and start music which is really unhelpful when trying to sync imagery to music, (as someone who usually spends a lot of time on my work to make sure it is a high standard I found this extremely annoying and gave up trying to sync the audio). I also found that trying to create the illusion of a 3rd dimension in Flash was quite irritating as each layer creates a new timeline as opposed to other programs such as Adobe After Effects where it is a lot easier to control the keyframes. I found that Flash would keep on generating it’s own keyframes on each layer to the end of the workspace, I didn’t want this to happen and had to keep on deleting the keyframes which was very time consuming. In retrospect I think that this project would have worked a lot better in a program such as After Effects.

This is the final video of the animation

http://lukemonetdesigns.com/flash/monkey.html

Mini Project 1 – Part Two: Zoetrope Animation

What my zoetrope drawing originated from was an idea I had formulated possibly more than a year ago of a boy called Billy Scrim who is walking home from school and kicks his football over the garden fence, upon looking over the fence he sees a pie with wafting scents placed on the windowsill to cool down. On seeing this pie he forgets about his football and steals the pie. The pie scene is a very popular plot line in cartoons such as Loony Tunes, Disney and Tom and Jerry and usually involves the main character trying to steal the delicious looking pie which has been left on the windowsill to cool down. This is where the inspiration for my idea was from though I wanted to expand the idea. As I was drawing an animation off the cuff I decided to try and do something I had already loosely worked on previously. This was useful because it meant that if I wanted to progress with the idea I already had a basic narrative and plot line for the scene, and I had also done some illustrations using Adobe Illustrator which I could use if I needed to.

billstothescrim

Using the format of a gif I decided to complete my animation but instead of drawing it out I used Adobe Illustrator and made jpegs of each scene. I had already drawn the head of the character I just needed to create the hands and the fence and then the pie frames. What I like about this scene is that I used photographs with the animation. This technique of using real images with animation has been done in many different ways most notable in the film Who Framed Roger Rabbit? made in 1988 by Roger Zemeckis. Another famous person to use real life imagery in animation was Terry Gilliam of Monty Python fame, his use of images was in the form of cutouts as opposed to the animation on Who Framed Roger Rabbit which was drawn over the frames. More recently tv shows such as South Park (Saddam Hussain’s head) and Archer have been known to use still images in their animations.

References

Who Framed Roger Rabbit?, 1988 [film] Directed by Roger Zemeckis. Burbank, California: Walt Disney Pictures
South Park, 1997 [television] Tray Parker & Matt Stone. New York: Comedy Central
Archer, 2010 [television] Adam Reed. Fox Entertainment Group