Friday 22 May 2015

MMc406 – Sound and Moving Image

Introduction - I am to produce a 2 minute video that will accompany my end of year project that explores and documents my production process from start to finish. This will help show my workflow and how I come up with concepts and ideas. this can also help define and show how I solve problems.

I will also be showing research below into many different subject matters that will help show camera shots, software, and common film making practice that can help show understanding.

I will be going into detail and showing research into the following :

1. Framing techniques
2. Filming styles
3. Editing techniques

For my final project I have decided to make a eco car, this car will be based off the lykan for its looks but it mainly is being created to prove that a wide range of energy generating technology can be implemented into the car to have it able to then be self rejuvenating, so everything about this car is to maker it renew its energy in one way or another. this should lead the path way for other car manufactures to do the same for their cars to make a difference.

Since I have already modeled the car it will have the be the post process effects and techniques I use after the car is rendered. this will be placing it into Photoshop to make the car ad campaigns and it will still show my thought process for this as well as the way I work also.

Framing Techniques
There are so many framing techniques to cover, so I will just cover a few of the ones that are common with today's productions.


This is where the subject in question is circled by the camera to usually either give a sense of space or to show the character for the first time.


Ariel shots are used to show a landscape or location from a helicopter or building to show a wide scene. this can be used to introduce the location.


Close up shots are used to show the subject face in more detail to show their expression or feelings for the current on-going events happening in the film.

Handheld shots are when the camera is not a on a Dolly or tripod and is instead hand held and has the natural hand shaking movement as the subject is looked at or followed. this gives a sense of natural video recording to show amateur recording effect.



This shot is when the camera is continuously moved to the left from the right or vice versa, this is commonly used with car chases to show distance over time and speed.



A shot from a hydraulically balanced camera that allows for a smooth, fluid movement. this is used to follow a subject without much shakiness from a handheld being used or dolly which gives a more linear feel.


A shot that follows a subject be it from behind or alongside or in front of the subject. Not the same as a panning show as this is more smooth and linear then a faster pace.


Whip pan shot is a substantially increased shot from left to right, this is show a quick transition from one subject to another. Whatever is in-between is blurred and hard to tell, this short can be easily created with motion blur generated effect in post production software.


A shot deploying a lens with a variable focal length that allows the cinematographer to change the distance between camera and object without physically moving the camera. Also see Crash Zooms that do the same but only quicker.


Filming Styles

Difference between genre and film style

Film style is distinct from film genre, which categorizes films based on similar narrative structures. For instance, Western films are about the American West, love stories are about love, and so on.

Film style categorizes films based on the techniques used in the making of the film, such as cinematography or lighting. Two films may be from the same genre, but they will probably look different based on the film style. For example, Independence Day and Cloverfield are both sci-fi, action films about the possible end of the world.

However, they are shot completely differently, with Cloverfield using a handheld camera for the entire movie. Films in the same genre do not necessarily have the same film style.

Therefore, film genre and film style are distinct film terms.

Film styles are recognizable film techniques used by filmmakers to give specific changes or value to their work. It can include all aspects in making a film: sound, mise-en-scene, dialogue, cinematography, or attitude

 You can tell a film by the way it is filmed with its framing and choice of certain effects, colour, scene, or attitude, you can is tell who directed the film if you pay close attention to the directors filming style choices enough.

1. Wes Anderson - Director of Moonrise Kingdom, The Royal Tenenbaums, and last year’s The Grand Budapest Hotel.

He likes to use a lot Static camera angles an shots, he keeps the camera stationary, a lot of directors don't like to do this since it takes away a three dimensional feel from the movie. But that's was Wes Anderson likes about it and it works for his films.


2. Martin Scorsese - Director of Who's That Knocking at my door?, Taxi Driver, and Goodfella's.

Martin likes to use slow motion, long tracking shots and use of popular music at the time of creating the film, these are the three things that come into mind for his visual style. for the film "Who's that knocking at my door" he used slow motion to heighten moments in the film, particularly during scenes of psychological duress.


