Do People Seek Information Like Animals Forage for Food? An Introduction to Information Foraging Theory

Much of my research at Oregon State University examines debugging using a lens called Information Foraging Theory. I’ve written a few posts on this topic but I haven’t really given a good overview of what Information Foraging Theory is and what it provides for software engineering.

The theory, in a nutshell, is a theory of human behaviour that describes how people forage for information. They are theorized to forage in a way to provide maximum benefit for minimum value and to make decisions based on input from the environment that affects this cost/benefit ratio. This theory is applicable to software engineering because software engineering is a very information-seeking intensive activity. People spend a lot of time looking for things—whether it’s “What does this variable do?” down to, “Where can I start investigating this problem?”

Another reason why this theory is valuable in software engineering is because software engineering research often is built on ideas but not necessarily on underlying theories. Information foraging theory provides a theoretical framework that can help consolidate previous results and provide not only an explanation for why previous tools and findings have worked in the past, but also can make predictions for how people may behave in the future.

Now that we have an idea of what it is and why it’s relevant to software engineering, let’s dive into what information foraging is. Much of this post is adapted from material that appears in An Information Foraging Theory Perspective on Tools for Debugging, Refactoring, and Reuse Tasks that appears in the ACM Transactions on Software Engineering and Methodology (TOSEM), 2013. In another post, we’ll talk about how it relates to software engineering research.

Information Foraging Theory: What it is

Information Foraging Theory was originally proposed by Peter Pirolli and Stuart Card at what was then Xerox PARC to explain how individuals search the web for information. The idea was inspired by ecology’s Optimal Foraging Theory which is the idea that foraging animals attempt to maximize their energy intake (by finding food) over the time required to find that food.

Constructs and Theory

In Information Foraging Theory, the human, called a predator, is looking for information in an environment, like the web. A predator can seek information from an information source, called an information patch, and a topology is made up of many patches. Many patches make up an information topology. Patches are connected to each other through links—each link requires a certain cost to go from one patch to another. Within each patch, there are information features. These features might be words or sentences on a screen, graphics and pictures, icons, even colours and shapes.

A rounded, shaded rectangle contains hexagons with numbers inside them. Some of these hexagons are associated with outgoing links to other shaded rectangles that each have their own hexagons with numbers in them. The links have a number on top of them representing the cost of traversing the link.

Information patches (shaded boxes) in an information topology. In each information patch, there are features (hexagons) with a numerical value. Some of these features are attached to links (dashed line). Each link navigates to a different patch and has a cost.

The predator has an information goal in mind and want to seek information that satisfies that goal. This predator forages through the information topology seeking prey, which are information features that are related to the predator’s goal.

The activity of getting at information has a cost (usually time) but consuming information from a source also has an associated value (how relevant or important the information is). After consuming some amount of information (which is called prey), the predator may decide that it’s no longer worth the predator’s time to continue processing that patch and the predator navigates away from the patch to a new one that is considered more valuable.

Some information features are connected to links. In web pages, links are usually located in particular places, are coloured differently, and are sometimes underlined when you mouse over them. These features are called cues. A predator can use these cues to try to predict the value of the information on the other side of a link.

Three-panel representation of a developer looking at a screen of information. In the first panel, the developer is staring at a panel at the top of the screen. In the second panel, the developer is choosing to move to a new part of the same screen. In the third panel, the developer has chosen an alternate route of changing the view to look at an entirely new screen.

A developer decides whether to continue foraging in the same screen of information, or whether to refresh a view (which has a cost) and getting new information.

So, a developer who is foraging for information has to make a decision whether to stay within the current patch and continue processing the information in it or to access a different patch and process information from there. To make the optimal decision, the developer wants highest value information for the lowest cost!

If we decide to use math to represent this relationship, it looks like this:

A mathematical formula: Predator's desired choice equals max(V over C).

The predator wants to maximize value V of processing information and minimize the cost C of travelling to find information.

This is pretty basic so far—everyone wants to maximize their value and get the lowest cost! What is really interesting about this theory is what people’s perceptions of high value and low cost are.

Perceptions and Scents

Even though a predator wants to maximize value and get low cost, one of the main issues is that predators don’t know everything. They only know what they can see currently. Thus, predators perceive an expected value and an expected cost whenever they are processing information features from a patch, including the cues that indicate if a patch is worth leaving.

Since most patches have multiple cues, this means that the predator has to make a number of estimations, based on the cue (and possibly other factors) about whether to leave the patch. This is called information scent. Scent is often represented in practice by measures of textual similarity. Scent is also influenced by the amount of attention—for example, how big the cue’s visual size is, or the position of the cue.

Summary of Information Foraging Theory Constructs

That’s a lot of constructs. Fortunately, Fleming et al. (in an article that I helped write) built a pretty handy table to remind everyone what all of these concepts are.

