Cacatoo - Particle 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>
	  <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="content" id="canvas_holder"> </div>
    <div class="content" id="form_holder"> </div>
    
  </body>

</html>

CSS

body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-color: #151515;
  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: #151515;
  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;

// Define global parameters
let num_colours = 6
let dots_per_colour = 100
let movement_rate = 0.0003  // Control the influence of the attraction/repulsion
let self_attraction_rate = 0.0005  // Mild attraction to same color
let repulsion_distance = 3.5  // distance for repulsion
 
function cacatoo() {
  
  let simconfig = {
    title: "Particle life", // The name of your cacatoo-simulation
    description: "", // And a description if you wish
    maxtime: 50000, // 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)
    width: 200, // Number of columns (width of your grid)
    height: 150, // Number of rows (height of your grid)
    scale: 2.5, // Scale of the grid (nxn pixels per grid point)
    sleep: 0,
		seed: 5,
    wrap: [true,true],
    //fpsmeter: true,
    bgcolour: "#151515",
    statecolours: {
      'type': { 1: '#E40303',
                  2: '#FF8C00',
                  3: '#FFED00',
                  4: '#008026',
                  5: '#24408E',
                  6: '#732982'
                }
    },
  }

  let flockconfig = {
    shape: 'dot',          // Shape of the boids drawn 
    click: 'repel',          // Clicking the boids pushes them away from the mouse
    max_speed: 1,          // Maximum velocity of boids
    max_force: 1,        // Maximum steering force applied to boids (separation/cohesion/alignment rules)
    init_velocity:0.0,
    friction: 0.2,        
		brownian: 0.0,
    gravity: 0.0,
    // Mouse parameters
    mouse_radius: 20,                   // Radius of boids captured by the mouse overlay
    draw_mouse_radius: true,            // Show a circle where the mouse is
    // Collision behaviour
    collision_force: 0.03,
		separation: {strength:0.3,radius:5},
    size: 1.5,                // Size of the boids (scales...