Animation Project Evaluation

Looking back over this experimental project I’ve learned a lot of new skills which I am sure I will continue to broaden and utilize in the future. Although challenging at times, I’ve found it very enjoyable and a great way to explore new ideas and themes within my work.

I particularly liked working with Luke Monet as he is very easy to work with and comes up with some very innovative ideas which were very interesting to work on. It also enabled me to challenge my coding skills by doing something I had never done before.

I also liked animating by hand and doing walk cycle test sketches as it was a great way to enhance my animation skills in general and further understand the motion of animals and characters. Learning about Blender and motion capture was also very useful and greatly broadens my knowledge base within animation.

I am slightly disappointed that I run out of time on this project to explore and acheive all of the plans I had, however through this I now have projects that I will work on in the future, such as my neon logo sign, in order to enhance my portfolio.


Animation Project: Keyboard Website with Sound

As we had the first version of the website working Luke Monet and I continued developing the idea in order to add sound to the interactive keyboard. Luke had the idea of adding sound to the website, which would be a notes to each of the letters with a pitch that corresponds to the notes in the Alphabet Song ( a song that is commonly used when teaching children the alpahbet.) At first I was apprehensive about the idea as the order of the notes would generally be quite mixed up, users of the site are not likely to press the keyboard keys in an alphabetic sequence, and thus the song would not be recognised, but I was willing to experiment to see how this worked.


As a function had been written already for the keyboard function, adding sound was relatively simple to do. After Luke had recorded the notes for each letter, I added the corresponding audio file to each of the different letter divs and preloaded them so they would load when the page is loaded and not when the div becomes visible.


Next I put all the audio ids into an array.


Now it was just the simple task of adding a play function to the existing code (using the j integer used previously to referance the id’s position in the array), before the Timeout.

Here is a link to the updated website:

Overall I think the audio adds more value to the website and makes the experience far more interesting to the viewer than without sound. My apprehensions about the song not being clear were unfounded as during testing we found it easy to pick up that the notes of the letters are linked to the song. This probably worked so well because the song is so well known and ingrained into our culture and has such a limited range in tone that it is instantly recognisible.

To continue this project we decided to look at some other sites for research. One that particularly caught our eye was Patatap a collaboration between Jono Brandel and the band Lullatone. Here’s a link to the site:

Like our site, this site uses keyboard inputs to play sound and animate visuals on screen. One of the things I thought was very effective about this site is the way that different effects stack on top of one another, so the effects and melodies mix together. I can tell that this would be quite challenging to recreate code-wise but I will look into learning how this was achieved as it is a new area of web design. which I believe has a lot of potential.

Brandel, J., 2014. Patatap [online], Avalable from : [Accessed 26.3.2014]

Animation Project: Scribble Videos Testing

Following on from my “Bete Noir” project I decided instead to draw out me drawing a scribble, however this again did not work out very well. Next time I do a project like this I should definitely work with someone else to help set up the cameras whilst I do the action or vice versa as the camera work was extremely difficult filming it one handed with my phone. Again the use of more equipment, such as tripods, would make this easier too.

Another thing I filmed was a video in preparation for the camera tracking experimentation I want to carry out. Hopefully I will be able to model a 3d “scribble ball” and make it look like I was cupping it in my hand. Learning how to track movement on the camera is essential to make this work as otherwise the illusion of the ball sitting on my hand will not work.

This video could also be used for animating on top of. Ideally I would like to animate my scribble foxn character over this and running up my arm. Hopefully it will work well as a short test but I may have to extract the frames as images and slow them all down in the final film as at the moment it is too short for any real animation to be done.

Animation Project: Scribble Animation Storyboard and Tests

To help come up with some ideas and to test out my animation techniques I devised some storyboards which helped me plan what more to do.



These are very quick and rough, but they have a basic narrative. I scribble on a piece of paper then the scribble then becomes “alive”. It runs across the desk and up my hand, then I flick it away. I like this idea because it fits my theme for a “bête noire” and the concept is quite short and simple. It also means I have a reason to play around with overlaying 3D motion capture onto film. I don’t think the basics of it should be hard to do, modelling a scribble should be quite easy, but making sure the camera is mapped properly might be quite hard.

scribble test

Here’s some tests of different scribble designs I did. Although it seems quite pointless, you can really get a different sense of emotion from the different strokes and volumes of the scribbles.

scribble gif

I decided to test out animating the scribble using stop motion and drawing it on different  layers of paper then hiding them. I think it has worked really well, and the scribble really looks like it is alive. Although one thing I would change is I would use a tripod next time. As I took these pictures on my phone the camera is quite shaky and this does hinder the illusion quite a bit.

