top of page

Animation Research 

We have learned about the different types of animation and some techniques.

There is 'full animation' (think Disney/Dreamworks), 'limited animation' (He-man, Hanna Babera, independents), 'motion graphics' (titles, gifs, web banners).

All animation / moving image is made of frames. Persistence of Vision: An optical illusion whereby multiple separate images (frames) viewed in sequence blend into a perceived single, moving image in the human mind.

Traditionally animation was hand drawn one acetate 'cel' at a time then placed over a stationary background and photographed into a movie. This was digitised but essentially remained the same process.  

Stopframe animation, also very labour intensive, this is where moving elements are manipulated by hand and shot one frame at a time.

Computer animation has become popular due to the comparative speed at which a a full animation can be produced.  “Tweening” & Interpolated Morphing: a programme generates changes to specified parameters in between two given key frames. 2D, 2.5D and 3D animation can be created using this method. 


On revisiting my favourite animations Dungeons & Dragons and Ren & Stimpy were clear favourites. Both use traditional cel animation, hand drawn changing acetates over a stationary background. 

D&D was made in the early 1980's and was very much of its time, in that it was quite basic 2D drawing with the minimal changes per frame, low quality, it required imagination, more than the high budget heavily produced animation, but that was part of it's charm. The bad things about it were also the good! I don't think animation has to be high quality if it effectively convey's an engaging storyline.

I was fortunate to meet Ren & Stimpy creator John K, who also created Mighty Mouse. I got a little memento of the meeting, a characature of me with Ren & Stimpy!

This animation was from the mid 1990's and while it was also 2D and basic, this was stylised to have the feel of a 50's/60's animation but much higher resolution and more detail. Because of the whacky content it was unique and felt very edgy, it had the slapstick of Tom and Jerry but it was very rude and silly. Appealing to an adolescent audience that otherwise would feel cartoons were too childish for them. 

Screenshot 2023-06-08 at 23.04.49.png


While skimming facebook, I came across this ad for an LP concert, the animation was triggered by me clicking on the ad. It's only a short animation but I am already understanding how much time and effort goes into just 10 seconds of run time.

Bold bright colours, moving fluidly like water, a date appearing on an old style pull off desk calendar. Uncomplicated shapes/patterns, evocative of psychedelic art from the 1960's.

As simple as this seems It is very effective for drawing attention to an otherwise boring advert. It was good because it drew my attention to it, and i found the colour palette appealing but sympathetic to the photograph, while livening it up.  I'm guessing the shape moment happens in a similar way to the animation we did with the ball, just much more complex shapes and movement than our ball. Lots of motion tweening! If i have to highlight a negative then more could have been made of the animated date - it was small and not a big part of the animation.

Another example of interactive animation in my daily life is phrases or emojis on Apple messages that prompt an animation. At this stage I genuinely have no clue how these are created or 

programmed, I guess they are coded into the software? The animations themselves are a 2.5D effect, occurring to add emphasis to the conveyed message. They are certainly clever and we very much take them for granted. Until doing this module I would not have even considered them beyond just expecting them to be there and to work. Which is an example of excellent design and excellent UX. There is no friction in using them.  I did find the styles of the animation weren't consistent, for example the hearts were very clip art where as the fireworks were more photorealistic and this makes it feel in-cohesive and disordered to me. I also only discovered them by accident, on one hand this was a fun surprise but annoying when trying to work out how to use them again and it not being clear




To begin to understand what and how my own project might look, I need to look at what other people have created and how. This did take a while as it required me having a clear idea of exactly what i wanted to achieve and then a basic idea of how I was hoping to achieve it, without knowing this it felt a little like a stab in the dark for what I should be looking at. I did decide quite early on that Processing was a the platform I wanted to use so the  'Open Processing' website was a logical source of animations as the code for the animation was available to repurpose for my own project. I should probably looked further afield and not discounted Animate quite so quickly either. 

Screenshot 2023-05-16 at 09.48.06.png
Screenshot 2023-05-16 at 09.46.14.png
Screenshot 2023-05-16 at 09.54.24.png
Screenshot 2023-05-16 at 09.42.06.png
  • text appears letter by letter

  • uses fade in

  • uses mouse to trigger where it starts

  • multiple independent events happening

  • easy to understand what's happening

  • Good Instructions at the beginning

  • creates a sense of panic/urgency

  • random blue square that has no purpose - confusing

  • mouse click triggers event

  • aesthetic is a bit messy

  • Not clear if i'm interacting or not

  • Not sure if its random

  • creates feeling of busy and frantic

  • multiple events happening

  • Glitching effect could be useful for me

  • Mouse click triggers event

  • No instructions

  • Nice aesthetic 

  • Not clear if all clicks create predefined event of if there is some option to vary outcome

I started with some very general research in OP, looking at text and shape, different types of movement and interactive components. But it is vast and broad so as my project became more defined so did my research.

The fade feature was a very key element to what I was trying to achieve so I looked a lot of fade animations. 'Dissolve' was another search term I discovered while looking for fade effects. Being able to know and understand the correct terminology was essential for being able to find exactly what you want in animation. There are a lot of very specific terms for things and without this knowledge it can be quite slow going finding what you want.

Below are screen shots of a fade animation I found on OP. It was good because it had a really good speed, fading fast enough that you could see what was happening but not so quick that it was over before you could enjoy it. It did not have a trigger though it was just an animation that started upon viewing. I did find a fair amount of fade but like this sketch nothing was quite what I wanted to achieve visually, this was the closest. I needed to work out how to translate the information I was discovering in to something usable for me.

Another aspect of what I was trying to achieve was an action on a trigger event  - I wanted the fade to commence when I did a mouse over my image and stop when the the trigger event stopped. ( I also wanted the event to reverse until back to it's initial state but at this stage I just needed to focus on the first part.)

Anemone #2 has components of what I want to achieve with interaction in that when you move the mouse something happens and when you stop the event stops, however, at this stage my lack of terminology for what I was trying to do very much limited my research on it. I liked this because it was easy to use and the feedback was immediate and the bubbles gave a sense of history - you could see where you've been. The small amount of opacity in the shape creates a jelly effect and I really like the changing colours, this is a very satisfying interaction, however I'm not sur that it is that helpful for what I want to achieve.

Aesthetic Research

I had an idea that i'd like to have the background depicting water, either actually or representationally, so I had a bit of a rummage around and found these:

  • Abstract but in keeping with project style

  • More simple to recreate

  • Easy to tweak colour palette

  • Looks straightforward to design into Processing or Animate

  • Potentially distracting and overcomplicating

  • Too detailed 

  • Not in keeping with style

  • Very geographical though

  • Complicated to incorporate 

  • Really beautiful 

  • Great texture

  • Visually enticing

  • Not in keeping with style

  • Perspective of surface might be hard to too right with flat visual on top

  • Water is interesting

  • I love the look of this, the opaqueness and movement

  • The lines perhaps too similar to island contours

  • difficult to integrate with flat land.

  • focused on the spray effect - could look good at edges of land

  • complicated to achieve 

  • like the drama it brings to the event of water meeting land

  • This is the aesthetic that interests me 

  • Subtle/Understated

  • Elegant

  • Ephemeral 

  • Doesn't stand out/Hard to see

  • Great animation of gently moving water

  • wrong proportionally to island

  • looks like shallow water

  • Difficult to integrate within timeframe

bottom of page