Construct Description
Topology Collection of information patches and links between those patches within a particular information environment
Information patch Region in the topology that contain information features
Links L Traversable arcs between patches
Information features Elements of the environment that the predator can process to gain knowledge
Cues Set of information features associated with a particular link
Predator Person in search of information
Information goal Set of information features that the predator wants to find
Prey An individual feature in the goal set
Information scent Given a link with an associated cue, the predator’s estimation of the probability that traversing the link will lead to prey
Attention Amount of attention that a predator pays to a particular cue
Information value V Benefit of processed information to the predator
Interaction cost C Value that the predator anticipates gaining through a particular course of action (e.g., following a particular link)
Expected value E(V) Value that the predator anticipates gaining through a particular course of action (e.g., following a particular link)
Expected cost E(C) Cost that the predator anticipates incurring in following of a particular course of action

IFT’s Key Constructs, adapted from Fleming et al. 2013, An Information Foraging Theory Perspective on Tools for Debugging, Refactoring, and Reuse Tasks, ACM Transactions on Software Engineering and Methodology.

Predictions and Validations

There’s a lot of scientific work that has designed mathematical models of information foraging theory in the web domain. Pirolli and Card, 1999 investigated models to predict how people surf the web; this work was further augmented by incorporationg scent Chi et al. 2000, Chi et al. 2001.

Information foraging theory has also since been used to investigate collaborative search on the web, as well as social media tagging.

Next time: Information Foraging Theory in Software Engineering

Now that we have an idea of what information foraging theory is, I will present an overview next time about how this theory’s been applied in software engineering. So far, information foraging theory has been applied primarily to debugging tasks. Margaret Burnett has been leading the charge in this direction, but the concept is beginning to take hold in other areas of software engineering. Nan Niu, for instance, recently published at ICSE a requirements engineering paper on traceability using constructs from information foraging theory.

Stay tuned for the next part in this series!

Programming in the console with GNU Screen and vim

When I program, I use a text editor. Now, even though I recently bought Sublime Text (and I’ll probably do a post on that later), I still use vi a lot – specifically, vim. I also occasionally used GNU screen (mostly for managing remote IRC sessions with the irssi client).

So why use the console to program? Well, the main reason is that typing in the keyboard and not using the mouse is faster if your keyboard skills are good. Given the quality of most laptop trackpads, getting away from the need to use the mouse is actually something of a relief sometimes. The second reason to be familiar with the console is if you’re logging in to a remote session, you often don’t have a mouse available to you at all.

The learning curve is quite steep for console applications, but once you get familiar with them you can get your editing tasks done very quickly because everything’s quite literally right at your fingertips.

Screen: Access Terminal Applications All The Time, Anywhere You Want

GNU Screen is a terminal emulator that’s available on most flavours of Unix-like operating systems, including Linux, BSD, and Mac OS X. Screen runs inside a shell. I think the “killer feature” of screen is the fact that screen is persistent, so you can essentially make your terminal applications run all the time, from anywhere you want.

A terminal window that has screen running inside it.

A typical screen session

What this means is that if you log into a remote machine, and use “screen”, you can start commands that you expect to run for a long time, close the SSH window, and then log back in and resume what you were doing. Everything will be chugging along just as you had it. It’s especially useful for applications that need to run in the background for a long time, like IRC windows or really, really long compilations or analysis.

Another feature of screen is the fact that it has “tabs”, or multiple windows within screen. You can then run multiple terminal programs in the same screen session, resuming them when you want.

A Basic Screen Workflow

To use screen, open a terminal window and then type screen. You will get a splash screen, but then you will be kicked out into what is essentially a shell. From here, you can basically do everything you normally would in a console.

Let’s say you want a new console to work in – a new “tab”, so to speak. In screen, press Control-a, let go of control, then c (c for create). This will create a new console for you to work in. You now have two consoles!

To switch between these consoles, use Control-a + n (n for next) and Control-a + p (p for previous). Try this now: Control-a c, Control-a n, Control-a p.

In screen, every command is preceded by a “Control-a”. It’s kind of the secret shortcut in the program, it’s often abbreviated, so Control-a and a (which means to go to the beginning of the current line) is often written as C-a a.

Let’s say you’re doing a lot of work in screen and now you need to log out, but you want to keep all of your work active. This is a “detach”. If you want to “detach” a screen and do other things in your original shell, you can do that with C-a d. If you’re working in a windowed environment, if you close the program that screen is running in, it’ll also detach for you.

Later that day, you want to log back in to the machine and resume your work. To “attach” a screen, type screen -R -D. That finds a screen for you, detaches it from other consoles if necessary, and resumes it.

The workflow for screen is pretty simple overall: you basically attach a screen when you start, then you create new windows, and detach when you’re done (or if you’re like me, you’ll just lock your computer and reattach it whenever you get around to it from whereever).

I find that using screen in conjunction with vi is extremely useful: you edit it one screen session, then compile/run/test in another.

For more information, take a look at this handy screen command reference.

Making Screen Look Pretty and Useful

You’ll notice that screen on the surface is pretty minimal. However, there are a lot of features built in that make it quite handy as a terminal emulator.

It’s possible to list the windows in your screen at the bottom of the terminal. You can see which one you’re currently working on. You can list the hostname, the current time, and so forth. With a little bit of work, you can make a very simple statusbar that will increase the usability of screen significantly.

To do this, first edit the .screenrc file in your home directory. Then, add the following lines:

