Cacatoo - RPS

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

* {
	color:black;
}


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

JavaScript

let sim;

    function cacatoo() {

        let config = {
            title: "Rock-paper-scissors",
            description: "Rock beats scissors, scissors beats paper, and paper beats... rock. Apparently.<br>This example illustrates how you can add mouse events and key press events. <br>Use your mouse to draw, and chance colours with the '1', '2,' and '3' keys.<br> The '[' and ']' keys can modify the brush size.",
            maxtime: 10000,
            seed:1,
            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)
            statecolours: { colour: {1:'white',2:'red',3:'blue'} },        // if set to 'default', createDisplay (below) inherits the default colours of cacatoo
            num_colours: 3,
            printcursor: false
        }

        sim = new Simulation(config)

        sim.makeGridmodel("spirals");
        sim.createDisplay("spirals", "colour", "Colours represent different species")
        // sim.spirals.canvases["Colours represent different species"].legend.style.display = "none"  // Hack to remove the legend :)
        let n_species = 3


        // sim.initialGrid(sim.spirals,'colour',0,2,0.01)        
        for (let x = 0; x < sim.spirals.nc; x++)                          // x are columns
            for (let y = 0; y < sim.spirals.nr; y++)                      // y are rows
                //sim.spirals.grid[x][y]['colour'] = Math.ceil(sim.rng.genrand_real1() * n_species)
                sim.spirals.grid[x][y].colour = 1

        sim.spirals.nextState = function (x, y)           // Define the next-state function. This example is spirals
        {
            let state = this.grid[x][y].colour               // Colour of current pixel
            let pred = (this.grid[x][y].colour % n_species) + 1  // Colour it is...