Cacatoo - Game of Life

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>
  <!-- Dependencies
    <link rel="stylesheet" href="style.css">        <!-- Set style sheet -->

  <head>
    <title>Cacatoos 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: 30px;
  height: 300px;
  overflow-y: scroll;
  font-size: 11px;
  text-align: left;
 ...

JavaScript

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

let sim; // Declare a variable named "sim" globally, so that we can access our cacatoo-simulation from wherever we need. 

/**
 * 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() {
  /*
      1. SETUP. First, set up a configuration-object. Here we define how large the grid is, how long will it run, what colours will the critters be, etc. 
  */
  let config = {
    title: "Game of Life", // The name of your cacatoo-simulation
    description: "Conway's Game of Life", // And a description if you wish
    maxtime: 1000000, // How many time steps the model continues to run
    ncol: 200, // Number of columns (width of your grid)
    nrow: 200, // Number of rows (height of your grid)
    wrap: [true, true], // Wrapped boundary conditions? [COLS, ROWS]   
    scale: 2, // Scale of the grid (nxn pixels per grid point)
    statecolours: {
      'alive': {
        1: 'white'
      }
    }, // Colours for each state. Background (0) defaults to black. 
  }

  /*
      1. SETUP. (continued) Now, let's use that configuration-object to generate a new Cacatoo simulation
  */
  sim = new Simulation(config) // Initialise the Cacatoo simulation
  sim.makeGridmodel("gol") // Build a new Gridmodel within the simulation called "gol" (Game Of Life)
  //sim.initialGrid(sim.gol, 'alive', 1, 0.5) // Set half (50%) of the Gridmodel's grid points to 1 (alive)
  sim.initialPattern(sim.gol, 'alive', 'https://raw.githubusercontent.com/bramvandijk88/cacatoo/master/patterns/glider.png', 80, 80)

  sim.createDisplay("gol", "alive", "Game of life (white=alive)") // Create a display so we can see our newly made gridmodel
  /*
      2. DEFINING THE RULES. Below, the user defines the nextState function. This function will be applied for each grid point when we will update the grid later. 
  */
 ...