Cacatoo - Petridish

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="graph_holder"> </div>
    <div class="content" id="form_holder"></div>
    <div class="footer" id="footer"></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: 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:...

JavaScript

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

let sim;
var birth_rate = 0.85
var mutationrate = 0.0005;
var cell_diffusion = 0;
var death_rate_growing = 0.2;
var mutations_required = 2;

function cacatoo() {

  let config = {
    title: "Petridish with local growth",
    description: "(mutational rescue of elevated death rate)",
    maxtime: 10000000,    
    ncol: 300,
    nrow: 300, // dimensions of the grid to build
    wrap: [false, false], // Wrap boundary [COLS, ROWS]   
    scale: 1, // scale of the grid (nxn pixels per grid cell)
    graph_interval: 10,
    seed: 12,
    graph_update: 20,
    bgcolour: "white",
    statecolours: {
      alive: 'default'
    } // The background state '0' is never drawn
  }

  sim = new Simulation(config)

  sim.makeGridmodel("cells");
  sim.cells.statecolours.alive[0] = [255, 255, 255] // Change bg to white
  sim.cells.statecolours.alive[1] = [79, 31, 154] // Change WT 1 to white
  sim.cells.statecolours.alive[2] = [228, 178, 36] // Change mutant 1 to gold
  sim.cells.statecolours.alive[3] = [32, 100, 100] // Change mutant 2 to dark-turquoise
  sim.cells.statecolours.alive[3] = [100, 100, 255] // Change mutant 3 to light blue 

  sim.createDisplay("cells", "alive", "Colony growth (colours = #mutations)")
  sim.makeGridmodel("cells_wellmixed");
  sim.cells_wellmixed.statecolours = sim.cells.statecolours
  sim.createDisplay("cells_wellmixed", "alive", "Well-mixed population (colours = #mutations)")



  sim.cells.nextState = function(x, y) // Define the next-state function. This example is stochastic growth in a petri dish
  {

    if (this.grid[x][y].alive == undefined) {
      let neighbour = this.randomMoore8(this, x, y) // In the Moore8 neighbourhood of this grid count # of 1's for the 'alive' property        
      if (neighbour.alive > 0 && sim.rng.genrand_real1() < birth_rate) {
        this.grid[x][y].alive = neighbour.alive
        if...