FITC Toronto 2013 - Women's Initiative Submission

FITC Toronto 2013 is encouraging woman to attend this year's conference by giving away 50 tickets. Although I usually get stuck on the 'creativity' part let's see if my technology side can make up for it.

The Fun Stuff

Each letter of a twitter search result (based on the phrase you enter below or defaulting to #FITC) will be coloured to match it's overlay position on the image you upload. The end result is your image recreated with tweets.

Twitter Search:
Image:
gif, jpg or png, max 1mb

The creative process:

  • Come up with an idea. This has always been the hard part. Maybe this is why I code instead of make business plans.
  • You know what FITC would probably like to see? Something involving social media. I've already got code to search twitter. What to do with it though?
  • Wow yea, Tim did that cool project with text over an image. I wonder if he'd let me ... "borrow" the code?
  • Boo, project was done in Ruby. I don't have the time or energy to make that work.
  • I'm sure php will do something similar. A little googling has uncovered php imagecolorat. So I get an image, I get some copy, I put the copy over the image and change the copy color based on the underlying image. Easy.
  • Crap, I've only got a week if I'm going to do this project.
  • Holy F! Tim was a FITC speaker?!? Glad I didn't recycle his project.
  • And... go!

Maybe this is why my creative projects never follow through. Good Lord I get off track.

The technical process AKA Can this really be done?:

  1. To make my life easier is there a font where all characters are the same width and height? Steps: make new php image resource, write text to the image using TrueType fonts.Success.
  2. How about multi lines? Success.
  3. Let's measure and make the text actually fit. Success.
  4. Now for some real stuff. Let's grab an image and see what we can really do with imagecolorat. Success.
  5. And put it all together. Success! This is when I get up and do the S-M-R-T dance and burn the GED while it's still hanging on the wall.
  6. Do it on a white background and repeat text if necessary. It works but it's hard to see.
  7. Maybe the font size should be smaller or keep the original image faded out in the background. Better.
  8. Finally, the stuff I already know how to do: use twitter search results as text, user uploads a image, jquery ajax submit and display result.

With more time so many cool things could happen!

  • Using php imagettfbbox to return x,y coords of a bounding box around text, fancy fonts could be used.
  • I've got a plugin somewhere to let the user take a picture with their webcam.

The conclusion: it doesn't have exactly the results I was hoping for but it's pretty cool. I'm happy. What do you think FITC? Can I go hang out with other lady (and guy) nerds?

And thank you to the plugins and ideas I used: Bootstrap for the responsive stuff, some guy who's name I can't find for the Ajax Image Upload without Refreshing Page using Jquery idea and Ryan Raerman's PHP Twitter Search API because I've completely run out of time.

-
Amanda Lutz
Web Developer
amanda.lutz@gmail.com