Fall 2016 CSS450: Computer Graphics Final Projects

These are the final applications we build in Fall Quarter 2016. All apps are built based on Javascript/WebGL. You can simply click on the Apps to try them out!

Alan Nguyen
Damian Banki

Stick Figure Animator:

This app lets you make stick figure animations. Set the orientation of the stick figure, then save the frames.
Then when you're done, you can play back the frames in chronological order in order to play an animation.

Drag the stick figure pivot points in order to move stick figure.
Arrow keys changes position of camera.
+ - changes zoom.

Click to play
Project proposal

Micheal Ritchie
Fuli Lan

Solar Orbiter

Solar orbiter allows the user to add and remove circle objects that automatically orbit their parent circle. The program always has one circle at the center, which is stationary. The user can change the speed, direction, size, starting position, and color of the circle objects. By exploring the relationships between speed and distances of the parent and child circles the user can create interesting patterns and cycles. The trail mode can also be used to create drawings based off the paths of the circles.

Click to play
Project proposal

Andrew Hoke
Michael Nissenson

App Name: Maze Builder

Build a maze that the captive wizard must escape! Compete against your friends for the fastest time through your maze.

Use a simple editor mode to draw out your maze for you and your friends to play through with your wizard character. When your devious masterpiece is finally complete, feel the adrenaline rush as you guide your wizard through the narrow confines. Watch the clock tick as you fumble your way through the magical maze that becomes more and more disorienting the deeper you go! Feeling stuck? Luckily, your wizard possesses a spell that will allow you to see the entire maze from a birds-eye view for a few seconds—but beware, for he is not the wizard he once was, and can only cast this spell three times before he becomes too weak to cast it again! Seek out the mystical green star, a portal to a realm of eternal riches, the very realm your wizard has been seeking all his life.

Are you ready to take on the challenge of the maze? Your journey awaits.

Click to play
Project proposal
John Fitzgerald
Griffin Howlett
Darren Kriner

App Name: Interior Organizer

Interior Organizer is a home decoration tool that allows you to virtually organize your room with furnishings. Use it to make sure that what you envision is stylistic and feasible before you even start moving things physically in your home. The App supports input of real world measurements so you can fine tune item sizes and positions to fit your real space. If you want to recreate an entire floor of your house, you can add and delete rooms and arrange them to your preference

Click to play
Project proposal
image1 image2 image3

Tyler Yamamoto
Sawyer Knoblich

Kaleidoscope Editor:

In Kaleidoscope Editor the user can manipulate a collection of SceneNodes and see the object flipped and
rotated to form a kaleidoscope image. The user can change the number of times their object is reflected
and animate a rotating version of their creation. Manipulation is made easy by having the ability to
switch the editor between large and small viewports. Saving an image of the user's creation is done with
push of a button. The Kaleidoscope Editor is an easy way to quickly create a visually appealing image.

Click to play
Project proposal

Armin Haghi
Kyle Burney

App Name: Solar System Simulator

2D representation and simulation of the solar system. In this application, WebGL and Angular JS are utilized to render and simulate the solar system.
Galaxy in the background, contains Sun, and all other 8 planets plus Pluto. User is able to zoom in and out using mouse scroll. User can put the focus of the seconday view port to their planet of choice, by selecting zoom for that planet in the menu bar. User is also able to change Sun's mass, therefor changing the distance of planets to Sun (overlapping is not controlled).
In addition, users can choose to hide any planet or its path. The app is optimized to work on any computer with Chrome browser in any zoom level. Both viewports respond properly to window resize as well.

Click to play

 Project proposal

Project proposal presentation

Progress demo presentation

Final demo presentation

X-Men Development Team
Jayse Farrell
Alex Mackinen
Stan Huber

Team Logo and X-Ray Icons Provided By:icons8.com/X-ray

X-Ray Machine

The X-Ray Machine offers a unique opportunity to explore the human body. The application is a powerful tool which allows you to learn how the human body is constructed. In X-Ray Mode you are provided with a view of bones, organs, and the vascular system of the body.

In X-Ray Mode you can move the X-Ray to view different areas of the body. The application also provides the ability to change the body's position to X-Ray the body in different positions. You can even zoom in to get a closer look at the body or it's construction.

