I Like Programming

Scrolling Puzzle Box

I was experimenting with how different browsers on different devices handle scrolling when I came up with this little experiment to stress-test them.

It plays best in Safari for mac, with iPad a close second. Firefox does a decent job, but you have to click every so often to get it to focus a different scrollable area. Chrome has some tearing graphical glitches when you scroll two divs at once. It’s totally unplayable on Chrome for Android, unfortunately, since that browser doesn’t support scrolling blocks. Internet Explorer 9 doesn’t even understand the css selectors.

Puppet Box: Now with Real Image Files!

Now that I know how to upload files in Node.js, I’ve ditched the data urls. Instead, we’re doing real live file uploads via XHR with a FormData attached. I’m so glad browsers can finally represent Form Data!

As an extra level of efficiency, the client hashes the file’s binary data and does a HEAD request to check if the server already has that file. It knows exactly where to look since the files are all named after their sha256 anyway.

Unfortunately, the hash I’m doing of the real file on the server side doesn’t agree with the hash of the binary string on the client side. To work around this, I’m just trusting the client for now. Please don’t be a meanie and exploit this.

Anyway, the whole thing should be a great deal more efficient now. Try it out! Now I just need some more features, like stacking and save states. Also it’s still on a janky test server and not guaranteed to be up. I’ll deploy it properly eventually.

Puppet Box Progress!

I now have a little puppet box playground up. It only works in Chrome, but that’s ok cuz it’s an experiment. Go ahead and open it in multiple browsers or pass the link to a friend to see how collaborative it is. You can drag the images around, and you can also paste in new images just by copying them off the web (use Copy Image) or out of image editing programs like photoshop. This should make it really easy to prototype board games, or run D&D simulations that require a map and character locations.

There are a lot of things I could do to make it more suited to these tasks though, like letting you stack, resize, substitute, and delete images. That stuff will happen eventually though.

Puppet Box

I started on something I’ve wanted to make for some time. A puppet box! It’s just a simple web app you can paste images into and drag them around collaboratively with your friends. I’ve got the pasting, dragging, and syncing done so far. Now all I need is multiple rooms, server-side persistence, and support for a few more interactions like deleting and you’ll be able to start making up ad-hoc games with your friends online!

I’ll post a demo as soon as it’s done enough to be usable by people other than me :P.

What I’ve been working on

I always have a million projects on my mind, but here are the top ones of late:

Angular + Organizer and Elemental Chess

To learn Angular.js I started porting my old organizer application to it. The new source code is on github now. The old app uses Google Gears for the client-side sqlite database with full-text search features, but unfortunately Gears is no longer supported by any browser and WebSQL is not going anywhere. Fortunately, Angular includes a handy full-text object search that works well enough for my needs, and porting was surprisingly simple. Unfortunately, I had to use a lot of ng:eval

I also hacked in a very simple method of synchronizing application state so multiple users can collaborate. All you have to do is wait for some things to change, serialize all the stateful information to JSON, run diff-match-patch to compare it to its previous state, send those patches over the wire via Socket.IO, and patch the state on the other end in the same way. I _.debounce’d this so it doesn’t happen too often. No idea how well this scales, but it’s ghetto fabulous so I like it. However, a much better solution would be to hook into angular’s scope.$eval for some hints on what actually changed. If anyone knows how to do this, please answer my StackOverflow question!

I also attempted to port my Elemental Chess game to Angular. I was unfortunately rather disappointed with the result. I used a lot of ng:eval and ng:class, and Angular ended up screwing these up and using old values far too often, so you’d move a game piece and it’d leave its colored background behind. I guess it’s not really meant for games. Either way, this did result in me porting the game engine to a DOM-free implementation, which made it easier to build a minimax AI player to play against. I’ll post this version when I finish tweaking the AI. It’s currently pretty slow, because I couldn’t find a better way to clone the game state for each iteration of minimax other than to selectively JSON serialize the whole thing and then re-build the board each time. Perhaps if I made a game event log and added a feature to undo your moves I could use that in my minimax algorithm instead of recreating the game state. I’m not sure how I want to do the graphics, but I’m leaning toward doing them more like the old way again only with support for dragging with touch screens so you can play on your phone.

Oh yeah, gotta love the name they put on this version of Angular: “Canine Psychokinesis”. It sure beats “Jiggling Armfat”.

Factor Blaster and Beat Ship

Two games I started on PixieEngine.com. Beat Ship was lost but I intend to resurrect it. For Factor Blaster I want to remove spacial navigation and make it more like Missile Command. Check my previous post for more details.

TopTools

Like I said before, using webfinger was probably a mistake, and I should really make this a general purpose tool instead instead of forcing a use case on it. I’d like to make this super easy to use without even creating accounts. Perhaps it would work if all votes were public and an election’s creator and moderators were allowed to police them for sock puppets. Also it needs to have a hot-seat mode where all the users can vote from one computer, so you can easily settle disputes like which board game to play next in real time with minimal hassle. And it needs to work on a phone browser!

Art and Animation!

Cartoon animation is a passion of mine. I practiced it in my spare time in high school and college. I do a lot of drawings for friends, and I even sell stuff at conventions. However, I haven’t really put together much of a portfolio online to show off my work. I need to do this.

