Merge pull request #402 from nature-of-code/notion-update-docs

Minor chapter 7 edits

content/07_ca.html

@@ -543,7 +543,7 @@ <h3 id="the-implementation">The Implementation</h3>
 neighbors -= board[i][j];</pre>
 <p>Finally, once I know the total number of live neighbors, I can decide what the cell’s new state should be according to the rules: birth, death, or stasis.</p>
 <pre class="codesplit" data-code-language="javascript">// {.code-wide} If it is alive and has less than 2 live neighbors, it dies from loneliness.
-if        (board[i][j] == 1 &#x26;&#x26; sum &#x3C; 2) {
+if (board[i][j] == 1 &#x26;&#x26; sum &#x3C; 2) {
   next[i][j] = 0;
 // {.code-wide} If it is alive and has more than 3 live neighbors, it dies from overpopulation.
 } else if (board[x][y] == 1 &#x26;&#x26; sum >  3) {
@@ -598,6 +598,7 @@ <h3 id="example-72-game-of-life">Example 7.2: Game of Life</h3>
       square(i * w, j * w, w);
     }
   }</pre>
+<p>In this example, I’m introducing yet another method for drawing the squares based on a cell’s state. Remember, multiplying the cell’s state by 255 gives you white for “on” and black for “off”. To invert this, I start with 255 and subtract cell’s state multiplied by 255: black for “on” and white for “off.”</p>
 <div data-type="exercise">
   <h3 id="exercise-76">Exercise 7.6</h3>
   <p>Create a Game of Life simulation that allows you to manually configure the grid, either by hardcoding initial cell states or by drawing directly to the canvas. Use the simulation to explore some of the known Game of Life patterns.</p>
@@ -682,14 +683,15 @@ <h3 id="example-73-object-oriented-game-of-life">Example 7.3: Object-Oriented Ga
     }
   }
 }</pre>
+<p>By transforming the cell into an object, numerous possibilities emerge for enhancing the cell’s properties and behavior. What if each cell had a <code>lifespan</code> property, incrementing with each cycle which influenced its color or shape over time? Imagine if a cell had a <code>terrain</code> property that could be “land”, “water”, “mountain”, or “forest”. How could a two-dimensional CA integrate into a tile-based strategy game or other context?</p>
 <h2 id="variations-on-traditional-ca">Variations on Traditional CA</h2>
 <p>Now that I’ve covered the basic concepts, algorithms, and programming strategies behind the most famous 1D and 2D cellular automata, it’s time to think about how you might take this foundation of code and build on it, developing creative applications of CAs in your own work. In this section, I’ll talk through some ideas for expanding the features of a CA. Example answers to these exercises can be found on the book website.</p>
 <p><strong>1) Non-rectangular grids</strong>. There’s no particular reason why you should limit yourself to having your cells in a rectangular grid. What happens if you design a CA with another type of shape?</p>
 <div data-type="exercise">
   <h3 id="exercise-79">Exercise 7.9</h3>
   <p>Create a CA using a grid of hexagons (as below), each with six neighbors.</p>
   <figure>
-    <img src="images/07_ca/07_ca_32.png" alt="">
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/_PMAwxPtZp" data-example-path="examples/07_ca/exercise_7_9_hexagon_ca"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -723,7 +725,7 @@ <h3 id="exercise-713">Exercise 7.13</h3>
   <h3 id="exercise-714">Exercise 7.14</h3>
   <p>Use CA rules in a flocking system. What if each boid had a state (that perhaps informs its steering behaviors) and its neighborhood changed from frame to frame as it moved closer to or farther from other boids?</p>
 </div>
-<p><strong>7) Nesting</strong>. Another feature of complex systems is that they can be nested. Our world tends to work this way: a city is a complex system of people, a person is a complex system of organs, an organ is a complex system of cells, and so on and so forth.</p>
+<p><strong>7) Nesting</strong>. As discussed in chapter 5, a feature of complex systems is that they can be nested. A city is a complex system of people, a person is a complex system of organs, an organ is a complex system of cells, and so on and so forth. How could this be applied to CA?</p>
 <div data-type="exercise">
   <h3 id="exercise-715">Exercise 7.15</h3>
   <p>Design a CA in which each cell itself is a smaller CA.</p>

content/examples/07_ca/exercise_7_9_hexagon_ca/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8" />
+
+  </head>
+  <body>
+    <main>
+    </main>
+    <script src="sketch.js"></script>
+  </body>
+</html>

content/examples/07_ca/exercise_7_9_hexagon_ca/sketch.js

@@ -0,0 +1,60 @@
+let w, h;
+let rows, columns;
+
+let board;
+
+function setup() {
+  createCanvas(640, 240);
+  angleMode(DEGREES);
+  w = 20;
+  h = sin(60) * w;
+  columns = floor((width / w) * 3);
+  rows = floor(height / h) + 2;
+  board = create2DArray(columns, rows);
+  for (let i = 0; i < columns; i++) {
+    for (let j = 0; j < rows; j++) {
+      board[i][j] = floor(random(2));
+    }
+  }
+}
+
+function draw() {
+  background(220);
+
+  for (let i = 0; i < columns; i++) {
+    for (let j = 0; j < rows; j++) {
+      let x = i * w * 3;
+      let y = j * h;
+      if (j % 2 == 0) {
+        x += 1.5 * w;
+      }
+      fill(255 - board[i][j] * 255);
+      drawHexagon(x, y, w);
+    }
+  }
+}
+
+function drawHexagon(x, y, w) {
+  push();
+  translate(x, y);
+  stroke(0);
+  beginShape();
+  for (let i = 0; i < 360; i += 60) {
+    let xoff = cos(i) * w;
+    let yoff = sin(i) * w;
+    vertex(xoff, yoff);
+  }
+  endShape(CLOSE);
+  pop();
+}
+
+function create2DArray(rows, columns) {
+  let arr = new Array(rows);
+  for (let i = 0; i < rows; i++) {
+    arr[i] = new Array(columns);
+    for (let j = 0; j < columns; j++) {
+      arr[i][j] = 0;
+    }
+  }
+  return arr;
+}

content/examples/07_ca/exercise_7_9_hexagon_ca/style.css

@@ -0,0 +1,7 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+canvas {
+  display: block;
+}