FIT2092 Interactive Media Studio 2 Monash University Information Technology Semester 2, 2018 1 Assignment 3 – Holiday Diorama-rama! Using web technologies, you will design and construct a 3-dimensional interactive audio-visual diorama. The diorama must be presented as a web page containing a stylised 3D scene based on a specific holiday (or an nationally/internationally recognised day). The web page will be viewed and operated in Google Chrome running on a desktop computer. The diorama must implement at least 1 example of each of the following features: • User-rotatable 3D space • Controllable sound effects and background music • Animation triggered by user interaction The scene must be an original design – recreating existing scenes from popular culture is not allowed. However, you are encouraged to research a variety sources (toys, books, 3D objects, websites, etc.) for inspiration. You are free to choose any target demographic. The holiday depicted in the diorama can be commonly known, or something more obscure, provided that you are able to research information and design styles relating to the holiday. For example: • Christmas (internationally recognised holiday) • Dia De Los Muertos (Mexican holiday) • World Penguin Day (obscure internationally recognised day) Research design styles that will appeal to your chosen target demographic, as well as any cultural design styles that may be relevant to the holiday or its historical background. You may use any resources for your research and inspiration. However, all media assets used in the diorama must be original work or be Public Domain or Creative Commons licensed. All non-original media must be creatively edited for inclusion in your project. Unauthorised use of copyrighted materials is not permitted in this assignment di·ora·ma /ˌdaɪəˈrɑːmə/ noun A scene, often in miniature, reproduced in three dimensions by placing objects, figures, etc., in front of a painted background. FIT2092 Interactive Media Studio 2 Monash University Information Technology Semester 2, 2018 2 Technical Details The diorama must make use of the following technologies: • HTML (displaying media and defining 3D faces) • CSS (general styling and 3D construction) • JavaScript with or without jQuery (user interactions) This assignment is an exercise designed to test your ability to apply aesthetic and creative design under strict technical constraints. CSS-based 3D has several limitations that you will need to carefully consider while planning your design: • Each face in a 3D object is a flat surface • No static or dynamic lighting system • Large number of faces require significantly more code With these limitations understood, you may want to make use of other HTML and CSS features to enhance your design: • Transparent images to create non-rectangular shapes • Video, GIF or sprite animation to create animated surfaces • Carefully designed textures to create the illusion of lighting • Constrained rotation to limit the allowed viewing angles You must research, plan and execute a design that can be implemented using between 20 and 60 3D faces to create an aesthetically pleasing result. The design should be creative – a simple textured box will not be acceptable. Interactions can be implemented using any type of browser-based user interaction method. For example: • CSS transitions using mouse hover • JavaScript mouse interactions • JavaScript keyboard interactions • JavaScript speech recognition Interactive animations must result in movement of at least one independent face or group of faces in the 3D object, or animation within one or more faces. This may be implemented with any web-based animation techniques. For example: • Animated GIFs • Video elements • CSS transitions • CSS 2D or 3D transforms • CSS sprite animations The user must be able to rotate the entire 3D scene to some degree around one or more axes (i.e. you can choose to constrain the rotation to a specific axis or angular range) – the rotation of the entire 3D scene does not count as an interactive animation. Google Chrome will be used for testing during marking of your assignment. Testing will be done in a maximised desktop browser window. The 3D diorama does not need to work on a mobile device. FIT2092 Interactive Media Studio 2 Monash University Information Technology Semester 2, 2018 3 Deliverables Your submission must include the following components: 1. The completed diorama • 1 website consisting of: o 1 HTML document o CSS, JavaScript, and media files o All files appropriately organised using sub-folders o Compatible with Google Chrome on desktop • All media content must be appropriately optimised o Any image content compressed in an appropriate format and resolution o Any audio/video content compressed using appropriate bitrates/resolutions 2. Pre-production and development documentation For this assignment, you must document your project, as well as the research and development process. • Clearly state the project’s target demographic and purpose • Provide instructions listing available the interactions and the expected results • Examples of different resources that you have used in your research and development • Records of the evolution of the project’s design and implementation, including: o Conceptual sketches o Prototyping of construction o Discussion of problem-solving • References for all non-original online assets used, including: media, code, and fonts o For edited media, show images of the asset before and after editing o For all downloaded media, indicate the type of copyright license o Provide the URL where the media was originally sourced from • References for any online tutorials used Marking Criteria (30 marks) • Originality of concept and visual design (4 marks) o Use of media assets and consistent presentation of visual aesthetic • 3D construction using HTML and CSS techniques (5 marks) o Composition of 3D scene, use of media and optimisation • Implementation of interactive functionality (4 marks) o Required rotation and user-triggered interaction • Appropriate application of animation (4 marks) o Quality of animation and method of implementation • Appropriate application of audio (3 marks) o Quality of audio and technical implementation of control • Supporting Documentation (10 marks) o Inclusion of required information, references and formatting Upload your final submission to Moodle as a single ZIP file. Maximum file size: 100MB Weighting: 30% Due: Friday Week 14 at 5:00pm
