Neven Mrgan’s Tumbl
Missing vowels since before it was cool.

(This post uses formatting and features not visible in the Tumblr Dashboard. If anything below doesn’t make sense or looks plain ugly, consider viewing the post on my website. I love the Dashboard, I hate the Dashboard.)

Did you know you can do 3D transformations on objects in Webkit-based browsers? What I mean is, you can take an IMG or a DIV or, well, anything, and translate, rotate, or scale it in 3D space, along three axes.

I intended to make a standalone iPhone game that would demo this but other things got in the way, so I’m sharing what I have in hope that you can learn a bit about next-generation CSS and Javascript. Hit http://mrgan.com/pandy on your iPhone to try it out, then hit the same on your computer to have at the source code.

A few notes:

• This will look fine on Safari on your desktop, but you can only interact with it on the iPhone, because I’m detecting touch events, not clicks.
• Move your finger around to rotate the cube. (Many thanks to Andy Matuschak for help with the arcball!)
• This whole thing was done quick and dirty, so don’t fault Webkit or the iPhone for bugs and performance; that’s all on me :)
• This is in no way based on the awesome-sounding WebGL technology, which aims to make 3D way more powerful on the web.
• Nothing to do with canvas either! Just some DIVs rotated in 3D space.

It was 2005, so the phone’s name was spelled in all capitals, it lacked a vowel, and ok it was a RAZR. I was barely using it - such as you could anyway - at my job, because the job was at a call center. In case you’ve never worked at a call center: hundreds of people rotated daily through fabric cubiclettes belonging to no one, smoke-beige phone handles connected to dead boxes connected to semi-legal dialer servers, miniature crystal-ball screens burned with green text, half-gallon containers of coffee from 7-Eleven, oily headsets shared between strangers, smell of hand sanitizer and Lean Cuisine, part-time employees either years in the same position or about to walk out the door.

I forgot my phone here one evening, rushing out the door to make it to a midnight screening of Rocky Horror (don’t ask) so I had to rush back about an hour later before they paused the server and unpaused the workers. It was left at the front desk - a miracle of man’s kindness to fellow man given that we’re talking about a place of business with an extremely forgiving hiring policy, where lunches left in the communal fridge are more likely than not to grow legs, and clouds of habitual pot fog the back parking lot.

I picked up the phone and headed out. Out of silly habit, I clicked through its menus - all twelve hundred or so - to make sure it was ok, and I ended my checkup by scrolling through the contacts. This was 2002 so I didn’t have that many numbers in my phone, making it easy to notice that I now had a new entry in my address book. Under M.

M for Muff Diver. The name was Muff Diver.

M. Diver had a local phone number, but sadly, no picture or other details. He hadn’t used my phone to make any calls - provided that it was indeed Mr. Diver (Mrs. Diver?) who had used it, and not, say, a friend of his or hers - and nothing else looked to be disturbed. Just a calling card, an introduction, a hey-give-me-a-ring.

Did he think - he, clearly he - that I was perhaps a sexy lady, and that one of those nights I would come home from my call-center job, legs asleep and butt sore, coffee heartburn and computer migraine, and I would lie on my red satin sheets in my lonely, lonely Florida house, and the A/C would be out for some reason and I’d perspire in the sexy way, and lying there with nothing better to do I would think to myself, you know, I could really use a good muff-diving right about now.

I didn’t call, partly because it could’ve all been a prank on me, and partly because it could’ve not been a prank. I worked at the call center for another year or so, and often I’d look around wondering: which one of you is it? Is it you, Cuban guy with amazing horsetail hair? The sulking high school kid who doesn’t engage in banter, relishing his angst eight unsocial hours a day? You, lady whose other job is phone sex - no, you’d be the last to be it. How about frighteningly obese Brooklyn accent over there? Are you still here, or have you left? Is it you, too polite and too sharply dressed man in his fifties? Or you, guy who reads Dostoevsky on his lunch break? Which one of you is Muff Diver?

dwineman:

