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