I was inspired by code golf sites where people try to write short snippets of code that draw cool graphics. To me, these sites are very cool, but they also seem to be hard to get into and appeal to a small niche of nerdy developers.

I thought one way to make this code-sharing-and-web-graphics thing would be to design a social network where the users create not only the photos, but also the filters, stickers, or any other possible graphical transformation (and easily, ideally). A site where you hack filters, or Filter Hacker.

While it's fun for anyone (in my opinion), I think it also brings a unique opportunity to the biggest consumers of photo-sharing apps: teenagers and young adults. Many of these people probably don't have an outlet to tinker with code and computers and likely never think too hard about the technology or math behind their filters on Snapchat or Instagram. Both of those networks are also reported to have many more women than men, but women are still largely underrepresented in tech. My platform has the potential to appeal to all of these people who may not be typically exposed to computer science in their daily social network activity. It could be accessible to anyone with an internet connection with no fees or hardware with expensive education prices. The concept of a photo filter fits right into people's existing knowledge with only a little extra programming know-how on top.

I created Filter Hacker to be a fun, artistic outlet in a digital medium first and foremost. But I also don't doubt that a more polished version of it could be a valuable education tool, giving young adults a peek behind the curtain and encouraging them to create something they can enjoy with their friends.

What it does

You upload a photo, and then write a short snippet of code that manipulates that photo in an HTML5 canvas.

Things I Would Like It To Do

  • Forking peoples snippets
  • Using someone's snippets on your own photo
  • Liking and commenting
  • A better coding environment

How I built it

Filter Hacker is made up of two golang servers that deliver responsive web pages. Two processes are necessary because the user written code is served within iframes on the main page. Without this, users would be able to abuse things like alert() or any other XSS/CSRF attack. Images and code are saved in a MongoDB instance.

The main draw of Filter Hacker is the HTML5 canvas hacking, which is admittedly obtuse. Filter Hacker makes some frequently used items available as single-letter variables (a holdover from code golfers).

Challenges I ran into

Writing a secure website is hard. Writing a secure website where the main draw is users writing their own code to be executed in others' browsers is nearly impossible. I spent a lot of time trying to get the basic nuts and bolts fitting together, which impeded the overall polish of Filter Hacker in the end.

Accomplishments that I'm proud of

The things I'm most proud of are actually some of the Filter Hacks I wrote while testing the program! Unfortunately I deleted most of them as the structure of the program changed. Being able to have fun using my own product was enough to satisfy me.

What I learned

  • Security is hard enough as it is
  • Managing photos can be tricky
  • How odd <canvas> is
  • More golang!

What's next for Filter Hacker

Hopefully in the coming weeks I'll be able to clean it up and run a production server for the public!

Built With

Share this project: