Web Design / UI

We redesigned the “Paint from Import” page based on the programming features of the page. Since the paint from import process can be complicated to follow, the revamped web design includes pop-up graphics that explain each step or feature in relation to the interactions required.

Steps:

1. Download fence template.
2. Paint template in any creative application. OR Resize a photo of the fence to fit the template.
3. Import your completed file.

Site Functionality

Some things we are currently working on are:

• 3D environment with panorama background, using a 3D plane with the model to simulate the ground.
• App will most likely be hosted on Heroku, for anyone to view.
• Fixing lighting on the fence to make it appear as if it were outdoors in the daylight.

Web Design / UI

We are continuing to integrate the wireframes and graphic elements made in Adobe Illustrator to the functional site.

3D Model

We have been working to improve the uv mapping functionality based on a texture that the user imports. Some results can be seen below.

2 images above: uv mapping a model based on the one texture.

Site Functionality

We are nearing a fully working “paint from import” function. Below is a simple demo of what we have working so far.

Web Design / UI

In terms of functionalities, we are choosing to focus on the “paint from import” function, where the user can customize and import an image file of the fence and see that design translated onto the 3D model. For the past week, we have been focusing on designing this import page, since it will host the main application.

The interface allows the user to drag and drop a file or choose from computer. Once a file is uploaded, the user can click the next button and the page will autoscroll down to the grey area mapped to the 3D model generated from their image. The page also features a back to top button and a home button in the top right hand corner.

Site Functionality

So far, the upload feature is mostly working. The user can change the texture to the appearance of the uploaded one. They can then download the three files needed to view the modified model.

3D Model

We made some tweaks to the photogrammetry output by adjusting the mesh to create gaps between the upper and lower beams of the fence. The result can be seen below.

Web Design / UI

For the design of the website that would host the Paint the Fence application, we started by brainstorming some of the key features and how they would relate to one another. We mapped out the general layout and interface for the pages through sketching.

We then began to create mock-ups in Adobe Illustrator. We are in the process of experimenting with different backgrounds and aesthetics for the home page in order to apply them to the design of other pages.

Site Functionality

Below are some screenshots that demonstrate site and feature functionalities as a work-in-progress.

3D Model

Below are some screenshots that show our progress in developing a 3D model of the fence. In the fence capture process, we had to take more pictures around the two ends of the fence in order to get a complete model.

Below: An attempt to align pictures of two different fences.

Capture The Human: Exploration with various photogrammetry tools and methods to capture the geometry of live human subject using standard equipment.

Paint The Fence: A virtual model of the famous CMU Fence that users can paint with their own designs, and see other versions.

Place The Art: An exploration into virtual spaces to exhibit and experience artistic works through the design of an infinite gallery in virtual reality.

Check back regularly to follow along as the teams document their progress.