Stebbins

The Stebbins game

Known internally as steb, this plugin implements a game about natural selection through protective coloration. The human predators click on moving colored dots. When a dot is eaten, one of the remaining dots reproduces. As a consequence, easily-seen dots that contrast with their environment naturally get eaten more, and those that blend in get to reproduce and come to dominate the population. Although individual creatures do not change, the population does.

This is a graphics-intensive plugin that uses timers to do animation and Snap.svg to do the drawing. It's also responsive to selection from CODAP, and asks CODAP to respond to its selection (at least when the animation is paused).

At the apex of this game's fame, it led the user to help an automated predator, with various color-vision handicaps, to survive. That was amazingly cool and never survived.

The files

• steb.html: the html file. Includes paths to all the javascript.

• steb.css: Styling that html.

• steb.js: Many utility methods, especially to cope with color. Also contains steb.constants, which is where you will find the version number.

• steb.manager.js: The main controller. Lots of complexity here. Includes a lot of controller functionality and some really arcane code for saving that should probably be modernized. steb.ui.js: Handles strings, appearance, visibility, etc., as well as many functions that could sensibly go into a steb.userAction.js file — but this was written early. steb.color.js: many color utility methods and more. Things about predator vision which have no effect in ordinary use.

• steb.model.js: an elaborate file that maintains and updates all of the information (including position and velocity) about all of the stebbers and all of the crud. It even includes the code that governs how they run away from a meal event.

• steb.options.js: This controls the values of various options.

• steb.predator.js: If there ever is a predator, this singleton has its methods.

• steb.score.js: maintains and updates the crude scoring system

• steb.CODAPconnect.js: contains data context setup information as well as methods for adding new records.

• Stebber.js: A class Stebber, for the stebbers themselves.

• Crud: a class for the Crud, defined in CrudVuew.js

views

• StebberView.js: a view class for Stebbers.
• CrudView.js: a view class for Crud.
• steb.worldView.js: this view contains all of the stebber- and crud-views as they move around. It also is responsible for various bulk changes to views such as changes to all of the Crud colors, when that happens.
• steb.colorBoxView.js: This is for making a rectangle with a particular color that shows the background and a Stebber or Crud. This is for the options panel.