Cacatoo - FitzHugh Nagumo

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

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

		</div>
		<div class="output" id="output"></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: #cccccc;
  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; // Changing sim to var to enable "save image" button
 //model parameters, confusingly dubbed variables
 //for technical reasons
 var a = 0.025
 var e = 0.005
 var b = 4.5
 var dt = 1
 var disruption = 0.3

 let sumV; //to sum up V over the grid

 function cacatoo() {

   //setting details like simulation field size,
   //max run time, title, zoom scale, display
   //frequency, boundary conditions etc
   let config = {
     title: "Fitzhugh Nagumo PDE",
     description: "",
     maxtime: 1000000,
     ncol: 150,
     nrow: 150, // dimensions of the grid to build
     wrap: [false, false], // Wrap boundary [COLS, ROWS]   
     scale: 2, // scale of the grid (nxn pixels per grid cell
     bgcolour: 'white',
     graph_interval: 5,
     graph_update: 25
   }

   //make a model object
   sim = new Simulation(config)
   sim.makeGridmodel("Fitz");

   //set the colors for the 2D displays
   //arguments: which variable, max value, start color, end color
   sim.Fitz.colourGradient('V', 100, [255, 255, 255], [0, 0, 255])
   sim.Fitz.colourGradient('W', 100, [255, 255, 255], [255, 0, 0])

   //2D display for the V variable & colorbar
   sim.createDisplay_continuous({
     model: "Fitz",
     property: "V",
     label: "Action potential",
     minval: 0,
     maxval: 1,
     decimals: 3,
     nticks: 3
   })
   //2D display for the W variable & colorbar
   sim.createDisplay_continuous({
     model: "Fitz",
     property: "W",
     label: "Refractory tissue",
     minval: 0,
     maxval: 0.3,
     decimals: 3,
     nticks: 3
   })


   sim.reset = function(all = true) {
     if(all) sim.time = 0
     if (all) sim.Fitz.resetPlots()
     for (let i = 0; i < sim.Fitz.nc; i++) {
       for (let j = 0; j < sim.Fitz.nr; j++) {
         if (all) {
           if (i * i + j * j <= 100)
             sim.Fitz.grid[i][j].V = 1
        ...