3D Modelling Task – Nokia Phone – Interpretation of the production process

I planned out in advance how I was going to complete the model briefly, before getting started as I said before – to ensure I didn’t encounter any game-breaking issues. 

I decided the best way to model the main body of the model would be to use the Loft NURBS generator – the essential reason for this being the degree of control it gives me over smoothly tapering each end of the main body of the phone. I created a spline from the reference materials I had set up in the scene (using the symmetry object to ensure accuracy) and repeated them alongside the reference changing size in order to match the design. I changed the cap types to fillet with appropriate steps and radius values in order to give a bevelled, smooth look (as this was a visualisation model). 

One issue i encountered through doing this was seams appearing once the Loft generator was applied to the splines – i later found this was due to mismatched points and subsequent overlapping splines. I researched the issue and in combination with experimentation by myself I solved the issue by moving the points apart, connecting and deleting the remnants of the two objects, and welding the points together into one. I made another extrusion with Loft NURBS for the indentation where the screen and digitizer would be placed, favouring it over the Extrude generator again due to how I was able to easy manipulate the bottom spline, giving a tapered effect to the indentation.

Image

I produced the glass digitizer using an Extrude generator as I didnt require the same level of control as I did previously. I spent a long time perfecting the glass texture after I added the textured screen underneath in order to give the right effect on top; In addition to bevelling the sides of the screen to mimic its real-life counterpart, I used the refraction index of glass (commonly accepted as about 1.52) to meet my aims of realism for the product, as well as slight reflection to give a glare from the overhead lighting rig, and appropriate specular highlights. I added capacitive buttons in the same way, by making a small plane with the texture applied to it. Measures I took in preparation for this including tracing paths to a reference image for the symbols, since it was a high-definition 3D model I needed to use a vector texture for potential close-up shots, leaving options for different applications open.

Image

The final step for this stage of the production (a model highly representative of the final product) was to look at environment, lighting, and rendering strategies. I turned on channels for Global Illumination, Ambient Occlusion, and Caustics as well as building a rainbow-coloured overhead lighting rig to light the scene. Global Illumination is a key asset to photorealistic rendering as it renders the scene using light emitted from reflections and other objects, rather than just rendering the scene with light from the light source (Christensen, 2010). Caustics was necessary due to my usage of glass texturing for the digitiser; the glass now not only casted shadows where appropriate, but the caustics (light rays caused by light refracting through the glass) were now included, adding to the realism (Lynch, 2001). Ambient Occlusion works in tangent with Global Illumination to make the scene more realistic; each point of illumination is the function of geometry elsewhere in the scene, and it provides darker shadows and areas progressively into un-lit areas (Whitehurst, 2004). I produced a set of renders with these effects in mind, as well as my lighting rig, and gradually adjusted specular highlights, reflections, and the smoothness of the body material with a higher contrast specular highlight in order to represent hard plastic with a clear, sharp highlight.

Image

Image

Sources:

Christensen, H. 2010. Point-Based Global Illumination for Movie Production. [e-book] Pixar Animation Studios. Available through: graphics.pixar.com http://graphics.pixar.com/library/PointBasedGlobalIlluminationForMovieProduction/paper.pdf [Accessed: 27 Mar 2014].

Lynch, D. K. and Livingston, W. C. 2001. Color and light in nature. Cambridge, UK: Cambridge University Press.

Whitehurst, A. 2004. Andrew Whitehurst . Net. [online] Available at: http://www.andrew-whitehurst.net/amb_occlude.html [Accessed: 27 Mar 2014].

3D Modelling Task – Nokia Phone – Description of the task

I planned this task in order to provide myself with an original model in which I can practice various object visualization strategies, animation projects, and for general marketing/showcase practice.

The product that I modelled needed to facilitate different avenues down which I might be able to explore different strategies for marketing a product, represented through a 3D model, such as the possibility of adding a voiceover, showing various aspects of the product in a succinct manner, animated functions, screen transitions, changes in colour, and so forth. The model also needs to be reasonably adaptable – the screen texture and body colour on this one will be able to easily be changed. The model must be of high detail in order to be visually appealing in various applications for its use – since it’s being marketed after all. 

Image

I acquired some reference materials in much format as I did for my Audi A3 model, and set them up in a scene ready to begin modelling. I considered before beginning the process how I might model each area based on my current knowledge of the software in order to prevent hitting a plateau, since I was under time pressure to complete a presentable final result. 

3D Modelling Task – Audi A3

I set myself the task of modelling a car over time for the main purpose of familiarising myself with the polygon modelling method often used for these applications, and particularly almost the exclusive method for modelling characters to be animated. I anticipated the task would take longer than any other project I have attempted before due to the complexity and relative irregularity of the mesh compared to projects I have undertaken before – which were built mostly from splines, subdivided primitive objects or generators. An advantage of polygon modelling in comparison to these is the ability to make completely freeform choices in where points, and subsequently, polygons are placed – meaning its a useful tool for organic objects such as car panels in this case, or perhaps characters, and additionally for creating an object from reference – such as the blueprints I used to begin this task:

