MILESTONE 1
I am going to be working with Phu Le on this project. Our goal is to create a visually compelling, abstract interactive web experience. Our current idea is that the main focus of the webpage will be an “orb”, or a large 3-D shaded shape that morphs based on interaction with the page. We want the interactions to be not immediately obvious, instead the user should explore the page to see what will change the art. The intended audience is anyone of any age who wants to relax.
Milestone 2
Our component hierarchy looks like this:
This model is outdated- we changed our state structures (data/props in Vue) - see below
Team members and responsibilities:
Sarah Manning- Vuejs director/creative lead : Composing the art and vue component hierarchy as well as adding UI that communicates with threejs canvas
Phu Le - Threejs Mastermind: Logistics behind threejs library, creating threejs interactive code and making sure it functions within the vue hierarchy
At some point after milestone 2, we realized our project structure was doing too much by using the Store, so we simplified our data flow to just use data and props between the momma component and visualizer canvas.
Once we had straightened out the structure, we started implementing the more creative aspects of the project. We tested the functionality of data movement between the canvas and momma with a duplication function, but that function didn't end up in our final product.
Instead, we decided to adapt some static Three.js examples into one interactive art site. Our main concept from our original idea still stood, which is an "orb" that can be manipulated in various ways by user input.
We added a sky (example here) and a button to toggle between day and night mode. The button to switch modes changes a boolean value that controls a function in the canvas to render the sky as day or night. Then, I added a changing image button for this functionality. Vue uses the v-if conditional rendering to switch the image of the button.
Day mode
Night mode
Day mode
Night mode
In the end, the features we included were:
1. Toggle day/night mode (sun/moon icon)
2. Add glass: click adds some color shaders in the center of the orb
3. Color: Sets the color of the wireframe shape to a new random color
4. Shape Slider: Increases the amount of detail lines on the wireframe shape
SOURCES
Visit our Github for source code and full list of references.
REFLECTION
Overall, I'm really happy with how this site went. In the future, I don't think I'd use Vue to control Three.js since three has its own GUI options, and it kind of just slowed the process down. I do think this project was still successful and a great way to learn Vue really well. I also picked up a good amount of Three.js.
Phu and I worked really well together, I think we both contributed an equal amount and created a great overall product. We mostly coded together over zoom which went well, and then sometimes worked individually between meetings. Working on one github made it doable.