INFO24857 Computational MediaFall 2018 / Bachelor of Interaction Design
project 2 / worth 30% of your course grade / due week commencing 5th November
By the end of this course students will have demonstrated the ability to write simple computer programs and modify complex source code in order to implement their interactive design concepts.
To achieve this, project 1 will contain short and simple exams to ensure you have the base knowledge to work from. The reason for not making this project based is because if you already know some code, you are likely to stick with what you know and being forced to learn some wider aspects will give you a better breadth and platform to work from in the future. Being able to recall this information will better your scope of projects.
A crib sheet will be allowed in the exam to help you answer the questions.
The Playful Experience
You are to identify a simple series of information and present it to the user in an animated/ interactive 3D format. It is suggested that you use information from 350.org. Information can be found here on the Climate Impact Fact Sheets:
Under point 4 you will find 5 categories:
1. Extreme Heat
2. Ocean Warming + Acidifcation
4. Sea Level Rise + Melting Ice
Choose one of these areas. Using information from these fact sheets you must present it to the user in an interesting and interactive way using WebGL in the browser. How can you make people care about this cause? Choose a target audience – how do you make it relevant?
– http://phoenix.sheridanc.on.ca/~ixd1953/w ebwork5/index.html
– http://phoenix.sheridanc.on.ca/~ixd2028/35 0_final/
Luca Scarce – http://phoenix.sheridanc.on.ca/~ixd2517/proj
Gianfranco MacCagnan –
Alexandra Thompson – http://phoenix.sheridanc.on.ca/~ixd2774/stor mbox_thompson/
JJ Bastida – http://phoenix.sheridanc.on.ca/~ixd2822/shor eline_mayhem/index.html
• Identify the theme of your project
Choose your climate change area and how that will work for the user, flowcharting the user flow of the experience from start to finish
• Graphic mock up
Graphically show the finished design of your project, including logo’s, buttons, 3D models/ illustrations, you will work from this to create your design in code
• Create a rough draft, working code prototype
Showing the basic functionality, this can be with placeholder cubes rather than finished models
Policy on Use of Sourced Materials
Use original images, icons, logos. Use text from 350.org. Code must NOT be taken from finished websites. You may however use code snippets, cite using comments in the code, HTML comments:
<!--Start of code from xxxx --!> <!--End of code from xxxx --!> In CSS + JS: /* Start of code from xxxx */ /* End of code from xxxx */
Delivery Format & InstructionsThe theme and userflow should be a single PDF file with a list of citations of any work that is not your own on the last page. PDF submitted to the Assignment Folder in Slate. PDF must be named:LastName_FirstName_IXD1_Project2.pdfThe HTML/CSS pages will be uploaded to your hosting on the Firebird Server with a link posted in the Assignment Folder in Slate. Zip files of code submitted to Slate will not be accepted.
week 8 commenicng October 29: Tween a texture on click Timing in JS – in class exercise
week 9 commenicng November 5: Hand project in at the beginning of class, Controlling a model from a slider, Clouds and Smoke
Project Learning Outcomes
Add the course learning outcomes that will be demonstrated through this project.
• Incorporate the basic terminology and methodologies of Object Oriented Programming in
• the creation of simple visual compositions.
• 2. Integrate knowledge of the application development environment into design solutions.
• 3. Write original computer scripts to create simple visual compositions.
• 4. Modify existing source code to create interactive design sketches and prototypes.
• 5. Assess the relevance of different computer languages as applied to interactive design problems.
• 6. Integrate knowledge of industry roles in programming and design processes.
• 7. Exhibit professional attitudes and behaviours
• Planning of appropriate information, 25% of project grade Demonstration of a logical user journey and/or presentation of information to the user, to achieve the optimal user experience. Think about the experience from the start screen through to what you present to the user as they finish the experience, as well as the stages along the way. You could demonstrate this through a storyboard or screen flow. (LO 1, 2, 5, 6)
• Graphical development, 25% of project grade
A realistic design based on what will be achievable through the code libraries you select, UI fully designed, graphics fully designed. This will be an image depicting the finished design approach (LO 2, 5, 6, 7)
• A working draft, 25% of project grade
Using code to demonstrate a very simple user journey through, perhaps with placeholder graphical primitives until final media is in place (LO 1, 2, 3, 4, 5, 6 & 7)
• Relationship between user journey and draft, 25% of project grade
Can a resemblance of the user journey be seen in the draft (LO 1, 2)