Cacatoo - Population growth pattern

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>  

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


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

  </script>

  <body onload="cacatoo()">
    

		<div class="", id="all_holder">		
			<div class="content" id="canvas_holder"> </div>
			<div class="content" id="graph_holder"> </div>
		<div class="content" id="form_holder"></div>
		</div>



    
  </body>

</html>

CSS

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

/* Style the header */
.header {
  background-color: rgb(111, 146, 170);
  display: block;
  border: 0px solid #f0f0f0;
  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;
  /*border-bottom: 1px dashed #88888844;*/
  /*background-color: #000000;*/
  padding: 5px;
}

/* Output div */
.output {
  border-radius: 8px 8px 8px 8px;
  margin: 30px;
  height: 300px;
  overflow-y: scroll;
  font-size: 11px;
  text-align: left;
  /*background-color: #000000;*/
  color: #00FF00;
...

JavaScript

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

let sim;
var draw_cells = 1
var killing_range = 40
var birth_range = 6
var killing_rate = 0.002
var birth = 0.1
function cacatoo() {
  
  let simconfig = {
    title: "Population growth", // The name of your cacatoo-simulation
    description: "", // 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: 200, // Number of columns (width of your grid)
    nrow: 200, // Number of rows (height of your grid)
    scale: 2, // Scale of the grid (nxn pixels per grid point)
    sleep: 0,
    wrap: [false,false],
    fpsmeter: true
  }

  // FLOCKCONFIG EXAMPLE
  // This example sets up a boid simulation with specific values for the currently implemented parameters
  // Note however, all these parameters have defaults, so not all need to be set by the user. 
  let flockconfig = {
    // Flock parameters
    num_boids: 0,          // Starting number of boids (flocking individuals)
    shape: 'dot',          // Shape of the boids drawn (options: bird, arrow, line, rect, dot, ant)
    click: 'kill',         // Clicking the boids pushes them away from the mouse
    max_speed: 1,          // Maximum velocity of boids
    max_force: 0.1,        // Maximum steering force applied to boids (separation/cohesion/alignment rules)
    init_velocity:0,
    friction: 0.3,        // Them ants are darn slippery :)
    brownian: 2.2,
    // Mouse parameters
    mouse_radius: 40,                   // Radius of boids captured by the mouse overlay
    draw_mouse_radius: 'true',            // Show a circle where the mouse is
    draw_mouse_colour: 'white', 
    // Collision behaviour
    collision_force: 20,
    size: 3,                // Size of the boids (scales drawing and colision detection)

    // Optimalisation (speed) parameters
...