// If you aren't familiar with elementary cellular automata: think of it like conway's game of life, but in 1 dimension.
// If you aren't familiar with conway's game of life: it's a system whereby maybe-cool random shit is randomly generated in a neato, random manner.

// These two variables decide the size of the rendered automaton.
// Feel free to change this; just make sure that the numbers are also updated in the HTML/Haml section to accurately reflect this.
// Also, beware: this is relatively computationally heavy for Sass (and/or for codepen? this version is like 15k lines of compiled CSS, is the thing), and it might crash your browser and/or take a long time to render if you make it too big, especially if I add animations.
$numrows: 40;
$cpr: 100; // Cells per row
$cellsize: 5px;

// To use a random initial row, set this to true.
// Otherwise, only the center cell of the top row will start as 'true' / black.
$initialStateRandom: false;

// To use a random rule, set this to true.
$ruleRandom: false;

// If ruleRandom is false, you can set a custom rule by changing any of these 1s to 0s, or vice versa.
// This is "Rule 75", called such because 01001011 is the binary representation of 75.
// It's really pretty.
$setRule: (0 1 0 0 1 0 1 1);
// You might also want to try Rule 110:
// $setRule: (0 1 1 0 1 1 1 0);
// or Rule 30:
// $setRule: (0 0 0 1 1 1 1 0);


// Taking care of some setup here.

// First, we're defining the '$rule' variable at a global scope. It's gonna be a list.
$rule: ();
// If the rule is meant to be random, generate said rule.
@if $ruleRandom {
  @for $i from 1 through 8 {
    // "random(2) - 1" will be either 0 or 1, as Sass' random($limit) func does not include 0 --
    // "random(1)" would always return "1"
    $rule: append($rule, random(2) - 1);
  }
}
// If the rule is _not_ meant to be random, use the user-supplied rule
@else {
  $rule: $setRule;
}

// The Elementary Cellular Automata system is neat.
// The numbers in the $result map below are boolean trios, and refer to the cell to the top left, directly above, and to the top right of the currently-being-rendered cell.
// If the $rule is (0, 0, 0, 1, 1, 0, 1, 0), and the space to the top right is the only one of the three 'parents' that is black/'true', then we'd be looking for the "001" key below, which in this example, would mean that the current cell will be "1", aka "true", aka black.
// http://mathworld.wolfram.com/Rule150.html has a good diagram of this.
$result: (
  "111": nth($rule, 1),
  "110": nth($rule, 2),
  "101": nth($rule, 3),
  "100": nth($rule, 4),
  "011": nth($rule, 5),
  "010": nth($rule, 6),
  "001": nth($rule, 7),
  "000": nth($rule, 8)
);

// This function does what we described above -- taking the top left, top middle, and top right cells,
// and then looking at the $result map in order to figure out what part of the rule to apply.
// It does this by:
// Taking those three states, as numbers, as parameters;
@function getState($l, $m, $r) {
  // Initializing a string to eventually use to get the proper value from the $result map;
  $resString: '';
  // adding either 1 or 0 to that string for each of the three passed-in numbers;
  $resString: $resString + if($l == 1, 1, 0);
  $resString: $resString + if($m == 1, 1, 0);
  $resString: $resString + if($r == 1, 1, 0);
  // and then returning the result to the place it was called.
  @return map-get($result, $resString + '');
}


// Finally! Some normal CSS!
// The first bit's just setup.
html, body {
  height: 100%;
}

body {
  background: #CCC;
}

.container {
  width: $cpr * $cellsize;
  height: $numrows * $cellsize;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.row {
  height: $cellsize;
  width: $cellsize * $cpr;
  background: white;
}

.cell {
  width: $cellsize;
  height: $cellsize;
  background: white;
  float: left;
}

// And here's where it gets fun!
// We're gonna see if the initial state is random or not.

// Also, we're going to initialize a 'row' variable to use for the first row (and, eventually, every other row) -- this will be a list of 0/1s.
$row: ();
// If we're making the first row random, then:
@if $initialStateRandom == true {
  // we'll add as many random 0s or 1s as we are supposed to to have a full row's worth of cells.
  @for $i from 1 through $cpr {
    $row: append($row, random(2) - 1);
  }
}
// Otherwise:
@else {
  // We'll make every cell false, except for the center one.
  @for $i from 1 through $cpr {
    $row: append($row, 0);
  }
  $row: set-nth($row, ceil($cpr / 2), 1);
}

// For the first row only: paint each cell.
.row:nth-child(1) {
  @for $i from 1 through $cpr {
    .cell:nth-child(#{$i}) {
      $bool: nth($row, $i);
      background: if($bool == 1, black, white);
    }
  }
}

// Then, for every other row:
@for $j from 2 through $numrows {
  // Make a temporary variable for the new row values so that we don't override the current row values during lookup.
  $nextrow: ();

  // For each cell per row,
  @for $i from 1 through $cpr {
    .row:nth-child(#{$j}) {
      .cell:nth-child(#{$i}) {
        // Make a state variable.
        $thisState: fillerStringToLetMeDefineTheVariable;
        // We'll be using the getState function from above to figure out what the state of this cell should be.
        // If we're looking at the first cell in the current row, the top left cell will actually be the last cell of the previous row.
        @if $i == 1 {
          $thisState: getState(nth($row, $cpr), nth($row, $i), nth($row, $i + 1));
        }
        // Likewise for if we're looking at the last cell in a row -- the top right cell will be the first cell of the previous row.
        @elseif $i == $cpr {
          $thisState: getState(nth($row, $i - 1), nth($row, $i), nth($row, 1));
        }
        // If we're looking in the middle, though, it's simpler.
        @else {
          $thisState: getState(nth($row, $i - 1), nth($row, $i), nth($row, $i + 1));
        }
        // Fill up that temporary variable for use in the next row (i.e. the next pass through this loop).
        $nextrow: append($nextrow, $thisState);
        // Paint the current cell with the proper state.
        background: if($thisState == 1, black, white);
      }
    }
  }
  // Make that temporary row variable the "real" one for the next pass.
  $row: $nextrow;
}