3. David O.Russell - Director of The Fighter, Silver Linings Playbook and American Hustle.

This Director likes to use Steadicam rigs, this is because he likes to use increased camera movement, such as towards or away and even around the characters to imbue the frame with energy. He tends to do this because it gives a smooth tracking shot which can be handled by the operator.


4. Zack Snyder - Director of 300, Watchmen and Man of Steel.

Zack Also les to use Slow motion but he does it his own way by combining into a shot, Slow , Normal and Fast motion. the kind of slow motion that Snyder pioneered can be seen in nearly every action film, what's more important is how he establishes the shot and continues to shoot action scenes as a whole.


5. Tim Burton- Edward Scissor Hands, Batman Returns, Corpse Bride

Coming from an art and animation background, the first thing you’ll notice in Burton’s films is a strict adherence to gothic color palettes, production design, and costume design. In general, Burton’s film and production tend to employ designs that harken back to expressionist filmmaking, specifically German filmmakers like Fritz Lang or Robert Wiene.

Editing techniques

Match Cut -  A match cut, also called a graphic match, is a cut in film editing between either two different objects, two different spaces, or two different compositions in which an object in the two shots graphically match, often helping to establish a strong continuity of action and linking the two shots metaphorically.

Flash Cutting - This is when sequences are short in duration of the shots are very brief, this is also known as short cut. this is when a cut that has a very shoty length usually less than two seconds.

Cross cutting -  Editing that alternates shots of two or more lines of action occurring in different places, usually simultaneous.

Discontinuity editing - Any alternative system of joining shots together using techniques unacceptable within continuity editing principles.• Possibilities include mismatching of temporal and spatial relations, violations of the axis of action, and concentration on graphic relationships. See elliptical editing, intellectual montage, non-diegetic insert.

Elliptical editing -  Shot transitions that omit parts of an event, causing ellipsis in plot and story duration.


Jump Cut -  An elliptical cut that appears to be an interruption of a single shot. It occurs within a scene rather than between scenes, to condense the shot.• Either the figures seem to change instantly against a constant background, or the background changes instantly while the figures remain constant.

Overlapping Editing -  Cuts that repeat part or all of an action, thus expanding its viewing time and plot duration.

Invisible Editing -  Editing that is so smooth that viewers become engrossed in the movie and don’t notice the individual cuts.• Also referred to as seamless editing.

Line Cut -  Tape of the switches from one camera angle to the other that the multiple cam director called out as the show was shot.

Split Edit -  A video editing term for overlap. In a split edit the audio and video edit do not start at the same time; either video or audio is delayed. Also called an L cut or a delayed edit.

I can use various editing techniques from the following as well as some others. When it comes to making my own video to show my process. I will be using the relevant editing techniques that  can how my work process in the best way possible. 

There will be moments where the video will be sped up to show parts other then development from start to finish. The Time Lapse is not for what I do to achieve the final result its more to do with the how it becomes the final result.

TimeLapse - 




https://vimeo.com/130072875

HyperLapse - 






Saturday 9 May 2015

MMc404 – Interactive Multimedia Applications ( Augmented Reality App )

What's Augmented Reality?
The process of superimposing digitally rendered images onto our real-world surroundings, giving a sense of an illusion or virtual reality. Recent developments have made this technology accessible using a smartphone.
How is it used?
Augmented reality is hidden content, most commonly hidden behind marker images, that can be included in printed and film media, as long as the marker is displayed for a suitable length of time, in a steady position for an application to identify and analyze it. Depending on the content, the marker may have to remain visible.
It is used more recently by advertisers where it popular to create a 3D render of a product, such as a car, or football boot, and trigger this as an overlay to a marker. This allows the consumer to see a 360 degree image (more or less, sometimes the base of the item can be tricky to view) of the product. Depending on the quality of the augmentation, this can go as far as indicating the approximate size of the item, and allow the consumer to 'wear' the item, as viewed through their phone.
How does it work?
Using a mobile application, a mobile phone's camera identifies and interprets a marker, often a black and white bar code image. The software analyses the marker and creates a virtual image overlay on the mobile phone's screen, tied to the position of the camera. This means the app works with the camera to interpret the angles and distance the mobile phone is away from the marker.

