CSS 450: Final Project

Putting Everything Together in a Meaningful App


Due time: Please refer to our course web-site



As the last project of our learning, we will combine everything we have learned and build a (hopefully) useful application. Here are the requirements:


Final Project Technical Specifications:

Your application must include the following technical features:

1.      A purpose: you must be able to describe the purpose of your application in 5 sentences. Your description and the actual app you build should correspond.

a.      Friendly layout and UI


2.      Work with graphical objects:

a.      SceenNode hierarchy, of at least two generations

b.      At least three SceneNodes


3.      Ability to edit graphical objects: select and modify

a.      Selection: must be LMB clicking (E.g., area around the center of object is acceptable)

b.      Modify: can simply be removal, and/or changing of transform


4.      Two Different Views

a.      At least two viewports


5.      Direct manipulation in the world

a.      Support at least one form of direction manipulation of something in your world, e.g., direct manipulation of the WC Window would be acceptable

b.      Direction manipulation of the location of the viewport is not ok.

6.      Three person team:

a.      Textures and texture transformed

                                                  i.     At least one of the Renderables in the world must be textured mapped

                                                 ii.     The texture must be transformed (not the original image)






o   Start simple and iterate!

o   Refine + Abstract

o   Use MP5 as platform for working on this.


o   Copyright consideration (respect for intellectual property): do not use anything that is copyrighted (e.g., Bart Simpsonís images)


Process and Credit Distribution

Your final project development will have three distinct milestones:


Due Date

Evaluation Rubric

Credits (Peers/Kelvin)

1. App proposal/pitch
Pitch: 3-minute per team
Proposal: two pages (layout Sketch!)

2016/11/17 (Thursday)

Here are the details


2. Progress Demo

(5-min per team)

2016/11/29 (Tuesday)

Here are the details


3. Final Demo
(3-min per team)

2016/12/15 (Thursday)

Here are the details


WATCH OUT: During progress and final demo, the entire class (those with laptops) will test run your appís! Make sure you know how to host your apps from your UW-NetID Student account!!


The final 12% of your project will be evaluated accordingly:

1.      1.

An App with A Purpose:



Friendly GUI

Statements and App corresponds


2.      2.

Proper graphical object (similar to MP5 is ok)



At least two generations

At least three SceneNodes


3.      3.

Ability to edit:




LMB click selection

Edit: removal and/or changing of transform



Two Different Views



Meaningful reason for having different views


Direct Manipulation in the world




Meaningful direct manipulation



Submission (*):Watch out!




Source code and all assets

**: separate folder with TableEntry.html and all necessary files, where the TableEntry.html includes a table entry that includes information similar to this table, with links to and shows:

1. Short description of your application (the 5 sentences)
2. At least three screen shots from your app
3. Link to Proposal visual aid
3. Link to your app (index.html)

I want to display your in our course web-page.



Three person team: without meaningful texture maps and transformed textures will receive a 50% deduction.


The final project counts 20% towards your final grade for this class.


1.   Here is an example of what the final submission folder may look like:

a.      AppSrc: is the source code to your entire app

b.      screenshot: contains screen shots for your app.

2.   TableEntry.html: can look like (some referenced links are missing from the above folder structure), please do include all appropriate files in your final submission. 20% of your final grade depends on this!


<table border="1" >


<td align="center" style="text-align:left;">

<img border ="0" src="screenShot/logo.png" width="122px" /><br />


<b>Developers</b></br >

ABC<br />

ABC<br />



<p><b><u>App Name:</u></b></p>

†† <p>Short Description</p>

†† <p>

†† <a href="AppSrc/index">Click to play </a><br/>

†† <a href="Proposal.ppt">Project proposal</a><br />

†† <img border="0" src="screenshot/shot1.png" width="150px"/>

†† <img border="0" src="screenshot/shot2.png" width="150px"/>

†† <img border="0" src="screenshot/shot3.png" width="150px"/>