If you use the Tumblr iPhone app to read your Dashboard, you’ve probably noticed that sometimes a post will appear to have its margins set too wide, so you can only see the left side of it. It happens when there’s a URL or other long block of non-whitespace characters, which screws up the text wrapping:

I don’t know if this is a new feature or it’s been there all along and I just noticed it, but here’s how you get to the rest of the text: Drag from right to left with two fingers. The offending post will scroll horizontally all by itself, leaving everything else where it is. If this works because Tumblr’s developers did some magic to enable it: thanks, guys. It’s always nice to see things improve.

I’ll clear this one up, not to belittle the work of Tumblr’s developers, but to give an iPhone tip to all:

Any time an element on a webpage viewed on the iPhone implements its own scrolling mechanism - and yes, the Tumblr Dashboard in their app is just that, a webpage - you scroll it using the two-finger gesture. This is because the single-finger scroll is reserved for Safari’s top dog, the viewport (I think that’s the level at which the scroll works; I may be wrong on the nomenclature. It may be the “window” or “the browser”.)

A vague and overgeneralized observation too long for Twitter:

19th century: other cultures are funny!

20th century: cultures’ understanding of other cultures is funny!

21st century: it being funny that cultures’ understanding of other cultures is funny is funny?

(Entirely needless or sorely needed explanation follows.)

As the world gets smaller and our personal circles get bigger - we eat French breakfast, read Japanese comics, listen to Kenyan pop - we crave new ways of finding humor in the strange. It’s less socially acceptable and increasingly more difficult to laugh directly at an entire culture. Step two is still in vogue (see Engrish and Hanzi Smatter) and I wonder when it, too, will become too crass - I mean, is it really that funny that non-English-speaking people don’t speak good English? So the next step in the meta chain may be laughing at those observations themselves.

(This post uses formatting and features not visible in the Tumblr Dashboard. If anything below doesn’t make sense or looks plain ugly, consider viewing the post on my website. I love the Dashboard, I hate the Dashboard.)

The Bits

There’s no better home for a fast-paced, goofy arcade game than your pocket. Remember the original joy of gaming - you know, before the distraction of drawn-out story lines, tutorials, endless dialog, and complicated rules? You want to just fire up a game and go, cucumber-cool 8-bit graphics blazing under your fingers. Swipe left, swipe right, eat all the berries, avoid the angry chefs chasing you around their pie kitchen. Then repeat at a higher speed.

The Sweet Solution

And there’s no easier way to get an app than by installing it right from its website - that’s right, easier than the App Store. One tap and you’re set. Because it’s a web app, see. Not one of those where you need to be online either - once you add Pie Guy to your home screen, it’ll run even when you’re not connected to the Internet. And of course, your game will be saved to a local database. Read on.


History

I made pie guy in a fit of WebKit excitement combined with App Store frustration. I wanted a Javascript game that didn’t feel… texty.

Needful Things

Pie Guy will run on iPhone 3GS with OS 3.0 or higher installed. Swipe anywhere on the screen (no need to point at Guy himself) and feel free to queue up your turns as in classic arcade games (meaning, once you swipe, Guy will turn that way next time this is possible.) With each level, the chefs get angrier. Godspeed.

Fringe Benefits

If you find Pie Guy a fun game to play, well that’s grand.

But, I hope Pie Guy will also be an opportunity for the code-savvy among you to learn a trick or two about making serious web apps for the iPhone. Just grab my source code and tweak it. I’m not talking about just a fancied-up webpage here; this is a fullscreen game, with fast gameplay and responsive touch controls. I can’t wait to see what a better programmer does with this stuff (it’s not hard to program better than me!)

Go go go

Pie Guy is available for totally free from http://mrgan.com/pieguy. Hit that on your iPhone, install once, and play forever. By the way, if there are updates to the game and you’re online when you launch it, the updates will be automatically installed. Web apps, dudes.

P.S. If you’d like to tip your developer, why not buy a shirt. Or, heck, buy anything else on my Amazon Store.