Simulations

At the moment, my preferred programming environment for writing simulations is JavaScript. That might sound like a recipe for pain, to some, but I find it to be surprisingly flexible and powerful. All the interface controls are written in HTML, the model itself is implemented in JavaScript (which is very fast due to just-in-time compilation), and the graphics can be displayed in the browser itself using either SVG or Canvas. This setup also basically forces you to adopt model-view-controller architecture.

As I work on my next book project, I will be creating a number of web components for the simulations involved. At the moment, I have two which are demonstrated below. (I'll move these to a separate page, eventually.)

JavaScript+HTML

The following simulations can all be run in a browser — and all of them work on iOS devices, too. Some of them might not run well on an iPhone, though, because there isn't enough screen space to display the control interface.

Schelling's segregation model

This is a minimal version of the famous Schelling segregation model. It shows how easy it is to use D3.js to generate animated SVG graphics (the agents slide into their new location each generation). If you scroll up / scroll down over the lattice, you can zoom in to get a closer look. Clicking on any agent forces them to move, regardless of whether or not they are happy. This simulation works great on a phone!

Muldoon et al. standing ovation model

This is a mostly complete version of the “standing ovation” model from the Muldoon et al. (2014) paper. There’s one part of their model which isn’t implemented because I wasn’t sure, given the description in the paper just how some of the details were meant to work.

One of the nice things this simulation illustrates is how easy it is to generate control interfaces using JavaScript+HTML. You’ll notice that some parts appear and disappear, depending on whether they are relevant. That's done by setting the display property with CSS.

Local interaction models of some evolutionary games

This is a pretty full-featured model that really leverages D3’s graphics ability. Small-world networks are laid out using force models, complete with animation. A lot of the parameters can be adjusted and the games include (i) the Centipede game, (ii) a pure coordination game, (iii) the Hi-Lo game, (iv) Divide-the-dollar, (v) two versions of the classic Prisoner’s dilemma, and (vi) rock-paper-scissors.

The graphics for the chapter on local interaction models for my book Evolutionary Game Theory were generated using this model! (If you show the JavaScript console using the developer tools in your browser, and then run the function saveSvg("filename.svg") you’ll download a copy of the current network display as a SVG file.)

Nozick’s inequality model

This is a simple proof-of-concept for some work I want to do down the road. It shows how inequality emerges naturally if people, beginning from a state of equality, trade randomly with each other without bias. The way it works is as follows: each person begins life with $100. Every iteration, each person is randomly paired with another person (excluding themselves) and hands them a dollar (e.g., to buy something they produced). Over time, a wealth gradient emerges.

Replicator dynamics

This is the three-strategy discrete replicator dynamics, as originally used by Brian Skyrms in his paper “Sex and Justice”. The code for this simulation was written in C and I adapted it to JavaScript. The interface is pretty straightforward, albeit minimalist. The reason for that is because the minimal nature lends itself well to being embedded in reveal.js presentations, like on this slide.

Tools

A beta-distribution selector

The beta distribution is a probability distribution defined over the closed interval \([0,1]\) using two parameters \(\alpha\) and \(\beta\), each of which are positive real numbers. When \(\alpha=\beta=1\), it is the uniform distribution over the unit interval. When \(\alpha=\beta=k\) for some \(k>1\), you get a bell-curved shape thing.

I wrote a web component which shows how the shape of the beta distribution changes as the values of \(\alpha\) and \(\beta\) vary. It is shown below.

How do you use it? Download the JavaScript code by clicking on the link to the left, and then include the following in a web page: 

<script src='./beta-distribution.min.js'></script>
<beta-distribution></beta-distribution>
That's it! The custom element has two properties, alpha and beta which can be inspected via JavaScript to see what the control is currently configured as. If you dynamically set those properties using JavaScript the control will adjust the display accordingly. The element will expand to fill the horizontal width of its parent container. There are a few tricks you can do with CSS that I won't document here — if you are interested, drop me an email and I'll explain.

CodeMirror text editors

Have you ever wanted to embed a code editor in a web page so that you can dynamically interact with the page in a way that's more convenient than simply using the JavaScript console in the browser? (Think of the playgrounds that CodePen make available.) The folks at CodeMirror have created a pretty awesome code editor which can be embedded in a web page, but they don't make available an out-of-the-box component you can use. So I put together a bundle that makes three types of editors easily embeddable. These are demonstrated below. These are actually useable, so you can type stuff in to try them out.

A JavaScript editor:

A HTML editor:

A CSS editor:

The editor supports all the themes listed at ThemeMirror, of which three are demonstrated above. The build of the editor I made supports autocompletion, syntax highlighting, and code folding (little widgets appear in the gutter whenever you have something that can be folded).

How do you use it? First you download the bundle by clicking on the link above and then you include something like the following code in your web page: 

<script src='./editorMaker.bundle.min.js'></script>
<div id='foo'></div>
<script>
	EditorMaker.createJSEditor("#foo");
</script>
That's it!

The EditorMaker class has three functions you can call:

  • createJSEditor(id, theme)
  • createHTMLEditor(id, theme)
  • createCSSEditor(id, theme)
The id is the unique id of the container element which will be replaced by the code editor: it is a mandatory argument. The theme is an optional argument which is the name of the ThemeMirror theme you want applied to the editor. You can get the names of the themes above.

What on earth would you use these for? Think about it: you can set things up so that you can type in the JavaScript editor and then (1) extract the contents of the editor as a string, and (2) pass that string to the eval() function in JavaScript. In other words, the editor can be turned into a programming interface for you web-based simulation! Or, if you use the HTML editor, you can extract the contents of the editor and pass it to jQuery for live injection into the web page. Very fun stuff!

NetLogo

Before I settled upon my current scheme, I wrote a number of simulations in NetLogo. I strongly recommend that people do not use NetLogo. While it’s a easy way to get started if you’re new to programming, the language is ugly and it’s a pain to do anything which doesn’t leverage the native commands.

Here are several simulations written in NetLogo. The code can be downloaded and run in the NetLogo app. Back when browsers supported applets, these could be run in the browser. That ended a while ago, so these pages no longer are able to do what they once did. However, you can grab the code and read the instructions.

squiggle