Due to the number of calculations a phone must do to render the image or model over the marker, often only smartphones are capable of supporting augmented reality with any success. Phones need a camera, and if the data for the AR is not stored within the app, a good 3G Internet connection.
Analyzing some AR Apps
Wikitude World Browser 
 Wikitude World Browser (Android/iOS/Blackberry/Windows Phone)
This AR App allows the user to find some City attractions, locations and more. by having the camera work as a search engine for some of the locations to go to, Food, Cinemas, Bars and more. Its UI you can see is reality easy to use and access, just tap at what you would like to do. and then it can show you these places using a geographical locations as well as some reviews for the place too.

Yelp Monocle 
Yelp Monocle (Android/iOS/Kindle)

This is similar to the App above but it will give you locations also on a map view as well as locations of your friends or family that recently went to the attraction or location so you can easily meet up or find each other.The convenient app uses your smartphone’s GPS and compass to display AR markers for nearby restaurants, bars, and other businesses in real time, each bundled with the service’s user-generated ratings and reviews. 

SnapShot Showroom
SnapShot Showroom (iOS)

Basically this app allows you to take a picture of the desired room to furnish with the space that the product will go. So it allows you to see how the product you wish to buy will fit into the room without having you to buy it first or imagine how it will fit there. it saves also of time an trouble for the customer.

Augmented Car Finder
Augmented Car Finder (iOS)

Augmented Car Finder is an app specifically designed to help guide you to your hiding vehicle. Once the car’s location is set, the app creates a visible marker showing the car, the distance you are from it, and the direction you should walk to find it.

Google SkyMap
Google SkyMap (Android)

To use this App all you have to do is, just point your phone upward when it’s reasonably dark and clear outside, and Google will point out all the different stars, constellations, and planets that are visible to your phone’s camera. IT also allows users to search for specific stars and planets not presently visible on your screen. Once found, the on-screen interface and directional compass will then directly guide you to said star or planet

Augment
Augment (Android)

Augment is an app specially designed to boost sales, bring print to life, and visually see the possibilities at hand. Once users sign up with a free Augment Manager account, the app allows users to upload their own 3D images and trackers from applications such as Cinema 4D, Sketchup, Maya, and the like, and place the 3D models in a virtual environment using the camera on their iOS device.

APP UI and Design
Whats Popular right now for Apps is to have a flat design and UI, this is because its clean and easier to see whats where on the App.


This Apps main color scheme is simple, and consists of 3-5 colors mainly, it is flat as that is the popular design to go for right now. its simplistic and spacious with its content as well as has a simple typeface.

Color Blindness and how it affects you

People who are color blind have a limited Hue to work with and see, thus they have trouble looking at websites, apps and games. they only see a certain amount of color and can be hard for them to distinguish certain things and colors.

A Website that is making a change for Color blindness to educate the rest of the world of these issues and how to resolve or fix them! Below you can see how the Color blind see these colors that are normal for us.


Normal Color Vision

Green-type Color Blindness

Red-type Color Blindness

Blue-type Color Blindness

Below are some things we can change to help people with this condition out

Charts and Statistics

A common issue is when you have a chart or statistics to show on your website the worst you can do is show the key for the chart away from the information you are displaying thus making it hard for the people that are color blind to tell it apart and read the stats.

Statistics of the sales for the bundle in a colored pie chart

When hovering over the chart with your mouse cursor an alternative greyscale version is showed. This version uses a grayscale gradient type color scheme; from light to dark. This eliminates the need for naming, recognizing and comparing the colors in the chart to the legend.

Humble Indie Bundle in the hover state

A very good example of how simple alternatives can provide a solution, even without changing the way a website looks.

Color Picker
What is the user that is color blind is wanting to make a customization to their twitter page? or blogger or anything else that lets you do something similar, sometimes the website allows you to color pick and select colors, which is very helpful for you and me, but for anyone with color blindness it really is not helpful at all unless they memorize all the hexadecimal color codes. Which is unlikely!