ImageI set up the blueprints in a way that allowed me to plot points against each plane in different views, then switch to the next view to adjust the points against the blueprint, and the next, and repeated this process for all points plotted along the contours on the image until they have lined up for each part of the car. After having done this I bridged the points in order to create polygons which are linked together in order to create a mesh. I used a symmetry object to ensure both sides were identical, and subdivided the mesh in order to interpolate and thus increase the amount of polygons to create a smoother surface. 

Image

Useful applications for modelling in this way might include advertising and marketing, design, usage in games/animations and movies, as well as technical or scientific applications such as crash testing or automotive engineering due to the possibility of real world physics being involved as well as mechanical rigging of the structure allowing the model to respond in a realistic way to other forces that might be introduced, in order to test scenarios.

Image

I have not yet finished this project, in favour of completing a different, quicker project for presentation on this blog however I plan to continue it as a long term project, allowing me to make revisions as my knowledge of the software (again, CINEMA 4D) increases

 

Kinetic Typography – Final Render

I completed my short typography animation and uploaded the result to Vimeo; which can be seen above. Final considerations I had to make involved making choices for the environment in which the animation would be rendered; I did consider adding complexity to the work however I decided to keep it simple for brevity, and to address the real intention of the work which was providing pace and mood to the lyrics used. I intend to produce another similar animation at some point in which I may consider building up from the main virtues of this one and expanding the scope of it – which is partially reliant on my technical skills in CINEMA 4D and After Effects. I plan to incorporate the use of After Effects into my next piece due to its very native import/export feature with CINEMA 4D, I plan to fine-tune the scene composition in After Effects before the final animation is produced.

Experimental animation in Adobe Flash

A suggested mini-project for the portfolio brief was to create a short animation in Adobe Flash, synchronised to some music, in order to explore the basic concepts of animation as a discipline.

After looking at the history of animation and where it comes from (Animation.filmtv.ucla.edu, 2014), I experimented with frame by frame sequences, manifested through hand-drawn images mounted on a Spinnerscope in order to provide a rudimental understanding of what it means to animate – the results of which can be seen in my earlier post here.

I decided to focus on a music visualisation/abstract style of design to experiment with flash through, since I felt the best way to gain experience with the fundamentals of 2D animation would be to avoid factors such as storyline, plot, art assets and so forth. Additionally, we had researched early animations, and they were largely abstract (Animation.filmtv.ucla.edu, 2014). I wanted to emulate this in a more modern context.

I found an image with which I planned to use in my composition as a background (Weis, 2014) for the areas which I would animate myself, and a song to synchronise the animation to (Chicken Honk, 2013). I wanted to work around the principle of abstract image manipulation; compositing my flash sequence on top of the image. The image I chose lended itself very well to a shape based animation due to the area in the middle which was already made up of several triangles, and so I decided to build upon this and create a radial, transitional style of animation revolving around the main subject of the image I chose.

Before beginning the project Flash refused to import the music track to the library; I researched the situation (the program did not provide a reason) and discovered Flash was unable to deal with files of a certain sample rate (Help.adobe.com, 2014). I loaded the file into Adobe Audition and re-exported it with a lower sample rate, which solved the issue.

Image

I created a black triangle shape using the pen tool, then converted it to a symbol for ease of use, adding it to the project library (alongside the music track and background image). I found the library system made it easy to keep hold of assets and to organise them, improving workflow efficiency in general as well as being beneficial to the specific task of animating, as assets will often be repeated between frames – as I found was the case, and hence was easily able to drop in assets from a central location repeatedly. I felt however based on my usage of Flash that some of the creative tools were lacking in usability – for example the requirement to select the paint bucket to fill a shape drawn using the path/pen tool rather than the option provided in the shape properties, which was unavailable for this tool. Additionally there appeared to be a lack of a hotkey to disable realtime snapping when rotating shapes or moving the pivot point to counter this, however most problems were remedied by further research online into the software.

Image

I inserted keyframes based on where waveforms peaked on the audio track layer I had inserted below my animation layer, and moved them as I progressed with the animation based on previewing the track back to myself and making small adjustments – moving and duplicating shapes based on the part of the music track playing at the time. I included an opacity fade to reflect the feeling of the bass fade at one point in a visual manner, just before the rhythm picks up again.

Image

Should I repeat the project, in order to improve I would spend time researching the software more thoroughly in order to understand how it differentiates from the other products in the Adobe Creative Suite in order to be able to use it more effectively – as well as make considerations for transitions and extra effects in terms of going beyond a simple radial pattern as I have done here.

The finished animation can be viewed here

 

Sources:

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].

Chicken Honk. 2013. Massive Chicken – Chicken Honk. Available at: http://www.jamendo.com/en/track/1092059/massive-chicken [Accessed: 25 Mar 2014].

Weis, P. 2014. Reflection of St Michaels Church, Hamburg. [image online] Available at: http://commons.wikimedia.org/wiki/File:Reflection_of_St._Michaelis_Church,_Hamburg,_Deutschland_IMG_4822_edit.jpg [Accessed: 25 Mar 2014].

