Googlyify

  • 81 Commits
  • 23 Pushes
  • 31 Deploys
Launch Site

Googlyify

By Googlyify

Screencast
Quick Intro

Googly eyes as a service. Put in a GIF, use the interactive googly eye editor, then save it as a new, more fanciful GIF. ***** BUG: I wish I could put a banner on the Editor page that says CLICK SAVE BEFORE RENDER.

Description

It all starts with a GIF, which is broken down into individual frames and put into an interactive editor. The editor allows you to place googly eyes over individual frames and animate using keyframes and tweens. On each keyframe, the eyes can be sized, positioned, and rotated in 3D space. Once you've reached googly perfection, the server renders a new GIF, roughly 1000x more awesome than the original, thanks to the use of a physics engine to position the googly pupils based on the eyes' movement from frame to frame.

Such examples:

wow

very 404

lol stupid cate

nice gif

much beare

many jump

Judging Instructions

Find a good GIF. I might suggest r/wheredidthesodago for inspiration. Feed it into Googlyify, follow the on-screen instructions to add a few keyframes and then animate between them with tweens. Then, render (IMPORTANT: click SAVE first! Stupid bug) your creation as one of the most awesome GIFs ever and become the envy of your friends. Wow, so awesome. Incredible.

What they Used

graphicsmagick, box2dweb, mongoose+mongodb, node-canvas+cairo, knox/s3, socketio (for the long loading/rendering screens), bootstrap/flat-ui, knockout data-binding for the interactive editor

Votes

Your Vote

Voting is now closed.

Other Votes

  • (13)
  • judge

    Cute app. Nice simple interface. Would be cool to have different eyeball options

  • judge

    Fun app, and surprisingly powerful editor. But it is quite a bit of work to get things right. Would be awesome if you could somehow use that physics engine in the browser to aid in positioning the pupils.

  • judge

    Just in case it's not clear, that 5 stars for utility. ;-)

    Such internet.

    So meme.

    Wow.

  • judge

    Groupon

    This is fun! However, it's a horrible design decision not to automatically save before rendering. I edited about 20 keyframes of a gif, hit render to see what it would look like and had all my work wiped out. I can't think of a time someone would want to discard changes and render without them.

  • judge

    Keychain Logistics

  • judge

    Google

    Terrific project. Very fun, loved the editor and great attention to the user-experience. I was particularly impressed with the use of the physics engine for pupil positioning.

    I could imagine the project expanding to offer a range of different types of Googly eyes but other than that, nice work!

  • judge

    This is definitely a novelty. :) Fun and impressive that it was built by one person. Great job!

  • contestant
  • Such animation. Much possibility. Wow. I made this one: http://googlyify.s3.amazonaws.com/Ad03wo6la/render.gif — Tumblr images worked great!

  • judge

    Wow--this was a very impressive app for a weekend's worth of work! The overall UI was very polished and well done, and it was super easy to create a googly eyed gif. The instructions made it clear what to do. My only two minor nits--I had a socket.io glitch at first that a refresh seemed to take care of, and the positioning controls were functional, but clunky. On the plus side, I really liked the continuous feedback about what was going on in the system--it was an impressive level of polish for the weekend.
    Well done!

  • contestant

    CARFAX

    Very cute!

  • judge

    nearForm

    Finally we have googly eyes as a service! I started googly-ing http://i.imgur.com/b48Ui.gif but I think I need some more coffee :) Interface works well but I'd love to be able to drag and drop to position each eye separately - I presume there are some technical constraints to that approach?

  • judge

    Microsoft

    This is an awesome and very fun idea. The design of the site is amazingly cute and ridiculous. Unfortunately, when I pasted the URL for an animated GIF into the text input and clicked "go!" the status page hung at "Connecting to server..."

    • dogejs
      contestant

      wow so sry

      if corrupt gif it should say error

      no idea why it hung

      maybe you segfaulted me?

  • judge

    fun :)

  • judge

    CratePlayer

  • contestant

    BandPage

    Totally agree! FINALLY- Googly eyes as a service.

  • judge

    CodePath

  • contestant

    kawaii

  • contestant

    Awesome stuff!

  • contestant

    It's so much fun. Nice work from a solo contestant.

  • contestant

    Foliotek

  • judge

    Pusher

    This made me laugh out loud! wow such googly very knockout

  • contestant

    Yup.

    • dogejs
      contestant
      • such rate

      • very thx

      • so star

      • wow

  • contestant
  • contestant

    Whoa cool!! Congratulations!

  • contestant

    YouMeb

    haha.... funny application:D I really love "big eye" dog.

  • contestant

    Nodefly

  • contestant

    Ravenwall

    such awesome wow! wishes doge could find eyes in gif automatically

    • dogejs
      contestant

      i wish! opencv works for some humans and some cats but editor works for anything

      maybe opencv in future version?

  • contestant

    Printly.pk

    cool!

  • contestant

    Ancestry.com

    Hilarious idea and works really well! Nice job with the keyframe editor.

  • contestant

    New Relic

    so eyes plz google wow

    • dogejs
      contestant

      not mad? used java scripts instead of dogescript# :(

  • contestant

    Cuttle

    Great job, my type of thing and I'm glad you liked my 'nice gif' /A0eoWVMSn ;-D

  • contestant

    All of the awesome.

  • contestant

    Foliotek

    Well done! Really enjoyed messing around with this. Here is my creation: http://googlyify.2013.nodeknockout.com/show/AcnpM-Tas

    so googly!

  • judge

    wow

    such googlies

    very impress

    much lack of saving

    so infuriating

    wow

    • dogejs
      contestant

      so sry very bug

      see demo vid

      also promoted "save before render" to top gif on home page

      btw fyi googly eyes very innovate

  • contestant

    iZotope

    Strangely well built for what it is :)

    That was fun, well done.

  • contestant

    wow such node

    very googl impress

    eyes wow so doge

  • judge

    DIY

    This is not only fun to play with, but very well executed! The googly eye physics are extremely well done, and it's a very easy experience. The design could be a little prettier, but it doesn't detract from anything. Here's my googly-ified GIF: http://googlyify.s3.amazonaws.com/Aankxygl4/render.gif Fantastic!

    • dogejs
      contestant

      "design could be a little prettier"

      ಠ_ಠ coming from creator of dogescript# jkjk

    • dogejs
      contestant

      (also at last minute I broke responsiveness boo looks bad at small sizes)

  • contestant

    Awesome hack! One of the few well designed and completely working ones I've seen!

    • dogejs
      contestant

      thx but some bugs very sad many incomplete gifs because render btn doesnt also save whoops

  • contestant

    such well idea very entertain wow doge

    • dogejs
      contestant

      much thx very challenge such excite to complete maybe would be better if I'd used dogescript#

IMPORTANT DATES

REGISTRATION
SEP 17
COMPETITION
NOV 9-11 UTC
JUDGING
NOV 11-17
WINNERS
NOV 18

Thank you to our Platinum Sponsors