Cacatoo - Co-evolution of phages and hosts

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="header" id="header">
      <h2>Cacatoo (example project)</h2>
    </div>

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


    <div class="footer" id="footer"></div>
    <div class="output" id="output"></div>
  </body>

</html>

CSS

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

/* Style the header */
.header {
  background-color: rgb(108, 62, 122);
  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: 170px;
  height: 170px;
  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: 10px;
  padding: 10px;
  padding-bottom: 25px;
  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:...

JavaScript

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

let sim
var draw_cells = 1

// Phage parameters
var mu_phage_bitstrings = 0.001
var diff_rate_phages = 0.5
var burst_size = 10 // number of particles created upon infection
var burst_size_cost = 0 // for every extra tail-fiber, reduce burst size with this much
var max_phage_decay = 0.02  // phage decay is maximal in the bottom of the grid
var min_phage_decay = 0.0001 // minimal decay
var phage_influx = 0.0 // influx chance per grid point
var mu_tailfibers = 0.001 // add or remove a tail fiber

// Host level parameters
var N = 1000
var mu_host = 0.001
var uptake = 0.5
var host_birthrate = 0.02
var deathrate = 0.005

// Lock-and-key parameters
var bitstring_length = 100
var lock_and_key_length = 8 // Note: make sure phage-generalism is capped to bitstring_length/lock_and_key_length!!
var max_infection_chance = 0.1

var max_food_influx = 0.01
var food_decay = 0.99

function cacatoo() {
  let simconfig = {
    title: "Phage-host coevolution with bitstrings", // The name of your cacatoo-simulation
    description: "Does resource abundance predict phage host-range? (project proposed by Bas Dutilh)", // And a description if you wish
    maxtime: 200000, // 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: 80, // Number of columns (width of your grid)
    nrow: 100, // Number of rows (height of your grid)
    scale: 4, // Scale of the grid (nxn pixels per grid point)
    sleep: 0,
    wrap: [false, false],
    graph_update: 50,
    graph_interval: 10,
    fpsmeter: false,
  }

  // 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...