hardstatus on
hardstatus alwayslastline
hardstatus string "%{.kw}%-w%{= kR}(%{r}%n %t%{-}%{= kR})%?%{= .kw}%+w%? %{.kw}%=%c %d/%m/%Y" #B&W & date&time

I won’t step through the syntax in its entirety (it’s very cryptic and confusing), but you’ll end up with a handy listing of the current screen windows in the session with the current one visible in red.

I followed the syntax on the GNU Screen manual to customize the string to my liking. %{.kw} colours the string with a black background and white text…. %-w lists all of the windows in screen up to, but not including your current session, %{= kR} makes the next section black and red, ( is a parentheses, %n is the number of the current window, and so forth. It takes a bit of starting at to understand, but it’s not too difficult to customize to your linking.

Vim: Navigate your Documents in an Instant

Vi is a text editor that originated in the mid 70s. One of the most popular modern incarnations is Vi Improved (vim). One of the most powerful features of Vim is the speed at which you can navigate through your documents. You can immediately jump to lines, delete a range of lines, move forward four spaces (or four words), search for words easily, and more, without your hands leaving the keyboard. I use it for much of my small-scale programming work even though I like my GUI-based text editors.

To launch it, open a text editor and type vi.

Configuring vim

I’m really not that much of a vim power user; my .vimrc file is really simple compared to some people who live in vim full-time. I like navigating code in vim and I use it for most of my console-based editing but if I am working on large, multi-project files I end up using a text editor like Sublime Text instead.

Regardless, it’s nice to have a decently usable set of vim defaults. Here’s mine:

syntax on
set number
set smartindent
set tabstop=4
set shiftwidth=4
set expandtab

In this setup, I turn on syntax highlighting, print numbers on the side (considering how dependent vim is on navigating by line numbers, this is essential), I turn on auto-indentation, set the tab size and indentation sizes to 4, and expand tabs to spaces.

A swift introduction to using vi

vim is pretty intimidating to use, because it uses multiple modes. The default mode is a “navigation” mode where you can move the cursor around, and then there’s a “line editor” mode where you actually modify the text on the screen. There’s also a “command” mode where you enter custom commands, too.

The most important command in vi

If you don’t know anything else about vi, learn this:

ESC :q!

Press the escape key, press colon, press q, then press !. This exits the program with no changes! If you have absolutely no idea how to do anything, you can at least get back out to the console.

Related but important as well:

ESC :wq

Press the escape key, press colon, press w, then press q.

This writes the current file, then quits the program. Basically, it’s a “save and quit”.

Navigating

When you start vim, you’re always in navigation mode. You can navigate using the h, j, k, and l keys. These correspond to left, down, up, and right respectively (this was so ingrained into me that I had to actually start vim to check the directions). One reason why this is great is because the controls are on the home row, so navigating in vi is pretty fast.

If you want to jump to a line, you enter the line number and press G. So going to the first line of a file is 1 G whereas going to line 23 is 23 G.

You can move multiple lines and characters up, left, down, and right as well. 3 h moves three characters left. 5 j moves five lines down.

Editing

i to enter “insert” mode. You can then type to enter characters at the current cursor position. You’ll see -- INSERT-- at the bottom of your screen. To stop editing, press Escape.

There are many variations of insert in vi to help people insert things really, really quickly. I (capital I, vi is case-sensitive) inserts at the beginning of the current line, A inserts at the end of the current line, o inserts a new line before the current line, O inserts a new line after the current line. You can even combine these with numbers and the directional hjkl keys to insert multiple lines. That’s probably too much information.

You can also delete quickly vi as well. x is the basic “delete one character”. dd deletes a line.

Finally, u undoes the last command, so if you find yourself deleting the wrong lines, hit u repeatedly.

Conclusion

I hope this serves as a brief introduction to vim and screen for most people. Anyone with a Unix-like computer and the need to write text or markup should consider looking into these kinds of programs because they increase the flexibility of what you can do.

Paper accepted to the International Computing Education Research Workshop

Our research paper was accepted to the International Computing Education Research Workshop (ICER)! ICER this year had a 33% acceptance rate. This is one of the works on Gidget and the first one about the “newer” version of Gidget I’ve been contributing to research-wise and implementation-wise.

In-Game Assessments Increase Novice Programmers’ Engagement and Learning Efficiency

M. Lee, A. Ko, and I. Kwan. In-Game Assessments Increase Novice Programmers’ Engagement and Learning Efficiency, The Ninth International Computing Education Research Workshop (ICER), San Diego, USA, 2013.

Abstract—Assessments have been shown to have positive effects on learning in compulsory educational settings. However, much less is known about their effects in discretionary learning settings, especially in computing education and educational games. We hypothesized that adding assessments to an educational computing game would provide extra opportunities for players to practice and correct misconceptions, thereby affecting their performance on subsequent levels and their motivation to continue playing. To test this, we designed a game called Gidget, in which players help a robot find and fix defects in programs that follow a mastery learning paradigm. Across two studies, we manipulated the inclusion of multiple choice and self-explanation assessment levels in the game, measuring their impact on engagement and learning efficiency. In our first study, we found that including assessments caused learners to voluntarily play longer and complete more levels, suggesting increased engagement; in our second study, we found that including assessments caused learners to complete levels faster, suggesting increased learning efficiency. These findings suggest that including assessments in a discretionary computing education game may be a key design strategy for improving informal learning of computing concepts.

Papers Accepted to IEEE Visual Languages/Human-Centric Computing (VL/HCC)

Good news! We received notification today about two papers accepted to VL/HCC later this year. Here are the paper titles and abstracts. When the camera-ready preprints are ready, I’ll be sure to post those as well.

Helping End Users Help Themselves with Idea Gardening

J. Cao, I. Kwan, F. Bahmani, M. Burnett, J. Jordahl, A. Horvath, S. Fleming and S. Yang. End-User Programmers in Trouble: Can the Idea Garden Help Them to Help Themselves? to appear in the IEEE Conference on Visual Languages and Human-Centric Computing (VL/HCC), San Jose, USA, 2013

Abstract—End user programmers often get stuck because they do not know how to overcome their barriers. We have previously presented an approach called the Idea Garden, which makes minimalist, on-demand problem-solving support available to end user programmers in trouble. Its goal is to encourage end users to help themselves learn how to overcome programming difficulties as they encounter them. In this paper, we investigate whether the Idea Garden approach helps end-user programmers problem-solve their programs on their own. We ran a statistical experiment with 123 end-user programmers. The experiment’s results showed that, even when the Idea Garden was no longer available, participants with little knowledge of programming who previously used the Idea Garden were able to produce higher-quality programs than those who had not used the Idea Garden.

Keywords—Idea Garden; end-user programming; problem solving; barriers; mashups; quantitative empirical evaluation

User Interface Explanations in Intelligent Agents

T. Kulesza, S. Stumpf, M. Burnett, S. Yang, I. Kwan and W.-K. Wong. Too Much, Too Little, or Just Right? Ways Explanations Impact End Users’ Mental Models, to appear in the IEEE Conference on Visual Languages and Human-Centric Computing (VL/HCC), San Jose, USA, 2013

Abstract—Research is emerging on how end users can correct mistakes their intelligent agents make, but before users can correctly “debug” an intelligent agent, they need some degree of understanding of how it works. In this paper we consider ways intelligent agents should explain themselves to end users, especially focusing on how the soundness and completeness of the explanations impacts the fidelity of end users’ mental models. Our findings suggest that completeness is more important than soundness: increasing completeness via certain information types helped participants’ mental models and, surprisingly, their perception of the cost/benefit tradeoff of attending to the explanations. We also found that oversimplification, as per many commercial agents, can be a problem: when soundness was very low, participants experienced more mental demand and lost trust in the explanations, thereby reducing the likelihood that users will pay attention to such explanations at all.

Keywords—mental models; explanations; end-user debugging; recommender systems; intelligent agents

A Brief Ludum Dare 26 Update: Results

The final results are in for Ludum Dare 26, a game competition in which participants have 48 hours to program a game from scratch. As I previously wrote, I participated in Ludum Dare for the first time last month and learned an immense amount in an extremely short amount of time. Here are the ratings I received for Painter’s Cat. The ratings were out of 5, and there were 1610 games submitted to the Compo category (which I participated in).

Ratings

Coolness 60%
#47 Audio 3.85
#176 Innovation 3.64
#187 Humor 2.96
#219 Mood 3.33
#265 Theme 3.87
#457 Overall 3.26
#569 Graphics 3.00
#700 Fun 2.82

(For those who are wondering, Coolness is a measure of how involved you are in the community, especially with playing, rating, and leaving comments on other people’s games. The more you play and comment and rate other games, the higher your coolness is).

First of all… I’m in the Top 100 for Audio at #47? Holy crap. That’s amazing. I’m pretty blown away by this – all of that time doing One Hour Compos has really paid off! I couldn’t find where my overall ranking was, but it looks like I managed to place in the top 40%, which isn’t bad for a first game.

Ludum Dare was an amazing positive experience for me overall. I’m pretty excited for next time. There’s still a lot for me to learn and this is one way to help me not only learn about software development and game development, but to also have fun doing it.

Our paper, “The Role of Domain Knowledge and Cross-Functional Communication in Socio-Technical Coordination”, to be presented this coming week at ICSE2013!

So, our paper at the International Conference on Software Engineering, titled The Role of Domain Knowledge and Cross-Functional Communication in Socio-Technical Coordination, will be presented this coming week in San Francisco. Daniela is going to be presenting this paper on Thursday, May 23 at 1:30 PM in Grand Ballroom B!

The preprint of this paper appears on my blog. The main story is that we examine how diverse roles in two teams in Brazil working on requirements and their related artifacts coordinated along task dependencies using a case study method, and report on how knowledge and work dependencies affect their work.

There are a number of other great papers that are appearing in the same session, including two co-authored by Prem Devanbu. It’s a good session to be at, in my opinion.

Hope to see you there!

TextMate and Running a Master File

Many people find my blog searching about how to make their multi-file LaTeX projects build in TextMate.

It’s worth nothing that the TM_MASTER_FILE works for almost any programming project, not just LaTeX. So, if you’re working on a Python or a Ruby project and have a main file that you want to run, set the TM_PROJECT_MASTER to point to that and save yourself some effort. Here’s a reminder on how to do that.

  1. Open your project file (or create one if you don’t have one).
  2. De-select any selected files in the TextMate drawer by clicking on empty space.
  3. Click on the “i” in the bottom-right corner of the drawer.
  4. Add a variable named TM_PROJECT_MASTER.
  5. Set the value to the name of your main file (in my Ludum Dare game, it was painterscat.py

Now your “run” ⌘r shortcut will always run your main file with minimal hassle!

Inheritance in Javascript: Getting it Done from a Newcomer’s Perspective

The Idea Garden is made up of a number of suggestions that each follow a certain structure. The person who wants to use the Idea Garden in a new environment has to write templates and a bit of boilerplate code. As part of the Idea Garden meets Gidget project, I’ve been doing some work porting the Idea Garden architecture from a Firefox plugin, CoScripter.

The purpose of this post is to discuss how I used a particular style of Javascript prototype inheritance that I discovered on Stack Overflow. In some respects, it’s trying to communicate to new developers from the perspective of a new Javascript developer and explain some gotchas on the way. This isn’t meant to be a really in-depth guide to Javascript prototypes or the Javascript object model – there’s some good reading on the Internet already that discusses the intricacies of the language.

The Prototype-based Programming Model

Javascript’s object-oriented model is prototype-based rather than class-based: what this means, practically, is that unlike most classical object-oriented languages (Java, Smalltalk, C++, Python, Ruby, etc.), there is no distinction between a class definition and an object. In other words, as soon as you “declare” a “class” in Javascript, it exists in the world immediately!

This has led to some oddities in Javascript, such as there being at least two ways to declare a new class, with each of these ways looking a little different from each other. In some respects, trying to think in terms of normal object-oriented programming in Javascript only gets you mired in some unnatural programming practices.

Because Javascript isn’t classicly object-oriented, trying to comprehend its inheritance model is a bit tricky. For this reason, along with reasons outlined in the Gang of Four book), and others, I’d actually recommend composition over inheritance.

But, in this particular case, I was asked to implement an architecture to use inheritance because we have a number of Idea Garden suggestions, and Idea Garden suggestions behave similarly and borrow a number of common functions, but might have some small specialized differences in their content.

Which Inheritance Style, Exactly?

There is no shortage of Javascript inheritance styles. Because there’s really no accepted “way” of doing it (or of NOT doing it), anyone who wants to do it has to really work at studying what they want, exactly.

In the end, I emulated a style following this Stack Overflow post by Sean McMillan because it (1) used the Javascript Module pattern, which was pervasive throughout this code and (2) used Object.create, which basically does the inheritance for me (Object.create is ECMAScript 5 and from what I understand, basically replaces new). However, the answer, while providing a pretty good code example, didn’t explain all of the concepts behind it that I needed to know.

The Return of the Prototype

As I mentioned above, Javascript is a protoype-based language, and as such doesn’t have class definitions. The module pattern probably comes the closest to emulating a “class definition”, but is still not exactly a class definition. If I create a module:

IdeaGarden = (function() {
	var exports = {},
		environmentName = "Gidget";

	exports.hostInfoToIdeagarden = function() {
		// Do stuff here
	};

	return exports;
}());

it exists as soon as the code runs, and I can modify the object’s state, use its functions, and so forth, without doing an Object.create or new call.

An important part of inheritance is to separate the definition from the instantiation. In general, you want to inherit from a certain state of class, rather than whatever you happened to have used and extended most recently.

To do this, we define a prototype in our module that we will inherit from when we do an Object.create.

Vehicle = {};

Vehicle.AbstractVehicle = (function() {
	var exports = {};
	exports.prototype = {};
	exports.prototype.init = function() {
		this.identifier = "Abstract";
		this.passengers = 0;
		this.speed = 0;
		this.running = false;
	};

	exports.prototype.getName = function() {
		return this.identifier;
	};

	exports.prototype.accelerate = function() {
		if (this.running) {
			this.speed = this.speed + 10 - this.passengers;
		}
	};

	exports.create = function(identifier) {
		var ret = Object.create(exports.prototype);
		ret.init();
		return ret;
	};

	return exports;

}());

This code, which pretty much conceptually matches to Sean’s code in his post, illustrates a few important points.

First, we have a callable “exports.create”, which creates a prototype of the base class, runs its “init” function, and returns the prototype for us to use. The fact that it returns a prototype is important! Unlike in the normal module pattern, where you would declare additional private members somewhere in the body of Vehicle, in the inherited class from the prototype, only members declared using this in the init function will be visible to instantiated classes and their descendants.

The difference between “what belongs to the module” and “what belongs to the new created class” isn’t exactly difficult, but it tripped me up as a beginner because of the close association between the module class having its own private members and the members appearing in the init function.

Because the create function returns a prototype, everything needs to exist in the scope of the prototype, rather than in the module!

The corrilary to this is that public members need to exist in the init function and that public methods need to be part of the prototype, rather than the module. Here’s an example method:

exports.prototype.accelerate = function() {
		if (this.running) {
			this.speed = this.speed + 10 - this.passengers;
		}
	};

Inheriting from the Base class

Once you realise the importance of returning the prototype, the rest of it pretty much falls into place. Since you’re using Object.create to create a new version of the prototype, you can create multiple versions of the base class and modify them freely without worrying about changing the definitions(that’s something that you would have to worry about otherwise). Here’s some code to inherit from the base class.

Vehicle.Car = (function() {
	var exports = {};
	exports.prototype = Object.create(Vehicle.AbstractVehicle.prototype);
	exports.prototype.init = function(identifier) {
		Vehicle.AbstractVehicle.prototype.init.apply(this, [identifier]);
		this.identifier = identifier;
		this.passengers = 4;
	};

	exports.prototype.cruiseControl = function(newSpeed) {
		while (this.speed < newSpeed) {
			this.speed += 1;
		}
	};

	exports.prototype.startVehicle = function() {
		console.log("Starting the I4");
		this.running = true;
	};

	exports.create = function(identifier) {
		var ret = Object.create(exports.prototype);
		ret.init(identifier);
		return ret;
	};

	return exports;
}());

Let’s go through some of this code as well.

First, you’ll notice that exports.prototype in this version does an Object.create(Vehicle.AbstractVehicle.prototype). This basically matches the prototype to the base class. In the exports.prototype.init function, we call the init from the base class as well – it’s essentially equivalent to our “super” call from other languages. Note that we pass in our arguments (identifier in this case) in an array – that’s just how apply works. Our variables from the base class will be initialized at that time, along with any additional variables we want here.

As mentioned above, because we return the prototype, every method that we want to extend the base class with needs to be preceeded with prototype. That’s why we have exports.prototype.cruiseControl and exports.prototype.startVehicle. Note that we can use any of the variables and methods we declared in the base class within these methods as long as we precede them with this.

Finally, we have our create function, which is NOT in the prototype space because we want to be able to call it from our code. This is pretty much boiler-plate code from the base class but we need it.

Now, we can use this just as we might expect (with a little help from JQuery assigning an identifier to outputDOM):

var workCar = Vehicle.Car.create("Work");
workCar.startVehicle(); // Outputs "Starting the I4 of Work" to the console.
outputDOM.append(workCar.getName() + ". Speed: " + workCar.speed + "
"); // Outputs "Work. Speed: 0". workCar.accelerate(); outputDOM.append(workCar.getName() + ". Speed: " + workCar.speed + "
"); // Outputs "Work. Speed: 6"

If we create another car using Vehicle.Car.create it’ll hold its own set of variables.

In Closing

I find Javascript is a little bit of an adventure because it’s a language that appears to have evolved to do things that no one envisioned it to do fifteen years ago. It used to be written directly in HTML as part of “onclick” attributes, and now it’s manipulating the DOM, applying CSS elements, and animating on-screen. Everything’s evolved heavily in the back-end as well. Douglas Crockford attempted to apply a classical inheritance model to Javascript but then gave up, eventually saying that “it was a mistake”. However, a lot of this information is still on the web, and it’s difficult to identify what the state-of-the-practice is for Javascript these days.

I do want to, however, keep up to date and be sure that if I’m writing Javascript now, it’ll be recognizable to people who are reading my code two, three, five, ten years from now. I like trying to keep code reasonably simple and clean – especially in a situation like the one I’m in where others are going to be working off of the code that I started.

If anyone notices that I’ve made a mistake in my understanding, or would like to recommend other ways to accomplish what I’ve outlined here, I’d be glad to hear about it and update this post accordingly – I’m not a Javascript expery by any means, but by writing and self-reflecting on what I’ve done, I would like to keep improving my skills and my understanding. So, if you have any suggestions or improvements please feel free to drop me a line or leave a comment.

The Challenges and Rewards of Non-Competitive “Compos”

As I mentioned in my previous posts, I participated in Ludum Dare, a game development “compo”, where you build a video game by yourself, from scratch, in 48 hours (a variation gives 72 hours and a team, but I did the 48-hour version).

A “compo” is a “composition competition”, but I’ve yet to participate in a compo where the competition aspect is what actually gets people energized. If anything, the compo is more community-oriented than it is competition-oriented. I participate weekly at ThaSauce.net One Hour Compo, which is a music compo in which you create a song from scratch in one hour. The competition aspect supposedly is because people vote on their favourites at the end, but in the end I don’t think the votes are what anyone’s really fighting for.

In any case, I feel that compo has probably been one of the top ways for me to improve my music making skills and that doing the Ludum Dare compo was an excellent way for me to simply program for the sheer joy of it.

But, I think one of the greatest benefits of doing these compos is simply being able to succeed, and to feel happy and proud doing it. It’s a real self-esteem booster and it also helps you beef up your skills and the ability for you to work under huge time pressure.

Below I’m going to present the post that I wrote for Ludum Dare 26. Most people there tend to write technical post-mortems, but I thought that the emotional barrier was actually a bigger barrier to cross than the technical ones!

An earlier version of this post below first appeared on my Ludum Dare 26 blog.

I think I’m over my Ludum Dare Adrenaline Rush now.

In my first initial post, I said that I was going to fake Ludum Dare. To my surprise, a few commenters actually wrote in and encouraged me to just enter anyway. I did. And I came out with a game that had some interesting ideas, along with a number of problems.

I’m actually happy I participated and would like to thank the handful of people who encouraged me (some strangers, some friends) to enter anyway. It was a great experience and I want to be around next time, if I have time for it.

But, what led me to go down a road of, “I don’t think I can do it?”

I’ve never designed a game before

Well, technically I did. In my first ever C programming class when I was 15, the final project was a video game. Mine compiled but didn’t work – we had Macs at school, and when I realised that my game wasn’t getting close to finished, I brought my game home, wrote almost all of my code on my PC, and hand-checked it to see if it would work, in theory, when I brought into school the next day.

With some work I made it compile, but it didn’t really work as I wanted it to.

In some respect though, it doesn’t take much to be a game. I’ve seen a lot of things that people recognize as games. Top-down shooters, side-scrollers, role-playing games, adventure games, text-based games, board games, and so forth. But I’ve also seen a lot of creative work as well. A game where the main idea was to walk in a city. A game where  you woke up, experienced a main character’s morning, and looked at all of the objects in his or her room. A game where you planted seeds in a garden and watched them grow. They’re barely games by the standard definition – but they are all welcome in Ludum Dare.

Even if you don’t have a strong idea of what you want to do, build a game archetype anyway and then see what comes out. In some respect, one of the thrills of doing a game in 48 hours is that the first few ideas you get, you have to stick with because there’s no time to really make it better. So you get all of these raw, unrefined concepts that are the pure essence of creativity. And it’s great to see so many of these concepts work.

My Programming Chops

I don’t program a lot. I have a computer science degree so I know how to program, but my work is primarily focused on research activities that don’t require any development. I find a lot of programming boring – especially mathematics riddles. “Compute the least-common denominator of two numbers?” Snooze. “Write an algorithm that will identify is a string is a palindrome?” Ugh.

But then I start building a game and suddenly, everything is fun, even when I groan at thinking about the geometry and trigonometry. It’s because those things suddenly aren’t just mathematics. They’re situated in my game as a core concept now. I don’t need to understand them for the sake of knowing them – I’m understanding them because I know that they’re useful to me, now.

I learned a lot on the fly, and suddenly I realized that programming isn’t just about what I know – but about how fast I can learn what I need to know. I didn’t know PyGame existed until the morning I decided to do Ludum Dare. I didn’t know how to blit a sprite to a screen before reading about it on my lunch break. I had never thought about sprite rectangles, mouse movements and controls, or drawing tiled backgrounds until the hour the competition started – so I learned those things with a lot of help from the Internet. I can’t say that I know all of those things well, even now… but I’ve done them before now and I can only improve from here.

So even if you’re not a hot-shot programmer, it’s not just about how well you program – it’s about how well you can get what you need done by learning what you need to learn.

Ludum Dare and self-esteem

I think a lot of people who post on this site have a lot of confidence – you have to to enter something that is billed (albiet weakly) as a competition. The games that get all of the press are the ones that have the shiniest graphics, the best lighting engines, the cutest artwork, the most thrilling sound. In the end, history remembers the winners, and all of the winners kind of blob up together into this gigantic “super-winner” amoeba where it feels like one guy participated in 30 Ludum Dares and came up with a hundred amazing games along with a procedural level generator and a memory-management allocation system in the span of a week. The secret though is that this mythical superhuman game programmer doesn’t exist. That programmer is really hundreds of individuals

I think one big lesson to learn from this is that very few of us are superhuman, and more importantly, the majority of people who participate in a Ludum Dare are normal people. They’re not all rock-star programmers, hotshot artists, or amazing musicians. They’re regular people and normal people. Just like you, just like me.

The second point to remember is that Ludum Dare isn’t really a competition. Sure, it’s about getting votes and comments and people get into the top list at the end, but in the end there’s no reward and there’s very few bragging rights. This really isn’t a competition.

I think a big outcome of these two points is that Ludum Dare is a showcase. It’s not just “how good your game is”. It’s the fact that you’ve managed to produce a game at all. No where else would I have been able to build almost any program in 48 hours and then, in the span of under a week (so far!) convince 50 people to play and download my game and leave constructive comments.

In that sense, everyone’s a winner. And even though I said above that almost everyone in Ludum Dare is a “normal person”, the fact that we’ve programmed something from absolutely nothing to a working, deliverable product in 48 hours (or in a team in 72 hours) makes every one of us extraordinary.

I hadn’t been as excited about something before as I had right after Ludum Dare – and I think that’s because that, as soon as I had finished, I realized that I had done something extraordinary. A few thousand of us, together, had each accomplished something to be proud of.

Using PyInstaller to make EXEs from Python scripts (and a 48-hour game design compo)

How to Create a Single Windows Executable from a Python and PyGame Project (Summary)

Here’s how you use PyInstaller and PyGame to create a single-file executable from a project that has a data directory that contains resources like images, fonts, and music.

  1. Get PyInstaller.
    • On Windows, you might also need pywin32 (and possibly MinGW if you don’t have Visual Studio).
    • On Mac OS X, you will need XCode’s command line tools. To install the Command Line tools, first install XCode from the App Store, then go to Preferences – Downloads and there is an option to download them there.
  2. Modify your code so that whenever you refer to your data directory, you wrap it using the following function:
    def resource_path(relative):
        if hasattr(sys, "_MEIPASS"):
            return os.path.join(sys._MEIPASS, relative)
        return os.path.join(relative)

    An example of usage would be

    filename = 'freesansbold.ttf'
    myfontfile = resource_path(os.path.join(data_dir, filename)

    This is mostly for convenience – it allows you to access your resources while developing, but then it’ll add the right prefix when it’s in the deployment environment.

  3. Specify exactly where your fonts are (and include them in the data directory). In other words, don’t use font = Font(None, 26). Instead, use something like font = Font(resource_path(os.path.join('data', 'freesansbold.ttf')), 14).
  4. Generate the .spec file.
    • Windows: (You want a single EXE file with your data in it, hence --onefile).
      python pyinstaller.py --onefile your_main_file.py
    • Mac OS X: (You want an App bundle with windowed output, hence --windowed).
      python pyinstaller.py --windowed your_main_file.py
  5. Modify the .spec file so that you add your data directory (note that these paths are relative paths to your main directory.
    • Windows: Modify the section where it says exe EXE = (pyz, and add on the next line:
      Tree('data', prefix='data'),
    • Mac OS X: Modify the section where it says app = BUNDLE(coll, and add on the next line:
      Tree('data', prefix='data'),
  6. Rebuild your package.
    python pyinstaller.py your_main_file.spec
  7. Look for your .exe or your .app bundle in the dist directory.

Phew! That took me a long time – the better part of a few hours to figure out. This post on the PyInstaller list really helped.

So why was I trying to package a Python executable file anyway? Read on…

Ludum Dare 26: 48-hour Game Design Compo

This weekend, I decided to participate in a 48-hour game design “competition”. Ludum Dare is a compo that asks you to create a video game from scratch in a 48-hour time period – you have to write your code and create all of your assets in that time period.

This means no reusing graphics, pictures, music, or sound from other projects, for example. You’re also not supposed to reuse code either. I decided to participate on the Thursday the day before. Most people use the previous weekend as a “warmup weekend” to test their tools, get some practice, and so forth. (My entry is located here, by the way).

I’ll do a more detailed compo writeup later, but I just want to concentrate on one thing that kept me up for hours after the competition: getting a Windows executable created from a Python project that uses PyGame and a data directory.

Python, Distribution, and You

I rather enjoy Python as a programming language. The syntax is reasonably concise, the language does a lot of things for you, and it’s well-laid out. There’s also a lot of good support in the form of third-party libraries. I’ve been using Python for various things for the past few years (usually small scripts for data extraction and analysis in research).

One thing I had never thought about before was distributing a Python project as an executable package, and while it was on my mind throughout the entire compo, I didn’t actually learn the process of creating the package until the last hour of the comp before submission. After you submit your primary platform, Ludum Dare allows you around 48 hours to compile for Windows, since the majority of reviewers use Windows.

The ideal submission is a single binary file (an .exe file for Windows) that doesn’t have to extract a lot of data, so that it’s easy for people to download and run your game.

PyInstaller vs. Py2exe vs. Py2app

I went on a wild goose chase trying to find out how to make a single executable file out of a Python project that would include all of my data assets. I first tried py2exe and py2app. py2app mostly worked all right, but py2exe was a pretty big mess.

The end story is that PyInstaller is newer and shinier than py2exe, and that you need to secret sauce code that someone out there on the Internet found before I did. PyInstaller basically runs EXE files by extracting the assets into a temporary data file that has a path _MEIPASS in it ((technical details here). Be sure that you check that every file is loaded in through that wrapper. The Tree() TOC syntax was also confusing, but basically, it’s the relative path of your data files and it will automatically load all of the files in that directory. Make sure it exists in the EXE portion (Windows) or the APP portion (Mac).

There’s a Make/Build cycle in PyInstaller to generate the spec file and build it in a single step as well – I find it easier to do that to generate the spec file and do an initial binary run, then to modify the spec and run PyInstaller again with the spec file as the argument. PyInstaller is pretty smart about rebuilding, and you save a lot of time.

I think in the long run, if you compare py2exe, py2app, and PyInstaller, PyInstaller is the program worth learning. It did have a pretty sharp curve for me – it didn’t help that I was trying to do this late at night after a challenging weekend!

If you do wish to use py2app to build your Mac OS X application bundle, then do keep in mind that you need to have a import pygame._view because of some kind of obscure issue.

Anyway, that’s all there is to this post for now.

Appendix

Here’s the setup.py I used for py2app.

from setuptools import setup

APP = ['painterscat.py']
DATA_FILES = ['data']

OPTIONS = {
    "argv_emulation": False,
    "compressed" : True,
    "optimize":2, 
    # "iconfile":'data/game.icns',        
}

setup(
    app=APP,
    data_files=DATA_FILES,
    options={'py2app': OPTIONS},
)