menu

Display and colours

Setting up colours maps:

In Cacatoo, the "state" of grid points (i.e. the properties of individuals) are linked to colours by setting up a colour map.

In this map, state-colour pairs are stored, where a state can be:
  • whole numbers (e.g. '0' or '1' for dead and living individuals),
  • real numbers (e.g. 5.0 for the 'uptake rate' of cells in a colony),
  • the names of species (e.g. 'predator' and 'prey')
A colour can be:
  • The name of one of the default colours in Cacatoo (see colour table),
  • An array of length 3 with RGB values (e.g. [255,0,0] for red),
  • A hexadecimal color code (e.g. #00FF00 for green),

Default colour map:

0: black
1: white
2: red
3: blue
4: green
5: darkgrey
6: lightgrey
7: violet
8: turquoise
9: orange
10: gold
11: grey
12: yellow
13: cyan
14: silver
15: darkgreen
16: olive
17: teal
18: navy

To avoid users having to define colours manually, a set of useful functions is provided to link states to either default colours (see colour table), random colours, or colour gradients. Firstly, one can assign colours directly in the configuration file by assigning a property 'default', 'random', 'inferno', or 'viridis'. For example, to generate 50 random colours:
    // generate 50 random colours
    let config = {
    title="MyModel",
    ncol:100,
    nrow:100,
    num_colours: 50,
    statecolours: { colour: 'random' }
    }
One can also each state-colour pair individually:
    let config = {
    title="MyModel",
    ncol:100,
    nrow:100,
    statecolours: { colour:
    1: 'red',
    2: '#EE00FF',
    3: [0,0,145], ...
    }
    }
Colour gradients can also be manually defined by using one of the following functions:
sim.model.colourGradient(statename, num_colours, array_1, array_2, ..., array_n)
sim.model.colourVidiris(statename, num_colours)

Which is for example done in the example "ode_lotka.html"
sim.lotka.colourGradient('numpred', 200, [0, 0, 0], [240, 200, 0])

Once the colour maps have been set up, it is time to set up the display.

Setting up a display for (simple) discrete states:

After having set up your colours for a certain property (e.g. 'alive' in Game of Life), a display can be added like this:
sim.createDisplay(name_of_gridmodel, property, title)

Which is for example done in the example "cheater.js"
sim.createDisplay("cheater", "species", "Mutualists and cheater")

Setting up a display for continuous variables:

Because setting up a display can sometimes have many more parameters, one can instead passes a configuration object (much like how the simulation is configured), as seen in the example "ode_turing.html":
sim.turing.colourViridis("activator",100)
sim.createDisplay_continuous({model:"turing", property:"activator", label:"Activator density", minval:0, maxval:100})

Or you can combine these two line by passing a "fill" to the last function:
sim.createDisplay_continuous({model:"turing", property:"activator", label:"Activator density", minval:0, maxval:100, num_colours: 100, fill:"viridis", na_colour: 'black'})

You can also draw dots, instead of pixels:
sim.createDisplay_continuous({model:"turing", property:"activator", label:"Activator density", minval:0, maxval:100, num_colours: 100, fill:"viridis", na_colour: 'black', drawdots:true, stroke:true, strokeStyle: 'yellow', strokeWidth: 2, radius:"internal_resources", min_radius: 1, max_radius:6, scale_radius: 5})

This way of setting up displays also works for discrete variables, like in Game of Life:
sim.createDisplay_discrete({model:"gol",property:"alive",label:"Game of life (white=alive)",drawdots:true,radius:5})

Setting up space-time plot:

A space-time plot allows you to track how your grid changes over time. A single column (y-axis) from the original grid is plotted for each time point (on the x-axis).
sim.spaceTimePlot(gridmodel, name_of_original_grid, name_of_spacetime_grid, which_column, width)

Which is for example done in the example "spirals.html"
sim.spaceTimePlot("spirals", "Colours represent different species", "Space-time plot", 100, sim.ncol*2)