Download Project Proposal

Click the Link To Use X-Ray Machine and Start Learning Now X-Ray Machine

Taran Christensen
Scott Ferguson
Tom Graham

Dynamic Sorting Visualizer

The Dynamic Sorting Visualizer is an educational app designed to illustrate sorting algorithms visually. The user can create multiple lists, and multiple copies of lists, which enables a user to view multiple sorting algorithms simultaneously.

Click to play
Project proposal

Pichsendarong Leng
Chris Knakal


The main goal of this project is to provide a simple tool for people to create quick, simple mockups of User Interfaces of their intended iOS applications. The application will provide canvas area where user can draw different shapes with different colors. In addition, users will also be able to create multiple iOS screens (aka. storyboards) which allow them to easily see how their customers can interact with their application. In terms of interaction, the application aims to provide direct-user-manipulation on the shapes and storyboards such as grouping, resizing, repositioning, and rotating.

Click to play
Project proposal

Johan Brusa
Tyler Hilde

Custom Paint:

Custom Paint is an application that allows a user to create and paint shapes onto a canvas. The user can either select and manipulate the transformations of shapes, or erase them using the eraser tool. Custom Paint also has support for canvas layers. The user can create, delete, duplicate, and rearrange layers into different orders as well as apply transformations to each canvas layer individually. Finally, the user can preview the canvas at different zooms and can also preview each layer by itself.

Click to try (local)
Click to try (server)
Project proposal (PPT)
Project proposal (Doc)

Tu Pham

Online Diagram

This application allows users to create simple diagrams and flowchart with a small library of default shapes. Each shape can connect with other shapes by arrows. Users can also add and modify text content in the diagram. This application also allows for manipulating of any object generated such as scaling, changing color, and deleting. It can be done via mouse click on the shape or via control panel on app UI.

Click to play

Jessica Oriondo
Kulsoom Mansoor

Do you want to build a snowman?

Users can build a snowman of their liking using shapes provided to them. The user can move, scale, rotate, change the color and delete any added shape. After they are done building their snowman, the user can play a simple game where they have to move their snowman (left or right) away from the falling icicles as long as they can. If the snowman gets hit by the icicle, the game will be over and the app will display how long the user survived. The purpose of the application is to let users create and customize their own snowman character and then allow them to play with their creation.

Click to play
Download project proposal

Nathan Harger
Kei Chibazakura

Kelvin Sung's Boogie Night

"Kelvin Sung's Boogie Night," demonstrates object hierarchy and animation using a texture-mapped image of our professor, Kelvin Sung. We extended on MP5 by allowing the attachment of additional objects onto existing SceneNodes (i.e., attaching body parts to other body parts). Each body part can be transformed by clicking on their centers which displays a manipulator similar to that of MP5. For animation, we implemented a couple of "dance moves" which are functions that mainly rotate various body parts over the timer handler. We also added an "X-Ray" view which projects a rectangular section of our professor onto a separate viewport which shows the underlying SquareRenderables that make up the hierarchy.

Click to play
Project proposal
Roman Krichilskiy
Joscelyn Kim
James Becker

Jello Simulator:

Jello Simulator is a basic physics simulator. The reason it is called Jello Simulator is because the blocks do not always stop moving and just jiggle. The initial scene has a scale object, a cannon object, and a cart object. The scale will tilt depending on which side of the scale has more shapes. The cannon object can launch shapes. The cart object moves left or right depending on if a shape has collided with either side of the cart. Users can toggle several things using the UI provided or the shortcuts that are listed here: Q for insert shape, W toggles physics, E toggles eraser for deleting shapes, and Spacebar fires the cannon.

Click to play
Project proposal

Joe Ma
Andrey Spencer

App Name: Try it before you buy it

Our app was created to let the user try on different glasses, hats, and hair to see what they would look like with them on. All they’d have to do is upload an image of their face and choose one of three body’s we provide, then choose the style of glasses, hats, or hair from our dropdown menu, and drag them onto their face. The user will be able to directly manipulate the transform of their face and body as well as any objects they add to the canvas, guaranteeing a perfect fit. An additional viewport is provided so the user can have a zoomed in view which they can manipulate directly.

Click to play
Project proposal