feat: add example simulation in ch-3, with interactivity

- add code the intended interactivity as radio buttons
- change the initial label text in ch-2 normal walker simulation
- add required lines for the simulation to work in ch-3 content files

Author: beeezal

src/assets/cssStyle/generic.css

@@ -86,13 +86,13 @@ img {
 
 /* Style all divs inside interactive panel */
 .interactive-panel div {
-  margin-bottom: 15px;
+  margin: 5px 0;
   display: flex;
   flex-direction: column;
 }
 
 .interactive-panel span {
-  margin-bottom: 5px;
+  margin-bottom: 3px;
   font-size: 14px;
   color: white;
 }
@@ -106,11 +106,22 @@ img {
   margin-top: 5px;
 }
 
+.interactive-panel div > label{
+  display: flex;
+  align-items: center;
+  margin: 3px 0;
+}
+
+.interactive-panel input[type="radio"] {
+  margin: 3px 3px;
+}
+
 .interactive-panel label {
   font-size: 14px;
   color: white;
 }
 
+
 /* Style for pause and play buttons */
 .control-buttons {
   grid-column: 1;

src/assets/scripts/chap2_02.js

@@ -56,7 +56,7 @@ let normalWalkerScript = function(p) {
 
     stdDevSlider = p.createSlider(p.PI/60, p.PI/6, p.PI/8, 0);
     stdDevSlider.parent(container);
-    label = p.createSpan('Std Dev: ' + stdDevSlider.value().toFixed(3));
+    label = p.createSpan('Std Dev: ' + p.degrees(stdDevSlider.value()).toFixed(3) + '°');
     label.parent(container);
 
     stdDevSlider.input(() => {

src/assets/scripts/chap3_01.js

@@ -0,0 +1,106 @@
+let OGPerlinScript = function (p) {
+  class Walker {
+  
+    xOffset = 0;
+    yOffset = 1000;
+    magOffset = 2000;
+    constructor(x, y, r) {
+      this.x = x;
+      this.y = y;
+      this.r = r;
+      this.D = this.r * 2;
+    }
+
+    display() {
+      p.stroke(0);
+      p.fill(100);
+      p.circle(this.x, this.y, this.D);
+    }
+
+    update(affecting_params = 'direction', chk_edges = true) {
+      let noiseX = p.noise(this.xOffset);
+      let noiseY = p.noise(this.yOffset);
+      const behaviors = {
+        direction: () => {
+          this.x += (noiseX - 0.5) * 8;
+          this.y += (noiseY - 0.5) * 8;
+        },
+        location: () => {
+          this.x = noiseX * p.width;
+          this.y = noiseY * p.height;
+        },
+        step: () => {
+          let vel_mag = p.noise(this.magOffset) * (this.r * 1.5);
+          this.x += (noiseX - 0.5) * 2 * vel_mag;
+          this.y += (noiseY - 0.5) * 2 * vel_mag;
+          this.magOffset += 0.01;
+        }
+      };
+
+      behaviors[affecting_params]();
+
+      this.xOffset += 0.01;
+      this.yOffset += 0.01;
+
+      if (chk_edges){ this.checkEdges(); }
+    }
+
+    checkEdges() {
+      if (this.x > p.width + this.r) {
+        this.x = this.x - (p.width + this.r);
+      } else if (this.x < -this.r) {
+        this.x = p.width + (this.x + this.r);
+      }
+      if (this.y > p.height + this.r) {
+        this.y = this.y - (p.height + this.r);
+      } else if (this.y < -this.r) {
+        this.y = p.height + (this.y + this.r);
+      }
+    }
+  }
+  
+  let w = new Walker(p.width / 2, p.height / 2, 8);
+  let paramsRadio, chosenParam;
+
+  p.initializeSketch = function () {
+    p.background(255);
+
+    chosenParam = paramsRadio.value();
+    if (chosenParam !== 'location'){
+      w.x = p.width / 2;
+      w.y = p.height / 2;
+    }
+    else (w.update('location'));
+
+    p.redraw();
+  }
+
+
+  p.setup = function () {
+    p.noLoop();
+
+    let canvas = p.createCanvas(850, 550);
+    canvas.parent('sec1');
+
+    let container = p.select('#interactive-controls-sec1');
+    paramsRadio = p.createRadio();
+    paramsRadio.option('direction', 'Direction');
+    paramsRadio.option('location', 'Location');
+    paramsRadio.option('step', 'Step Size + Direction');
+    paramsRadio.selected('direction');
+    paramsRadio.parent(container);
+
+    resetLabel = p.createSpan('Reset to see effect');
+    resetLabel.parent(container);
+    resetLabel.style('display', 'flex');
+
+    p.initializeSketch();
+  }
+
+  p.draw = function () {
+    w.display();
+    w.update(chosenParam);
+  }
+}
+
+let sec1Sketch = new p5(OGPerlinScript, 'sec1');

src/chapter3/_section3_1.md

@@ -1,5 +1,7 @@
 ---
 tags: 'chap3'
+script: '/assets/scripts/chap3_01.js'
+id: 'sec1'
 permalink: false
 ---
 
@@ -107,7 +109,7 @@ Applied parameters:
 * Velocity (both magnitude and direction)  
 
   range: 
-  - mag $ \in (0,$  diameter $/2)$,   
+  - mag $\in (0,$  diameter $/2)$,   
   - direction $\in (-1,1)$
 ```js
 /* Code for a 2D RW that is manupilated according to perlin noise.
@@ -175,7 +177,10 @@ function draw() {
   w.step('direction');
 } 
 ```
-A simulation of a similar implementation of the Perlin Noise walker is added to the 4^th^ chapter, in section [4.3.4]()
+
+{% include "simulation-grid.html" %}
+
+A simulation of a similar implementation of the Perlin Noise walker is added to the 4^th^ chapter, in section [4.3.4](../chapter4/#434-comparing-implementations-of-random-motion-behaviours)
 
 ## Notes:
 

src/chapter3/index.html

@@ -9,6 +9,18 @@
 <h1>Chapter 3</h1>
 <h1>Perlin Noise and Smooth Movers</h1>
 <hr>
+<!-- Shared utility function for pausing and resuming any sketch -->
+<script>  
+  let pauseButtonToggle = function (button, sketch) {
+    if (sketch.isLooping()) {
+      button.innerText = "Play";
+      sketch.noLoop();
+    } else {
+      button.innerText = "Pause";
+      sketch.loop();
+    }
+  }
+</script>
 
 {% for section in collections.chap3 %}
   {{ section.templateContent | safe }}