Train Portfolio
Tools Used:
A Creative Coding project I worked on with a team of programmers. We wanted to see if we could display pieces of a portfolio on a train as images with expanded information when you interact with the train.
How and Why?
This work was undertaken by collaborators: Christopher Zhang, Ethan Wang, Joe Frumenti, Jonathan Lewis, and myself, Skyler Haataja. We were tasked to work together to build a project learning the skills the classroom had taught us. We mostly had learned p5.js and through doing so we were interested to see what other JavaScript libraries we could use for a project. We saw a lot of portfolios and games utilizing Three JS and decided to make a 3D interactive portfolio.
Through group ideation, we settled on the idea of a train that moved a person’s work watching progress as the train moves through a forest. This idea was fabricated in part due to our local climate at UCSC consisting of large redwood trees and there is also an old train that passes through the Santa Cruz mountains.
Our first struggles came with using Parcel Bundler to build our site and while it ended up being great, it was a pain to set up. Testing the website was one thing but getting it work with GitHub pages required some extra hours searching through forums and following documentation. We got to a point where my peer Jonty and I were 2 hours in and he was thinking of giving up on using parcel. Fortunately, me being motivated and set on fixing our issue decided to keep working and within another hour I got it all set up. There were a lot of instances throughout this project that had a similar pattern of me stepping in and solving an issue or at the minimum come in to find links and resources for my partners that were hitting roadblocks. This part of the project I love doing, overseeing my peers work and helping them when possible, if nothing else I like the socialization of it all and motivating a team is just a bonus.
Contibutions
My contributions to the team and the final result of the project are as follows:
- Ideation
- 3D Model Importer
- UV Unwrapping/Texturing
- Animating Wheels
- Main Programmer
- Tree randomizer
- Movement
- Implementing Models
- Implementing Animations
- Designer
- Consultant
The only thing I didn’t work on too much was getting the text on the train, class documentation, and the camera controls.
Conclusion
I think that our initial idea may have been a bit ambitious, however like our professor said when seeing our final project, we took this opportunity to learn a lot. We learned how to make 3D experiences on the web and I am excited to see how else I can use what I’ve learned in the future. I forked this project and may add more polish that we didn’t get to but for now the link I share is the one we finished together for our Creative Coding class.
More
Walkthrough Images
You start at a view of the train from a distance slowly panning around the train’s center. To zoom in to the train you have to press spacebar.
Once zoomed in you’d normally start at the head of the train, to move to the next train cart, press right arrow.
Now as you can see we’re at the next train cart, we’re now viewing an image of the train scene within the train scene, to uncover more text, you must left click.
Now the text is displayed and the thumbnail is gone. From here you’d have 4 options: click again to show the thumbnail again, right arrow to move to the next cart, left arrow to move to the previous cart