Parallaxor

Parallaxor is an application that turns still images into motion format. A user can upload an image that has a clear foreground. The application will then use edge detection to slice the image, zooming in on one slice while zooming out on another to create a parallax effect. This application was developed by a team of 4 developers (2 front-end/back-end) and a data analyst in 5.5 hours during a hackathon winning best hack and most innovative. With this day hack, I was one of two front-end developers and created the overall design of the web application.

CompanyParallaxorRoleFront-End Developer & DesignerAwardBest Hack & Most InnovativeYear2017

Idea and Goal: Automate parallax detection and creation. Figure out how to automate a parallax effect by either detecting edges automatically or by allowing the user to draw an edge across the image.

Expectation: With this two day hackathon, we expected that we would not get very far due to our team knowing very little about the stack. With hackathon events and time spent in the office, we realized we had about 6 hours to spend actually building the feature. Our expectation was that we would hopefully be able to separate two parts of the image with no GUI.

Progression: Our development team consisted of 5 people (2 back-end developers, 2 front-end developers and a data analyst). We were able to split the image using interactive foreground extraction. With this, we quickly increased our scope to have a GUI and split our team into front-end and back-end. I created the interface and all graphics. We used AngularJS and bootstrap to create the parallaxor upload page and information page.

Results: We were able to wow the participants, audience and most importantly the judges — taking away best hack and most innovative in the hackathon. Jon Oringer, CEO of Shutterstock praised our app and we were able to keep it in mind for future roadmap goals.