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.
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?:
- 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.
- How about multi lines? Success.
- Let's measure and make the text actually fit. Success.
- Now for some real stuff. Let's grab an image and see what we can really do with imagecolorat. Success.
- 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.
- Do it on a white background and repeat text if necessary. It works but it's hard to see.
- Maybe the font size should be smaller or keep the original image faded out in the background. Better.
- 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.