Help.adobe.com. 2014. Adobe Flash Professional * Using sounds in Flash. [online] Available at: http://help.adobe.com/en_US/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7ce8a.html [Accessed: 25 Mar 2014].

Francis James Jewellers website re-design: Update #2

Revision

As I said in Update #1 of this project, I needed to fix the lack of adherence to the colour scheme already followed by the brand – as well as being recognisable by the local community, and used in various places from the current website to the Facebook page. I decided that, being a shop, the site also needed a better way to showcase new products or promotions, as well as a style that encouraged browsing by the user.

Form and Function

The traditional layout I had chosen previously had issues in that it was more suited to an informational type of website – with facts to show or passages to read and potentially sink time into doing so. For this website, it could be argued it would make better sense to allow users a way to quickly browse and find what they wanted, or even further so due to the nature of a Jewellery business, perhaps let something catch their eye above the other products – perhaps as a personal taste or for a gift.

sketch

I sketched out plans for a new layout allowing an image slider or promotional banner at the top of the site, as well as larger buttons underneath the header for recent promotions, and finally a section for information on the business and its history/context. I also planned to move away from the traditional structure for the reasons mentioned, and use a fullscreen layout, albeit not a one-page design due to the amount of content that would be hosted, making any system without categories difficult for the user.

mock4

 

Summary

I feel the concept I produced meets the needs of the site suitably. I adjusted the font weight on the bottom of the title in order to differentiate between the two main parts of it, and images for the slider would have to be processed beforehand in order to achieve the gradient fading into the header. Main links would be on the header as well as social media/contact icons, while incidental/contextual links would be in the larger buttons underneath, intended for promotional use at varying times of year or dependent on the stock cycle of the business. A minor improvement would be to change the font in the body text as it does not match very well with the two fonts already used – and more than two fonts on a page can begin to make the composition uncomfortable and inconsistent. A subtitle on the body would also create a cleaner and more informed layout.

Website re-design – Content

I needed to ensure that I had chosen a suitable way to display my content in the one-page layout as opposed to how it might have been on the traditional layout. I stuck with the grid for my still work as I felt it offered a succinct way of communicating the work I did, my style overall, and without the requirement for the user to look through categories of work, as in my own experience I have often found myself simply skipping between categories one after the other in an attempt to gain an overview of someones work or style. I did enlarge the wrapper for the content grid to allow more thumbnails to be seen side by side, as is complimentary of the one-page layout.

Image

Image

In addition to this, i also opted to remain with the jQuery lightbox plugin I was already using, as it worked well and there was no need to change it. The problem I now faced was a way to display my animated work in a visually clear, summarising style, similar to the way in which my still work was displayed. I considered inserting the animated clips amongst my stills in the gallery with a lightbox plugin to view them, and differentiating them with “Play” icons overlayed over the thumbnail. I felt that the medium of a gallery did not work so well for my clips in particular however, and that’s because I am primarily involved in illustration/visual graphics, rather than animation or motion graphics. Hence, the majority of the clips I wanted to display were shorter clips intended for usage in other projects. I felt a showreel would be a better choice in which to display these due to the quick, fast-paced nature, as well as the feel of a summary of clips, rather than displaying each one in its own right. A showreel also matched the rationale behind a large grid of still images, as opposed to categories, as the clips were being showcased in an overview, not presented one by one. I produced a short showreel of my older work and installed a jQuery video lightbox plugin, linking to it at the top of my page alongside the prompt for the user to scroll down.

ImageIncorporating the showreel into the page avoids linking the user away from the site – promoting continuity and consistency when browsing work, as its all by the same person.

I made some technical adjustments to the site in general as well to improve the general experience for the user. I used a jQuery plugin called prettyPhoto (No Margin For Errors, 2014) for the video lightbox, and smoothScroll for the smooth scrolling to anchor links. This was an important consideration for user experience since if the browser was to navigate instantaneously to the anchor tag, the user may not realise the content they’ve missed and scrolled past and/or lose their general sense of direction on the page. Whereas, with smooth scrolling, the user can see all content being scrolled past and it most likely will inform their decision on what to visit next. I added some jQuery for the subtitle at the bottom of the homepage referring to scrolling down and viewing my showreel. This enabled a “falling and fading” effect when the user scrolls down, which, while mostly for aesthetic reasons, also helped create a fluid feel when the user scrolls down from the homepage as the subtitle disappears gradually, rather than scroll up the page (which looks awkward by itself) or disappear abruptly. I had to make some changes however for different types of mice – the common two which are the one-button mouse shipped with Mac OSX systems, which when scrolled is much more gradual, compared to lots of older mice intended for use on windows systems which jump larger areas at a time – meaning the fade effect would be lost. I had to convert font sizes and element dimensions to vw/vh units to show correctly on the majority of screen sizes also.

homepage

The finished showreel can be viewed here;

Sources:

No Margin For Errors. 2014. prettyPhoto jQuery plugin. [online] Available at: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ [Accessed: 25 Mar 2014].