I Like Programming

Scrolling Puzzle Box

Fri, 02 Dec 2011 15:24:06 -0500

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!

Fri, 07 Oct 2011 07:46:46 -0400

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!

Fri, 30 Sep 2011 00:42:16 -0400

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

Thu, 29 Sep 2011 07:26:00 -0400

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

Wed, 28 Sep 2011 04:43:12 -0400

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

Wed, 28 Sep 2011 04:42:41 -0400

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

Fri, 12 Mar 2010 05:37:11 -0500

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

Sat, 19 Sep 2009 23:16:00 -0400

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

Fri, 11 Sep 2009 04:07:00 -0400

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

Mon, 31 Aug 2009 02:46:46 -0400

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.

Who says Python doesn't have function static variables?

Tue, 02 Jun 2009 23:38:00 -0400

If you want to store internal state in a python function, most people would say you need to create a class and use class or instance attributes. Of course you don’t. Python 3 introduces “nonlocal” as a keyword for creating static variables, but you can already make them without this help.

In fact, you might even create them accidentally, due to this weird behavior with default arguments. Python only evaluates default arguments once, so if your default argument is mutable complex type, you have yourself some internal state.

>>> def counter(count=[0]):
...   count[0] += 1
...   return count[0]
... 
>>> counter()
1
>>> counter()
2
>>> counter()
3

Well, that’s kind of a hack. A better way to do this is to use function attributes. Yes, functions can have attributes, just like classes.

def counter():
  counter.count += 1
  return counter.count
counter.count = 0

Building a Good New User Experience for Elemental Chess

Mon, 01 Jun 2009 03:15:59 -0400

People don’t like to log in to things until they’re convinced it’s worth it. That’s a given. My first thought was to just make a sandbox mode for my game, where you can play it purely on the client side, with a friend or against the computer. If you wanted to play against other players online, you’d need to log in with an openid provider.

I showed off my new sandbox mode at Google IO. It didn’t have AI or checkmate detection yet, since I couldn’t decide whether to implement that on the client side or the server side. Google Web Toolkit seems like a nice solution for client/server code sharing that I will definitely pursue. But then I thought, I can solve this code sharing problem and provide a better user experience, if I get a little more ambitious with my user account handling. I’ll let users do anything they want except hang onto their history if they’re not logged in.

When a user hits the site without a user in their session cookie, I’ll create a brand new user for them with a randomized name (and plenty of invitation to change it). This is a full-featured user, with one caveat: it can expire, at about the time their cookie-based session should. To keep it from expiring, all the user has to do is associate it with an OpenID. This is exactly the same thing as logging in.

Okay, but what if a lazy user who already has a saved account comes along and plays a few games without logging in? Easy. When they eventually do log in, we can delete their temporary account and replace every instance of it with the real one! Talk about awesome.

Since I’m totally overloading my Login button to function as “Login”, “Register”, “Save”, and “Merge Accounts”, I think it’s appropriate to call it something else. “Recognize Me” sounds pretty good!

Rebuilding

Mon, 18 May 2009 07:15:11 -0400

I’ve lost tons of work in the past in almost every way imaginable, from melted or crushed hard disks to raid failures and unreliable hosts. I thought redundancy would save me, but these failures always seem to happen in pairs. I could fill a graveyard with all the work I’ve lost.

But I’m not gonig to let this get me down. I can still remember how I made most of those old things, and some of them were pretty good simple ideas, so it might be fun to re-make them better stronger faster than before!

In the future, I’ll use reliable backup sites like github, amazon s3, and I’ll look into Mozy. Their commercial is spot on, after all. Fortunately, not all of my data is gone. A good hunk of it survived on my 120GB WD Passport, which includes things as far back as 2005. I better back this up before I lose it!

Reduce by Any Other Name

Tue, 05 May 2009 19:51:00 -0400

One of my favorite functions is `reduce`. It’s the perfect way to represent anything like sum, product, factorial, reverse, that walks along a list accumulating the values it finds. Unfortunately, it’s hard to share my love of reduce when every language calls it something different. Observe:

# Python - reduce # reduce(function, iterable[, initializer]) def factorial(n): return reduce(lambda acc,x: acc*x, range(1,n), 1) # Ruby - inject # Enumerable#inject(init) {|result, item| ...} def factorial(n) (1..n).inject(1) {|acc,x| acc*x} end

-- Haskell - fold -- foldl :: (a -> b -> a) -> a -> [b] -> a factorial n = foldl (*) 1 [1..n]

// C# - Aggregate // Enumerable.Aggregate<(Of <(TSource, TAccumulate>)>) // Method (IEnumerable<(Of <(TSource>)>), // TAccumulate, Func<(Of <(TAccumulate, TSource, TAccumulate>)>)) // (This type signature is pretty ridiculous) int factorial(int n){ return Enumerable.Range(1, n).Aggegate(1, (acc,x) => acc*x); }

Board Game Abstraction

Mon, 04 May 2009 08:11:23 -0400

How would you model a board game in a sql database? I’ve been overthinking this. I’d probably have a Game model to keep track of whose turn it is, with a lot of Pieces associated with it. But that’s obvious.

To be totally generic, a Piece could consist of string:kind, string:space, and string:color. But what if you were playing a game like chess with a 2D board? You could name the space something like 2-2. What if the piece has meta information like rank and class? You could encode it in the kind, like fire-2. Why bother using data types other than string if you’re just going to fetch all pieces and assemble the board whenever you compute a move?

Or is there a reason to query on meta information and board positions? Would you optimize your game logic by not constructing the whole board each time? Should you create a new model for the kind of piece that exists in each game, like a monopoly piece which moves around the board linearly versus a checkers piece which traverses in two dimensions and can be kinged? Do you want many small tables or few large ones?

Ruby Doesn't Have Inner Functions

Fri, 16 Jan 2009 21:16:00 -0500

Ruby syntax allows you to write something that looks a lot like an inner function in other languages. However, it really isn’t. Lets explore this odd behavior.

class Foo
  def bar
    x = "scoped variable"
    def baz
      puts x
    end
  end
end

This looks like a pretty standard test of closures. One might expect the bar method to define a function baz with access to bar’s scope, namely the variable x. Lets see what really happens.

puts Foo.instance_methods.include?("bar") # true
puts Foo.instance_methods.include?("baz") # false

Still consistent with our expectations, we see we have created an instance method bar, but not baz. Lets test out bar on an instance.

instance = Foo.new
instance.bar
puts Foo.instance_methods.include?("baz") # true

Oho, where did this baz method come from that wasn’t there before? Running bar created it! In fact, calling `bar’ in our instance even changed the global class definition to include it! Lets try it out!

instance.baz # NameError: undefined local variable or method ‘x’ for #<Foo:0x1cee4>

So much for closures. It seems baz doesn’t have access to bar’s scope. It’s just a plain old instance method that we’ve defined.

Well, it doesn’t behave much like other languages, but this behavior could still be useful. You could use it to evaluate method definitions conditionally, or just wait and create some of your methods after others have run. It’s not all that useful, but it’s still good to know so you don’t accidentally use this syntax wrong.