hand gif

Another thing I tried out is drawing whilst taking  pictures in order to speed up the process and have shots of my hand. However I soon realised that taking pictures one handed is not a smart idea and I failed to get much out of this test.

fox walk fox run fox run fox walk 4

As the scribble test was quite sucessful, I tried out some walk and run cycles using the scribble fox design. Hopefully this should work really well using these techniques I have just tested and I could use Flash or Photoshop to digitally over the drawn fox onto my hand.

The next thing to try is getting some videos of my hand and me drawing as I think this would be easier to do than if I were to do it using stop motion.  I would also like to try creating a 3D scribble and animating it on my hand. I would love to also animate a 3d scribble fox but I realise that I probably won’t have time to do that within the scope of this project.

Animation Project: Interactive Picture Keyboard Website


Following on from the photography assignment, Luke Monet decided to continue developing the project and asked me to collaborate with him. The idea is an interactive website where the user would press a keyboard key and a photograph corresponding to that letter would appear on the site. Luke worked on the design and idea of the website and I helped him with the code to make it work.

As I had not coded a program like this before I started by creating a flow chart to help visualise how the program would work:

First step: User presses key

Second step: Key code pressed is logged

Third step: Key code is linked to photograph

Fourth step: Photograph is displayed

As each keyboard key relates to a keycode this can be used by the computer to relate to another event. However first the script must have an event listener to check when a key is pressed. I also added all the photographs into an array to store them. The photographs are hiden initally in css (display: none;) and arranged on top of one another using z-indexing. The function alphabet then listens for the window event. If it finds one it takes the key code  (luckily key codes are in alphabetical order or this method wouldnt work, I was being lazy and I should have used a more transferrable method to do this) and minuses 65 to get the array number of the photograph of the letter of the pressed key. It then changes the css display to block to show the letter. I realised after this there needed to be a timeout to this function to allow other letters to be pressed afterwards. I added one set to 500 which makes the photograph display for half a second.

Here is the code I came up with:


And here’s a link to the website:

There are a few bugs with the program, such as only the “top” letter being shown when two keys are pressed at the same time and the bottom one “sticking” and not disappearing till pressed again. I am not quite sure what causes this bug however I am pretty certain that the problem can’t be fully fixed without changing the method that the letters are hidden and displayed using css styles.

The next idea we would like to try is extending the typing feature to allow more letters to be shown, allowing sentences to be written. However the code for this would be completely different to the one above and the layout could be quite complicated, especially if the typing were to be done in real time and not direct the user to another page for the outcome. I can predict it would probably need to store the photographs a library of sorts and a grid system would have to be used to “put” the photographs onto space on the website whilst the user is typing, however I would need to do a lot of research and development before I could sucessfully realize this idea. Although the time scale of this project is probably too short to fully develop this, I would like to try this idea to furthern my programming skills and might work on it over the Easter break.

Another idea we had, which can be done on a much smaller timeframe is adding a sound that would be played each time a key is pressed. As this would probably only add a line or two of code to the one above, this should be quite easy to add in.

Animation Project: Hand Drawn Animation Further Ideas

I decided to devise a mini project to combine the techniques I’d learned so far in this project. As I’d like to develop the ideas explored in my earlier work with hand drawn animation I chose to explore that area to produce a longer piece.

As I had looked at canine locomotion before I decided to vary this slightly by exploring fox designs. Foxes are anatomically very similar to wolves, however they are a bit less stocky and more flexible. They are sharper in their features and have a more “sulking” gait.



I did some quick doodles to figure out the body shape I would like. Through different iterations I realised a lean slender look was what I wanted, even if this wasn’t at all anatomically correct.


I also scribble out some strecthing and squashing poses to work out the form a bit more. I also played with the idea of bi point colouring which is typical of many animals, however it can be hard to keep consistent during simple animations.



Next I experimented with facial feature designs, even though im not sure if I would use something this complicated in an actual animation as this project has quite a short timescale.

Something that I would like to become a theme of sorts for this project is the phrase and concept “bête noire” which is French for a personal bugbear or pet peeve. Something which is a pet peeve of mine is my very messy penmanship and scribbling style as you can quite clearly see above! To show this through the character design I decided to make the figure more messy and scribbly. I tried doing some poses with this style to try and figure out if this would work as a longer animation.I’d have to be quite careful with my posing as some of the forms become very indistinguishable when they overlap in this scribbly style.



Overall I think the character could work but I would have to be really careful with placement of limbs and other things to make sure the movement is conveyed properly. Next I will do some animation tests and do some quick sketches of what a walk and a run cycle would look like.