Have you noticed how, after the mid-forties, the occurrence of moustaches has sharply gone down? Do you miss seeing thick facial facial hair everywhere you turn on the internet superhighway?

You are not alone.

Driven partly by my own failure to grow any substantial facial hair, I made CanYouHandleMyBars for the best reason of all: because I can. I started this hackathon with a serious, prize-oriented idea in mind, but half-way through I realised my heart wasn't into it. I took a stroll around the Stanford campus and made a solemn decision: to make the stupidest, most hilariously uselss hack possible.

What it does

CanYouHandleMyBars is a Chrome extension that runs in the background of any and every webpage. It slaps a mighty handlebar on top of every human face (or not) it can get its greedy virtual hands on. The result is a hysterical web browsing experience, which is sure to liven up even the dullest of staff meetings.

How I built it

The images are scraped from the webpage using jQuery, which then passes each image's URL to the Google Vision API. This API detects the position and angle of any face present in the picture. The image of a moustache is then scaled, rotated and superimposed on the original image via the HTML5 Canvas API.

Challenges I ran into

I don't know if you've ever done DOM manipulation, but believe me when I tell you that it's hard. You never know when images are loaded, the JS api is constantly broken in some way, without taking into account the overall agreed upon notion that Javascript is an awful excuse for a programming language.

Accomplishments that I'm proud of

In a life full of schedules, assignment and deadlines, I'm proud of having made something just for the hell of it.
It was fun.

What I learned

Never, ever, ever trust what the DOM tells you. I'm telling you this for your own good.

What's next for CanYouHandleMyBars

I was thinking of introducing more facial hair, like beards, goatees and such. Or even hats, what the hell.
Anything your heart desires.

Share this project: