Inspired by Quick Left’s Rube Goldberg Hackfest, I set out to build a fancy web application version of the board game “Mouse Trap”. This involved setting up a web server using Node.js and Express, hitting the server with a simple iOS app, polling said web server using client side JavaScript, cropping images with Gimp, and working with jQuery.

iOS source – Includes HTTP request and swipe gestures. Node.js w/ Express source – Processes requests and maintains state. HTML, CSS, JavaScript, jQuery source – Polling server and doing animation. Hosted here (fling the knife from the cutting board) and here (trapping the mouse). You can hit the server here to start the entire process. If something isn’t working, try resetting the state of the server here and refreshing both pages.

I have been working on my 13” MacBook and the site is not responsive, so you may need to adjust your browser windows accordingly. I can’t cover everything that I would like to here, so I will just touch on a couple of things that I learned along the way.

Polling the server

Express makes it very easy to build web applications with Node.js. I set up one endpoint for the iOS application to hit and another for the web applications to poll. Both are able to reference the same variable in order to maintain state. To communicate with cross-domain client-side JavaScript, I used the following command: 

app.enable("jsonp callback");

Responding with json is simple:

response.json({value:"zero"});

jQuery callbacks can be tricky and working around the same-origin policy can be too. To get around the same-origin policy using JSONP, I added this string to the end of the requested URL: “callback=?”. In the future, I would love to rebuild this app or something like it using WebSocket.

Animation challenges

Most of the animation for this project was extremely simple, but I did have a hard time getting the knife to spin or rotate. I found that the CSS3 @keyframes rule was the best method here: 

@-webkit-keyframes spinnerRotate {
  from {
    -webkit-transform:rotate(0deg);
  }
  to {
    -webkit-transform:rotate(-360deg);
  }
}

And obviously this can be implemented on demand using jQuery:

$("#knife").css({"webkit-animation-name": "spinnerRotate"});

Cropping for programmers

OK, great.. You made something spin. But what if you aren’t very good with Photoshop (like me) and you are better at lambda calculus than cropping images? I want to introduce you to the free selection tool.

I was using GIMP in this case, but I think the equivalent tool in Photoshop also has a lasso on the icon. Just add dots around the irregular shape that you want to crop, copy it, and paste it onto a transparent background. Don’t forget to modify the z-index if you want your newly cropped image to sit on top of another one in the background: 

z-index: 1;

That is it! Please let me know if I have butchered anything 😉