Home

Basic Design

Simulations consist of input parameters, which are fed to a simulation function that then splits out an array of runs. Each run is one run of the simulation, and consists of one or more frames. Frames are the individually renderable frames that might plausibly be output in an animation.

A simulation has a few things it does:

• A generator function which takes the options object and produces a set of runs. Given the same inputs it should deterministically produce the same runs. One of the options is a seed for the random number generator. If the seed is undefined the harness will set it to a number derived from the current time.
• A renderer, which is provided a frame and renders it into the DOM
• A frame scorer, which given a frame returns the 'score' of that frame. The score is an array of numbers that should vary between 0 and 1.0 (the specific length is specific to the simulation). The score for the final frame is the score for the overall run.
• A success scorer, which takes a run score and decides if it should be considered success or not

The harness renders additional UI, for example controls to vary the inputs to the simulation. It also provides affordances to snapshot runs of the simulation into pngs and gifs, and renders each run in a summary pane with animation controls for it.

{
  "seed": "abc",
  "size": [350, 400],
  "numRuns": 10,
  "colors": {
    "primary": "#CCFF00",
    "secondary": "rgba(255,200,100,0.1)"
  },
  "sim": "schelling-org",
  "simOptions": {
    //Simulator specific options
  }
}

schelling-org

The first simulator type is schelling-org. It renders orange boxes for options, each with an error bar, and either a web of individuals, each of whom makes a choice, or a flat list of individuals with walls between. The individuals are rendered as emojis.

Renderers

The renderers should be factored nicely to make common things (like webs of individuals with some state) easy to render.

The harness also creates css-variables with certain colors, e.g. --primary-color and --secondary-color