Playing Game Dev Story has convinced me that career changes are good for developing your all-around skills and making more valuable people.

I’ve also been looking into traditional pencil and paper animation. I got myself a peg board, light board, and ordered some paper for it. We’ll see what I come up with =]

HTML5 Dev Conf

I signed up for this on a whim, and I’m glad I did. I learned about a lot of new fun things out there.

The biggest booth at the show was for SpacePort, which can extract vector art from flash files and render it in SVG and CSS or OpenGL ES. They’ve also ported the Flash AS3 API to JavaScript. This seems aimed at helping Flash developers port their apps to native mobile apps and flashless web browsers.

I attended a panel about Three.js which I’m pretty tempted to use now, despite having already used the lower level features of OpenGL and GLSL before.

I was looking forward to Max Goodman’s panel on procedural audio in JavaScript, but he called in sick. I was still able to get some advice on syncing the audio in Beat Ship, the browser-based rhythm game I started on at last year’s TigJAM. Unfortunately the source code for this was lost when PixieEngine.com was re-architected, but it shouldn’t be too hard to rewrite. This will be my next project.

Speaking of Pixie Engine, I ran into the creators and they insisted I make my experimental game Factor Blaster more like Missile Command. We both agreed that spacial navigation just distracts the player from the real fun of factoring. I think I’ll place the player at the bottom of the screen and have the numbers rain down from above. I’d love to add some more variation in the weapons too. I’d like 2 to be a machine gun, 3 to be a sweep laser, and 5 and 7 could be chain reaction bombs like in Missile Command.

I also ran into Ryan Jarvinen from Eventbrite and it seems we’re both big advocates of the alternative vote. Some time ago, I made a nice web interface for running Condorcet elections with OpenSTV called TopTools. Perhaps I could have it import EventBrite attendee information in case you wanted to run some elections at an event.

I realize that this would serve better as a general purpose election tool than it would for the niche I’d selected for it. Also it needs to be able to display ties, especially when there aren’t enough votes for a definitive winner to be selected. Also I’m a little worried about my choice of doing logins with WebFinger. It seemed like an awesomely simple idea at the time, but I’m sure it’s just gonna scare people away since there are so many issues with everyone’s implementations of it — even google.

4Fourths

What a beautiful game! I got to play with this at Gamma 4 as part of their One Button showcase. It’s a co-operative game where four players control two ships using one button each: players 1 and 3 can charge and shoot their lasers, while players 2 and 4 control the upward thrust of each ship.

4Fourths

Unlike a lot of co-operative games, this one does nothing to stop players from killing each other. In fact, it’s pretty fun to spar between challenges, and most players who pick the game up got right into shooting and dodging each other. Before long, the first enemy is lowered between the players like a giant wall, forcing them to break it up and learn how to work together without a word of dialog. But as the game goes on, bosses place less walls between the players until they must be very careful not to blow each other up.

Despite the fun of shooting each other, there are no competitive scoring elements. Also, it’s rather difficult to defeat a boss without both players’ combined firepower, and failing to do so in time means everyone loses. That makes this one of the most purely co-operative games I’ve played.

Also, I love the bright colors and boxy graphics. It’s so Nu-Lo-Fi. And it’s made in unity.

N-Key Rollover, or Why Modern Keyboards Suck

Have you ever tried to play a two-player game on one keyboard? Chances are it wasn’t a fun experience. You press down a few keys, and the rest don’t register at all! What gives?

What we want is called n-key rollover aka NKRO, a feature that older keyboards like the IBM Model M used to have. But these days, manufacturers have been cutting costs. According to this blog, keyboard manufacturers save seven cents per key by using matrix circuits. That’s $7.28 for 104 keys, which makes me wonder how vendors can justify charging over $50 for “gaming keyboards” that don’t have it.

It’s hard to find any keyboards these days with NKRO. Fortunately, the Filco keyboards on EliteKeyboards.com advertise the feature prominently. I’ll have to get one of these.

JavaScript Scoping Oddity

Guess the output.

var outer = "test1"

function test1(){
  var inner = outer
  return inner
}

function test2(){
  var inner = outer
  var outer = "test2"
  return inner
}

test1()
test2()

Shrinky-Fit TextArea

While working on my latest hobby project, I wanted the text entry boxes to always be just large enough for the text you’re typing into them, similar to the text boxes in desktop apps like OmniFocus.

The first solution I found, jquery.autogrow, was not satisfactory. It simply did not respond to input quick enough to avoid having text slip out of the top of my input for a moment if I hit enter too fast, and it assumed you’d leave some space to write and not truly shrink to fit.

Wishing to replace it, I chatted with a friend and we came up with a scheme quite similar to another solution by Peter Michaux which I didn’t discover until after I threw together mine.

The gists of all of them are similar: take the text of your current textarea, place it in a similarly-styled div, let the browser flow it the way you want it, then apply its height back to the textarea.

My solution made a few little changes. Here’s the gist of it. I attached this as a keydown handler on the affected textareas. Each keydown, it copies the text into a similarly styled div, then sets the height like usual. Also, I used a zero-millisecond setTimeout so it would fire just after the textarea’s text was changed. I suppose I could have used bubbling up events instead. Not to be wasteful, my version only uses one doppelganger div for each different style of textarea I needed. Both are positioned absolutely at left:-9999999px.