teamprojectspectra-blog

[teamprojectspectra-blog]

Video from Imagine, to give you a better feel of the experience :)

[teamprojectspectra-blog]

Imagine RIT!

Exhibition day finally came! Take a look at the photos below to see how it turned out - pretty neat, huh?

[teamprojectspectra-blog]

Final UI Designs

The finalized UI, created by Arietta, can be seen below!

[teamprojectspectra-blog]

User Flow

Nearing Imagine RIT, we finalized our user flow to best fit the needs of our exhibit and guests. 

Step 1:

Guests use a touch screen to customize and color in their character. Users sign their character’s name and continue to the next page. 

Step 2:

Guests move to the environment, a multitouch screen where many guests can interact with previously created characters. Each character will have a colorful trail in this environment, so by interacting with them, a collaborative art piece is created.

[teamprojectspectra-blog]

Lookit Our Logo

With a new name comes a new brand identity. Check out Wei-Wei’s logo design for Luma!

[teamprojectspectra-blog]

Style Change!

Because masking coloring to a moving character was proving to be a difficult task with all those arms, legs, ears, and more, the designers of the team looked into finding a new style, that would be easier for Paper.js to handle.

Luckily, Wei-Wei found the perfect one!

With this style came a new discussion for a name... This style was less detailed and intricate, but more simple and fun! We decided on Luma: it illustrated the quick, light-hearted and bright nature of our exhibit.

[teamprojectspectra-blog]

Update: More options and colors!

[teamprojectspectra-blog]

Tech Update: Coloring within the lines!

Using Paper.js, we successfully implemented the feature of coloring within the lines for each shape. Also we we created the initial color picker UI with the help of Paper.js’s powerful SVG support and event system.

The demo is online, check it out: https://spectra-beta.herokuapp.com/

[teamprojectspectra-blog]

Tech Demo #2! Watch as Cailin and Jasmin test coloring in characters on a large, exhibit-scale projector. 

[teamprojectspectra-blog]

With a user flow defined, we moved forward with visuals for UI elements. Arietta designed these two interfaces for the customization and color steps of our user, aren’t they nice?

[teamprojectspectra-blog]

Tech Update

New progress on coloring, now with figures, defined areas, and lovely colors!

There were many issues with tracking multiple points of light using a single webcam, so instead of using an infrared-light enabled “paintbrush”, we have decided to use a Wii Remote as the main controller. Of course, we do plan on taking apart the Wii Remote and transforming it into a “paintbrush”!

Using Touchmote, an open source Windows application that allows you to register Wii Remote input as touch input, we have successfully built a canvas-based web prototype for coloring with a Wii Remote. 

Next, we plan to integrate Paper.js, a JavaScript vector graphic framework, to help us implement the “coloring within the lines” feature, which would greatly improve and speed up the coloring UX!

[teamprojectspectra-blog]

Test customization drawer UI and animation!

[teamprojectspectra-blog]

Test animation for the preset character leaping onto the exhibit screen!

[teamprojectspectra-blog]

Here is our user flow which will walk you through how to create your character.

[teamprojectspectra-blog]

Test movement time! Wei-Wei animated out a brief walk cycle with a lot of character.

[teamprojectspectra-blog]

Visual Designs Continued

With the idea that we would be allowing our users to customize creatures, we decided to start with designing these characters. 

We wanted a variety of land, sea and sky creatures, with enough “grey area” for users to colors. Within each character, a variety of face, body, and head choices allow for even further personalization.

[teamprojectspectra-blog]

First Tech Demo! Jasmine tries out using a webcam to draw with an LED light, the beginnings to a digital paintbrush.