Vibrant Returns from Hollywood (aka Andrew’s Basement)

Vibrant
6 min readFeb 26, 2018

--

Robert Quigley, the one voice of truth and reason, once said, “as journalists, let your voices ring throughout the world and shine light upon the unknown” and as a CS major who knows nothing about ethical writing, I made up that quote in order to justify sneaking on here, unbeknownst to our writing extraordinaire Connor Leech.

See, the goal here is to give you a more vibrant perception of what we’ve been up to (see what I did there?), a departure from our typical, boring host. Welcome to a new era (or at least until Connor finds out I’m on here). This will be an experience: One full of technical jargon that you can nod your head to all day long without understanding a word I’m saying. This is the era of a CS major writing a blog post.

Into the weeds we go

Our app is currently a shell of what we envision it to be, but even with that being said, a lot of work has gone into getting it up and running. We’ve been able to leverage Google’s Firebase platform to simplify the process of account authentication and account setup. Their API helped prevent us from reinventing the wheel (see what I did there, again?) and has allowed us to focus more time on the more creative aspects of our IOS application.

From Mockup to Functioning Prototype

The image on the left is a UI mockup that Andrew was able to put together using Sketch and the short gif on the right shows what we’ve been able to implement in code so far. To create this functional prototype we used Macaw, an open source vector graphics library written in swift. This allowed us to quickly create something that closely resembled our UI mockups. This process went a lot smoother than I personally thought it would, as Macaw reduced the amount of boilerplate code we would have had to write to create our custom UI. This in turn allowed us to be more creative and to focus more on the overall design. We’ve also setup our backend using another Firebase service called Cloud Firestore. This is Google’s next generation database service that is currently in beta. Cloud Firestore is supposed to be easier to use, more powerful, and more flexible than their current Realtime Database service. Although I would normally be hesitant about using a service in beta, I decided to give it a try and I’ve had no issues so far fetching or storing data while using it.

New era. New logo.

With a new era comes a new icon. Our UI specialist, Andrew Duna, has worked his magic once again and delivered a beautiful logo that is both simple and elegant. This logo draws heavy inspiration from the emotion selection UI that is currently in place in our app. It represents the continuum of emotions that we all experience. Is it perfect? Absolutely. Will it change in the future? Of course. But right now it’s a logo that represents where we see the app heading in the future. Have any feedback? Feel free to hop in the comments and let us know what’s up.

In professionals we trust

“You know nothing, Team Vibrant”

If you watch Game of Thrones, you probably are smirking right now. If not, do yourself a favor and go binge the show after reading this. Anyway, we embraced our ignorance surrounding the topic of mental health, and gratefully accepted help from experts who gave us feedback on our approach and intentions. The nature of this app is undoubtedly sensitive, and we wanted to do everything possible to ensure our app served our users positively with little risk of harm. This week, Dr. Joey Hannah, a staff psychologist at The University of Texas’ CMHC (Counseling and Mental Health Center), was kind enough to meet with us. He provided key insights in regards to what we were doing right, what we were doing wrong, and what direction we should take our app. We are excited to work with Dr. Hannah throughout the remainder of our development process, something he said he’d be willing to do.

Stop. Motion. Bliss.

As Connor teased in last week’s blog post, Team Vibrant has been hard at work creating a stop-motion teaser video for our app. The video we created, while not featuring the app itself, shows the idea that life or even just a day is cyclical in terms of how we feel, full of ups and downs consisting of a wide range of emotions. We’re trying to encapsulate the non-binary nature of life through color. Eventually, our goal is to help people to embrace themselves and the different emotions they feel throughout the day. We hope that the video below gives people a small taste of our larger vision.

Trust the process

The Process

You really thought it would be that easy? Patience young grasshopper, the video will be revealed soon enough. Haven’t you ever heard that the process is more important than than result? What you’re seeing in the picture above is stop-motion combined with post-production chroma-keying using a green screen. To do this, we turned Andrew’s basement into a cheap knockoff of a Hollywoord movie studio. This large indoor space allowed us to control the lighting and gave us plenty of props to tinker around with.

Green Screen Setup

When setting up the green screen, we had to ensure that there were little to no wrinkles in the green fabric as even slight shadows could make chroma-keying (swapping the green our for something else) difficult.

Filming

To create our stop-motion video, we captued 12 frames (or pictures) for every second of video footage. This allowed us to create the “stop-motion look” and cool effects like objects seemingly moving on their own. The process was basically, take a picture, yell at poor Andrew to move, but not too much, move objects in the scene, and then take another picture. This process was repeated over and over until we got the necessary shots needed for the video ad.

Post-Production

Finally, to create all of the movie magic we used Adobe Premiere to apply different colors to the background based on the current emotion that Andrew was displaying. Finding the right key setting proved difficult due to unavoidable slight folds in the green screen, but fortunately we were able to mask out these problematic areas. To make the video really pop, we added drop shadows to give depth to our video and to make the colored backdrop seem more realistic.

Show Time

It’s time for me to step out of the limelight and give the masses what they’ve been clamoring for. Although our time has been short lived, I hope there will be a longing in your heart next week for my eventual and long awaited return. Without further ado, I present to you…

Because life isn’t always black and white

Farewell.

-AG

--

--

Vibrant

We are a team of dreamers, of lovers, of explorers, and builders. We want to make our next thing your next thing.