Orville The Elephant Learns How to Fly


Orville the Elephant
Orville the Elephant finds himself lost in the clouds and needs to learn how to fly! In this browser game, children learn aerodynamic basics using an interactive virtual wind tunnel, and 2D flight simulator. The entire game is implemented using SVG, Canvas and Javascript

This game was the result of collaboration with my friend, Dev Gorur over a couple weekends. The lessons learned from this game were invaluable in our next collaboration: Operation Clean Marine.

Menu Screen
Our goal was to provide short, browser-based educational game which would introduce children to the effects of aerodynamic forces on a wing, and the source of these forces. The real-time flow solver method suggested by Jos Stam was used to create a virtual wind tunnel. Oliver's javascript implementation was a useful reference as well.

While still unfinished as a game, the current code is a good proof of concept for rich, interactive, educational games in the browser.


The real-time flow simulation. The player can drag the airfoil and see the effects on the flow.
The game begins with a menu allowing players to either start the story, or jump right into the flight simulator or flow visualizer. If the player chooses the story mode, the game begins by introducing Orville in his cutaway aircraft. Orville realizes he cannot reach the aircraft controls and the player is invited to help him land the aircraft.
Demonstration of various angle settings

The player must first understand where the lift force originates from, and how stalls can result in a loss of lift. The wing section on the cutaway aircraft zooms into the center of the screen, and the rest of the aircraft fades away. This is to reinforce the connection between a 2D airfoil, and an aircraft wing.

In the airfoil view, smoke-like flow begins streaming from the left of the screen. The player can grab and rotate the airfoil, and observe separation, and turbulence behind the airfoil. The game then guides the player into different angles-of-attack which show separation.

In the next mode, the flow disappears, and the airfoil is replaced with the cutaway view of the aircraft with Orville. The player now rotates the aircraft elevator using the arrow keys and can fly or stall the aircraft.

In the final mode, the user will help Orville land. The vertical velocity of the aircraft at touchdown will determine the success of the landing. At this time, this mode is unfinished.


The 2D flight simulation portion of the game
For rapid development, the 2D flight simulator and story animations were implemented using SVG with Raphael.js. A big issue with using this approach was the lack of rotational groups in SVG. This meant multiple rotations (Such as the elevator pitch and the angle of attack) were needlessly complicated.

The flow solving portion of the game introduced it's own challenges. The solver results were displayed on a small canvas element, expanded with CSS to fill the view. Each pixel of the canvas element was used as a cell in the solver. The fineness of the solver grid was then controlled by changing the size of the canvas element. An SVG airfoil was overlayed on top for angle control and appearance. Some time was spent finding a decent boundary condition for the airfoil surface. The goal was to show attachment and separation, despite to the limitations of the solver, and the very coarse mesh needed for decent results. The result tends to separate too quickly.

HTML5's WebWorker was used for computationally intense portion of the game. This allowed the interface to remain responsive and worked quite well on Chrome and Firefox.