Fixing this issue 

Having the color picker would require to solve the naming and making combination problems. I would suggest providing a set of default colors with their names available.

Microsoft Word does a great job at this. When hovering over one of the predefined standard and theme colors you’ll get the name of that color. It’s still possible to pick a different color using a color picker like the one twitter uses, but this picker is hidden behind the ‘more colors’ option.

msword-color-picker-onhover

The Twitter profile design page already uses this pattern for the background selection. A set of default suggested backgrounds and the option to upload your own. These backgrounds could even be paired with suggested colors.

As with most fixes that benefit the colorblind this also benefits non colorblind users.

Readability
Readability


Readability is a app that wants you to read comfortably— anytime, anywhere. But what if you’re colorblind?

Readability offers you a clean reading experience by stripping webpages from any distracting elements like ads, sidebars and navigation. You can convert any webpage into a Readability version and read it in your browser on a laptop or desktop. They also offer iOS and Android apps to take your articles with you.

Articles are stripped of any markup and converted into a consistent clean design. In this design the text-links are red without an underline. This poses a problem for the colorblind, especially the protan- (red) types of colorblindness.




Solutions lie in increasing contrast (pure bright red: #ff0000 instead of dark red: #9C0001), underlining links or adding an icon next to it like Wikipedia does with its external links.

A special colorblind mode might be a last option if changing the design of text-links does not fit within the default style.


Colorama App Development and Design

Logo Ideas
I decided to go ahead for the one on the top left, as that has a good balance of detail and simplicity, it also is the one that shows the Apps intention and support. as the cut in the pupil shows the blindness for the eye, but not complete so that symbolism partial blindness but in this case its for color instead of vision. Next i will look at some color scheme for the logo.


As for the color ideas i wanted to keep it simple! as the logo is simple, so here are two variations of the logo, one on the blue background as the App is based off a blue main color. the other variation is with the colors inverted to show the varied design, this can be used on thing such as T-shirts, Letterheads and more.

Wireframes



Splash Screen

This is the splash screen for the app once the user loads it up, they will see the background and logo in the center of the screen while it loads up.


 Main Menu

This is the main menu, this menu shows the options of the App to the user, so from here they can select if they want to scan a color, or if they would like suggestions fro ma specific color they already got in mind.

 Scan Colors

Here is the screen that comes up if the user wants to scan a color ,the preview window shows what the user is seeing through the phones camera, and on the screen will be a button to ask if they would like to scan now to begin scanning the color in the view.

 Scan Results

On this screen the user has a option to re-scan, and the results are shown below at the bottom in text form, and it also provides the Hex color code if needed. 

 Suggestion

Here is the screen similar to the scanning a color but with the results on this page you are able to see matching colors. So you can purchase or find other products that have a colors that compliment the last or fit well without too much contrast between the colors.


Mock up Designs


Splash Screen


 Main Menu


 Scanning


 Results


 Suggestion

I've made the working version below using Aurasma,

To do this i had to use the Website Aurasma, on this website you are able to upload a trigger image, this image is then used by the App on your phone for Aurasma which will then initiate whatever you have set it up to do!, so what i did was i set the awaiting scan image as the trigger image.

After this i then used this a video i had created using after effects at the same size of the image to be the overlay, so when the user scanned the image it would play the video behind it which would look seamless and represent.

The video shows what the scan taking place would look like as the color is scanned for the App, and the results are shown within seconds of scanning, it would then be able to scan the color of the clothes by having a grid system that scans each square grid, this then shows what the average color is and displays a color for the user to see.

To run it simply Scan the image below which is the trigger image


Please Find the Portfolio Display of the work and Apps on my Behance page located here

https://www.behance.net/Atif786


Bibliography - 

http://wearecolorblind.com/ - 10.5.15

http://www.tomsguide.com/us/pictures-story/657-best-augmented-reality-apps.html - 10.5.15

http://en.wikipedia.org/wiki/Augmented_reality - 10.5.15