Cacatoo - Ant mills

by bramvandijk88

HTML

<!-- 
  ###########################################################################################
    This is a JSFiddle example of "Cacatoo". This HTML page does not contain the code itself,
    but determines where the grids, graphs, buttons, etc are placed. The real code is in the 
    Javascript Tab. I recommend enabling "Tabs (Columns)" under the settings in the top-right. 
  ###########################################################################################
-->

<html>
  <script src="https://bramvandijk88.github.io/cacatoo/scripts/cacatoo.js"></script>
  <script src="https://bramvandijk88.github.io/cacatoo/scripts/all.js"></script>
  <!-- Dependencies
    <link rel="stylesheet" href="style.css">        <!-- Set style sheet -->

  <head>
    <title>Cacatoo examples</title>
  </head>


  <script>
    /*-------------------------End user-defined code ---------------------*/

  </script>

  <body onload="cacatoo()">
    
    <div class="content" id="canvas_holder"> </div>
    <div class="content" id="form_holder"></div>
		

  </body>

</html>

CSS

body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-color: #FFFFFF;
  margin: 10px;
  font-size: 13px;
}

/* Style the header */
.header {
  background-color: rgb(111, 146, 170);
  display: block;
  border: 0px solid #FFFFFF;
  box-shadow: 3px 1px 0px #24242444;
  border-radius: 15px 15px 0px 0px;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
}


.logos {
  z-index: -1;
  vertical-align: middle;
  display: inline-block;
  padding-left: 10px;
  padding-top: 10px;
}

.example_card {
  width: 220px;
  height: 220px;
  background-color: rgb(151, 183, 204);
  box-shadow: rgba(100, 100, 111, 0.1) 20px 7px 29px 0px;
  /* font-weight: bold; */
  color: rgb(229, 239, 245);
  font-size: 12px;
  line-height: 25px;
  margin: 25px;
  padding: 20px;
  padding-bottom: 40px;
  padding-top: 10px;
  border-radius: 0px 0px 0px 0px;
  display: inline-block;
  transition: all 100ms ease-out 200ms;
  transition-delay: 0s;
}

.example_card_img {
  width: 100%;
  height: 100%;
  border-radius: 0px 0px 0px 0px;
  background-position: 45% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.example_card:hover {
  background-color: rgb(151, 183, 204);
  font-size: 12px;
  color: black;
  border-radius: 30px 0px 30px 0px;
  box-shadow: rgba(100, 100, 111, 0.3) 0px 0px 29px 0px;
}

.example_card:active {
  background-color: rgb(151, 183, 204);
  font-size: 12px;
  padding-top: 11px;
  height: 199px;
  color: black;
  box-shadow: rgba(100, 100, 111, 0.3) 0px 0px 29px 0px;
}


/* Content (grid, graphs, sliders) */
.content {
  text-align: center;
  box-shadow: 3px 1px 0px #24242444;
  /*border-bottom: 1px dashed #88888844;*/
  background-color: #e2e2e2;
  padding: 10px;
}

/* Output div */
.output {
  border-radius: 8px 8px 8px 8px;
  margin: 30px;
 ...

JavaScript

/*-----------------------Start user-defined code ---------------------*/

var sim;
let num_ants = 50
var showvector = true
var showpher = false
var max_foraging_time = 800
var depletable = true
var food_depletion_rate = 2
/**
 * function cacatoo() contains all the user-defined parts of a cacatoo-model. 
 	 Configuration, update rules, what is displayed or plotted, etc. It's all here.
 */
function cacatoo() {
  
  let simconfig = {
    title: "Foraging ants", // The name of your cacatoo-simulation
    description: "Including mosh pits", // And a description if you wish
    maxtime: 100000, // How many time steps the model continues to run
    // (note, the onscreen FPS may drop below 60 fps when using fast mode, although many more timesteps may be handled per second)
    ncol: 150, // Number of columns (width of your grid)
    nrow: 100, // Number of rows (height of your grid)
    scale: 3, // Scale of the grid (nxn pixels per grid point)
    sleep: 0,
    seed: 3,
		fpsmeter: false,
    wrap: [false  ,false],
    wrapreflect: 1.0,
    bgcolour:'#AAAAAA'
  }

  // FLOCKCONFIG EXAMPLE
  let flockconfig = {
    // Flock parameters
    num_boids: 0,        // Starting number of boids (flocking individuals)
    shape: 'ant',          // Shape of the boids drawn (options: bird, arrow, line, rect, dot, ant)
    click: 'pull',
    max_speed: 1,          // Maximum velocity of boids
    max_force: 1,       // Maximum steering force applied to boids (separation/cohesion/alignment rules)
    friction: 0.0, 
    // Mouse parameters
    mouse_radius: 30,                   // Radius of boids captured by the mouse overlay
    draw_mouse_radius: true,            // Show a circle where the mouse is
    size: 1,                            // Size of the boids (scales drawing and colision detection)
    //qt_capacity: 5,        // How many boids can be in one subspace of the quadtree before it is divided further
    //qt_colour:...