Coding: WebSocket Chat

I went ahead and spent some time this weekend messing around with WebSockets and decided to code up a simple chat room as a little educational exercise. The chat room is super simple, lacking many things you would hope to see in a real chat room, but it works as a basic demo for WebSockets. You can give it a try here:

Basic WebSocket Chat

I also took this as an opportunity to learn a little more about Ruby and went ahead and coded up the server part of this in it, using the eventmachine-websocket gem to get things running quickly and easily. The server is not anything too complicated, keeping track of active connections as well as the last 128 messages sent to the server. When a client connects the server sends the client all of the messages it has stored up and then adds the client to the list of clients to broadcast future messages to. The entire thing takes up less than 30 lines of code.

On the client side, the script simply asks for a username before connecting you to the server and registering some event handlers. When a new message is received it writes some html to the messages page element and then updates its scrollbar appropriately. Most everything else on the client side is just dressing to format things the way I want.

You can grab all of the files associated with this project here.

As I note on the chat page - I am putting this up and keeping the server running as a simple demo of WebSockets. Hopefully someone finds it interesting or useful. I am not interested in moderating this, so if you use it please play nice or I will just end up shutting it down. Regardless, I do plan to continue doing some work on this to make the chat a little more fully featured - adding support for chat moderation, text formatting options, pagination and whatever else pops in my head.

Coding: Pong - Canvas Style

I haven't updated this site in a while so I went ahead and hacked together a quick Javascript Pong game. You can play it here.

The controls are Q / A for the left paddle and Up / Down arrow keys for the right paddle. Every time the ball bounces off a paddle it will speed up a little and so will the movement of the paddle. The game will just loop over and over.


Following up on the previous post I am now putting the demo app up for download. It is slightly modified from what the screenshots show - it now only has three rotating cubes, each rendered using a different technique. From left to right they are using: a Normal Map, a Height Map, and a Gradient Map.

You can download the demo here. I make no guarantees that running this app won't turn your computer into a black hole, ruin your day, or any other bad thing you might think of. That said, I have only tested the demo on two computers so far and so would love for you to contact me if you encounter any problems. The demo requires DX10 but shouldn't be too performance intensive - I get around 600-700 fps on my laptop (equipped with a GeForce 9600M GS).

I spent a little bit of time reading this paper and thought I would share some preliminary results. As a brief summary, the author presents an approach to perturb the surface normal of a piece of geometry using a supplied heightmap and shows it to be equivalent to the standard approach. Practically speaking it produces results that are a little worse as it relies on the screen-space derivative functions (which are not implemented at full resolution on current hardware AFAIK). Now some images:

The image on the far right uses a method presented in the paper of using a gradient map computed from the heightfield. I don't think my implementation is quite correct for that yet... but it still produces pleasing results at a comparable speed to the normal mapping implementation pictured in the middle. The image on the left is the result of using the heightmap - the lower resolution of the screen-space derivative function should be apparent there.

Overall I am not entirely sure how useful it is, but it was a fun exercise. I'll try and add a few things to make my test app a little more user friendly and then post it up here for people to give a try.

After spending some time reading and experimenting I have gone ahead and coded up an old palette based fire effect in Javascript. For those not familiar, the idea is basically to seed the bottom of your image with blocks of "hot" pixels and then let this heat radiate upward. After seeding the image you move pixel by pixel through the image and determine the temperature of a pixel by the temperature of the pixels below it and applying some amount of decay. This essentially allows the heat to spread upwards, cooling off as it does so. Now that you have a temperature for each pixel in the image you simply assign a color for each discrete temperature.

The result is something like this:

Sorry, it appears your web browser does not properly support this page.
You might want to give Google Chrome a try.

Of course, if you don't have a browser that supports the canvas element then this little experiment won't work for you. Also of note - I tested this out in Safari on a PC and the performance was absolutely dreadful; Chrome and Firefox handled it much better. It seemed like in Safari it would accumulate several updates before actually displaying any changes in the canvas, so it may be that there is some other way for me to accomplish this that would work better in Safari.

A fun little experiment that certainly brought me back to my early days of coding. When I am a little less slammed with work I will probably throw together a couple more things like this before moving on to something a little more complicated - maybe a simple game?