Hero Within

A kid see themselves in their hero; now they can see their heroes within them!

Comment

Inspiration

Kids constantly dress up as their favorite super hero, but what if their favorite superheroes could be apart of them? We started with this idea and tried to figure out ways to take the comic book covers, stories, and more to an interactive level with children. One of our initial idea was to have the children be able to walk through the stories and events, provided by the api, through an interactive app. This would have the children experience first hand what their favorite superheroes went through. However, our team was drawn to the comic book covers and the hidden potential they have.

After a bit of brainstorming and really pushing the ideas out of box, we came across the idea to stitch comic book covers to create a new picture -- which eventually led to turning the covers into mosaics of an uploaded picture of child (or a fun adult!).

What it does

Hero Within is broken up into two parts for the purpose of this hackathon. The first part is the backend, the backend takes in a picture that a user wants to be made into a photo album and stitches together comic books gathered from the Marvel API to create a mosaic of the original photo. The second part is the front end (a high fidelity clickable prototype) that allows users to see what it would be like to use the app. While our team ran out of time to implement it the server, the reason for breaking up the application would be for the app to make a call to a server running the backend code, sending over the picture to be made into a mosaic. The server would then request comic book images from the Marvel API or pull them from a cache and put them to gather into a mosaic that it would return. This allows the server to do the heavy lifting of building a mosaic and requesting hundreds of comic book images while the app lets users select what photos and characters they want to use and share them with the universe! Now the user can have a keepsake of themselves made from their favorite superhero.

How we built it

Hero Within is broken up into two parts, the frontend and the backend. As the frontend is a rapid prototype, this section will mainly focus on the backend. The backend works by first taking in an input image and deciding how to divide it into comic book sized chunks. Once it has done so, it converts the palette to only use a select number of colors to simplify the process of finding the dominant color of each chunk.

The dominant color is found by posterizing that section of the image to quickly find a rough approximation of the dominant color. This approximation is used to save time instead of running a complex process that uses KMeans to find the dominant color. This approximation works well because the image is broken down into small bits that will not affect the overall image if they are slightly off from the dominant color.

Once the dominant color for each of the chunks has been found, the code then requests comic book covers from the Marvel API. Once these comic book covers are obtained, the code finds the dominant color of each picture. It does this by running the Machine Learning Clustering algorithm KMeans, although it actually uses Mini Batch KMeans in order to speed up the process of running the algorithm.

Once these dominant colors are obtained, the code loops through each of the chucks and finds the comic book cover that has the most similar dominant color to it. Finally, the code then combines all the comic book covers together into one large mosaic representing the original picture.

This specific process allowed us to preserve the relative size and aspect ratio of the comic book covers as well as their original colors where most other digital mosaics would adjust colors. This means that you would be able to recreate the mosaic with actual comic books.

The backend was written in python and designed to run on a server. We ran out of time for deploying the backend on a server to connect it to the front end. So that is a future goal.

The front end was made with inVision studio; animations and interactions were made to be representative of how a final prototype might work. Please see link below to interact with the clickable prototype.

Challenges we ran into

One team member was brand new to front end development. She has UX design background but was not very familiar with Xcode. Understandably, some of the challenges were from learning the basic structuring and logic of Xcode. Another challenge was trying to incorporate design in time and not leaving the screens as skeletons with functions.

Another challenge was getting the backend to run in a reasonable amount of time by tuning the algorithms that were used from KMeans to posterization. Another challenge was creating accurate images without altering the color or brightness of any of the comic books.

Accomplishments that we're proud of

Completing the challenging parts of the project were solid accomplishments as well as learning Xcode basics! Even if our team member isn't proficient by the end of this hackathon, she will be more comfortable with communicating with front end developers. However, we did quickly adapt to use inVision studio to make the designs more realistic. Quite proud that we managed to create the complete inVision experience in under 5 hours!

What we learned

Sometimes you have to go with what you are really good at/what you know really well in order to finish. Wished I had prepped and practiced more with front end development before participating.

What's next for _ Hero Within _

It would be amazing to work on a physical installation to pair with this application. Optimally this application would be available to a large number of users day-to-day, possibly located within a Disney Resort. Figuring out where to place the installations and gathering the research of necessary functions is thrilling enough to think about!

Built With

  • invision
  • invision-studio
  • marvel
  • marvel-api
  • marvelapi
  • python
  • xcode
Share this project:

Updates