As part of our media showcase project we explored the concept of animation – and as with anything, it could be argued there is no better way to begin than by putting the discipline into context and looking at how it began.
Having looked at traditional animators and their animations (Animation.filmtv.ucla.edu, 2014), I began to sketch out some basic sequences to understand the basic premise of animation, and to explore how best to illustrate different cycles for realistic playblack – using more dated methods such as a SpinnerScope and a flipbook to play them back. As a result of this, it meant the cycles I created had to be exaggerated to playback with enough clarity to be recognisable, as well as realistic in terms of velocity, direction, and general physics, in order to look right.
The main problem I found when making simple sketches by hand, with no references, was in some cases predicting the path of the object in focus – for example when drawing a cycle of a leaf blowing in the wind it was sometimes difficult to decide how the leaf would warp and rotate in the wind – as well as depicting the wind itself to give some context as to why the leave was moving. Representing the wind visually also was useful in backing-up the movements of the leaf.
I made a more successful short animation of a simple bouncing ball – with a lot of flex when the ball makes contact with the surface to ensure it is made obvious that the ball is falling at speed, contracting, then expanding again and carrying energy into the next bounce. I tried to show a similar effect with my first attempt – a car jumping over a gap – by showing marks where it landed to emphasise how the springs and dampers in the vehicles suspension system would compress to absorb the shock.
I made a low quality preview of the bouncing ball in order to demonstrate the fundamentals of animation:
Animation.filmtv.ucla.edu. 2014. The History of Animation. [online] Available at: http://animation.filmtv.ucla.edu/NewSite/WebPages/Histories.html [Accessed: 25 Mar 2014].
Just passed 1000 views on this blog today and I thought I would upload this as a means to celebrate… so thanks!
As part of my employment at Francis James Jewellers in Minehead (Francis James Jewellers – Ebay, 2014), I created some mock website designs as a contribution towards an eventual website re-design for the company.
Unlike tasks I have been carrying out at university and for personal projects, Francis James has a strong visual language already established – since the company was started before the web even really existed. Therefore I had a visual code to abide by in terms of colour scheme and general aesthetic.
Bearing in mind the traditional theme of the brand overall and the amount of heritage associated with it I did not want to design the site in such a way as to erase this – I wanted to retain the heritage associated with the company and the surrounding area of Minehead both for the sake of the company as well as the customers, who are typically loyal to this one shop and were generally repeat customers due to the location; touting a challenge in the context of digital design of not only working to an established visual style, but keeping the general aesthetic of the site relevant to a particular portion of a local market.
I sketched out some initial ideas for the website and made a basic framework consisting of a banner/header section, a navigation bar and then a content wrapper. I spent time adjusting colours, fonts, and type parameters in order to achieve an appropriate outcome. I chose a wood background as not only did it compliment the colour palette of the company already, but it offered a traditional aesthetic alongside a modern website – which I feel serves nicely the criteria for this design in particular.
However, criticism for this design in particular would be the lack of adherence to the colour scheme – while it does offer the overall feel it uses the wood texture in place of a solid colour background which results in the brand palette not being fully utilised. I set about fixing in this in the next design.
Francis James Jewellers – Ebay. 2014. Francis James Jewellers eBay Shop. [online] Available at: http://members.ebay.co.uk/ws/eBayISAPI.dll?ViewUserPage&userid=t6car [Accessed: 25 Mar 2014].
Finishing the geometry and environment for the bottle scene left me with a final task in my role; producing 6 short clips showcasing the bottle, intended to represent the idea of medicine and treatment that resounded in our project. I labelled and rendered various shots of the bottles for use on our group’s website:
For the animation, due to time pressure I had to lower the overall final quality of the scene. However, having said that, the clips were produced to be included alongside other footage in the final 6 videos we produced overall, and so would be compressed down as well as being shown at a lower resolution for suitability on a website, so the loss in quality overall would not be so bad.
I started by removing the lightbox scene I had set up and replacing it with a simple floor environment with some fog to blend the floor into the horizon. I made the environment colour cyan with a low intensity to give a clinical atmosphere in the animated scenes – as this was the style we were following with the website and branding scheme.
I used an infinite light combined with an omnidirectional light object to light this scene as it required vastly less calculation to use the stock CINEMA 4D lighting engine than creating a lightbox rig. I removed the global illumination used for the previous renders too for the same reason – due to issues with video production the project was now under a lot of time pressure and the rendering time needed to be made quicker. The result was a slightly less realistic but still accurate render:
Finally I mocked up some camera paths for the animation by keyframing the movement of a camera object controlled directly through the viewport, then smoothing its path by editing the curves in CINEMA 4D’s f-curve editor. I rendered each frame seperately at 1280×1024 in TIFF format then encoded them using the freeware utility “virtualdub” (Virtualdub.org, 2014) at 25 FPS – the EU PAL format.
Virtualdub.org. 2014. Virtualdub. [online] Available at: http://www.virtualdub.org/ [Accessed: 25 Mar 2014].
It’s been a while, but in my last submission to this series I had just finished the basic geometry and most of the texturing for the bottle I had been tasked with producing, however having now finished the project completely (which can be viewed at http://dakar.bournemouth.ac.uk/~asisan/facade2/index.html) I have been left with the perfect opportunity for a quick update on the end of production for my given role in the project.
I needed to create an environment which would provide some photorealism to the final render of the bottle, by incorporating some softer lighting, less reflections and surroundings that add to this atmosphere in themselves.
To begin with, I added a lightbox to the scene for the bottle to go inside of, as well as some overhead boxes that would serve to soften some of the light and create that soft approach I was looking for In the final renders. I played with the intensity and size of the various lights and shadows until satisfied, making low resolution test renders along the way to check my progress.
Making the lid was a relatively simple task that involved using poly-modelling on a primitive shape available from the CINEMA 4D library installed with the software, and extruding parts of the lid to create the shape seen on the final model. As a side note, this technique probably would not have been used in other applications such as games, and rather bump mapping or normal mapping would have been used instead, to simply represent the shape via texture rather than create the mesh itself – due to the necessity of real-time rendering required in a game. As it happens though, methods like this are acceptable for high quality renders or motion graphics designed only to be viewed, not interacted with in real time.
I used global illumination to light the scene and adjusted render settings accordingly until suitable. I set up a camera object to ensure the same angle was kept between renders and then repeated the process by changing the texture on the label between renders.