Interactive graphs
Cacatoo uses the dygraphs library to plot interactive graphs. Because these graphs are updated every time step, they need to be placed in the update loop (see for example the cheater.js example), where we use:plotPopsizes(property_to_count, values_to_count)
plotArray([group_labels], [group_values], [group_colours], plot_title, {dygraph_options})
plotXY([group_labels], [group_values], [group_colours], plot_title, {dygraph_options})
plotPoints(array_with_values, title, {dygraph_options})
To manipulate what the graph looks like, you pass an object with dygraphs options:
let graph_opts = { width: 1000, heigh:300, strokeWidth: 2, drawPoints: true, strokePattern: [1,2]}
Buttons and sliders:
addSlider(name_of_var)
addButton("button_text", function)
addCustomSlider(label,function, min = 0.0, max = 2.0, step = 0.01, default_value=0)
addPatternButton(model, property_to_set) // Note: needs a live server to be run for browser security reasons
Painting on the grid:
To add the ability to paint on the grid (which can be surprisingly useful for debugging), use the following functions:
addStatebrush(gridmodel, property_to_change, value_to_put, brushsize, [brushflow, canvas])
addObjectbrush(gridmodel, object_to_draw, brushsize, [brushflow, canvas])
The 'brushflow' and 'canvas' arguments are optional. Brushflow allows you to draw smoother lines when the framerate is limiting, with high numbers meaning more smooth drawing (at the cost of performance). By default, the first canvas of the gridmodel will be
used to draw on, but you can also pass the name of another canvas.
Use cases: for example in 01_beginner/spiral.html, 02_advanced/petridish_dot.html, and 04_even_more_examples/consumer_resource.html
Parse variable from URL
You can also use javascript to read variables from the address bar. This can be userful if you want to share your model with specific parameters.
var mixed = false
var url_query = {}
location.search.substr(1).split("&").forEach(function (item) { url_query[item.split("=")[0]] = item.split("=")[1] })
if (url_query.mixed) mixed=true
CustomHTML
Finally, you can add some custom HTML stuff to one of the Cacatoo divs ('form_holder', 'graph_holder', 'canvas_holder'):
addHTML("div_name", "html")
var url_query = {}
location.search.substr(1).split("&").forEach(function (item) { url_query[item.split("=")[0]] = item.split("=")[1] })
if (url_query.mixed) mixed=true