HTML5 Foosball

[link]

Rocket Launch

This weekend I launched a low-powered rocket at NASA Ames. The event was organized by the local rocketry club. My rocket was designed by my older brother. Here are some pictures:



NASA is definitely the coolest venue imaginable for launching rockets :). I am guessing there were 50-100 people at the event, with about one rocket launching every minute. One rocket actually fell on me while I was setting up my rocket. Its parachute didn't deploy due to a malfunction. Luckily its terminal velocity was not very fast, so it didn't hurt me. Here is a video of my first launch:

We determined that fire/ember from the engine traveled up the body of the rocket, burning the parachute and snapping the rubber cable which connects the two rocket segments. So the bottom rocket segment crashed without any parachute, causing the four fins to break off. After repairing the rocket with super glue we made a second launch attempt. The second launch was slightly better, but the parachute got tangled and did not fully deploy.

Blob Balance

I have created a simple game based on the blob demo I made yesterday: http://www.byronknoll.com/balance.html

The blob will become harder to control as your score increases (caused by changes to a "fluidity" parameter).

HTML5 Blob

Today I made a blob in HTML5 canvas: http://www.byronknoll.com/blob.html

You can interact with the demo by moving your cursor. This is the second time I have made a blob. My first blob was for a game I made called Time Stop. Since Box2D has a JavaScript port, I was planning to use Box2D for this project (here is a Box2D demo in HTML5 canvas).

However, I decided not to use Box2D when I stumbled across this amazing demo: http://www.ewjordan.com/processing/VolumeBlob/. ewjordan discovered a technique for simulating blob physics that is computationally efficient (much faster than Box2D), realistic, and extremely simple to implement. My demo is basically just a port of ewjordan's Processing code to JavaScript.

Smooth Voronoi Diagrams

The paper.js project has a cool demo with polygon smoothing on a Voronoi diagram. For fun I decided to implement my own version from scratch.

The first step was to implement a system for polygon smoothing using Bézier splines. Here is a demo of the technique (you can click/drag to interact with the demo). The blue points are the original polygon vertices. For the Bézier spline, the midpoints become the vertices and the original vertices become the control points (making this a quadratic Bézier spline).

To compute the Voronoi diagram polygons I used this excellent JavaScript library. Next, I computed polygon centroids using this formula. To create the gap between polygons I scaled the vertices towards each centroid. Here is the final demo: http://www.byronknoll.com/cells.html. The blue dots are the Voronoi seeds and the green dots are the polygon centroids. You can click to create new Voronoi seeds (or drag to move seeds).

I am not completely happy with the demo since there are some "jumps" in the animation when new vertices are added to a polygon. I tried several ideas to make the polygon smoothing more robust to adding vertices, but couldn't find anything I was happy with. Imagine adding a new polygon vertex exactly on top of an existing one. It doesn't change the shape of the original polygon, but it significantly changes the shape of the smoothed version using my algorithm. Intuitively it seems like something that would be easy to overcome, but I haven't been able to figure it out.