feat: add interactivity to ch4 - 4th example, navigation functionality

beeezal · beeezal · commit a6f3ff77425d · 2025-05-16T04:08:45.000+05:30
- add lines to code and content, to incorporate an interactive slider to
  the 4th example of chapter 4.
- add front matter attribute to all main content pages, to enable navigation
  functionality.
- add template for the navigation items to base.html
- add styling rules for these navigation items
diff --git a/src/_includes/layouts/base.html b/src/_includes/layouts/base.html
@@ -19,6 +19,30 @@
 <body>
 {% block content %} 
   {{ content | safe }}
+
+  <nav class="chapter-navigation">
+    <div class="prev-container">
+    {% if prevPage %}
+      <a href="{{ prevPage | url }}" class="prev-link">
+        <span class="nav-arrow">←</span> Previous
+      </a>
+    {% endif %}
+  </div>
+  
+  <div class="home-container">
+    <a href="{{ '/' | url }}" class="home-link">
+      <span class="nav-icon">⌂</span> Home
+    </a>
+  </div>
+  
+  <div class="next-container">
+    {% if nextPage %}
+      <a href="{{ nextPage | url }}" class="next-link">
+        Next <span class="nav-arrow">→</span>
+      </a>
+    {% endif %}
+  </div>
+  </nav>
 {% endblock %}
 </body>
 </html>
diff --git a/src/appendix.md b/src/appendix.md
@@ -2,6 +2,7 @@
 tags: [appendix, simulation, p5]
 title: 'Appendix: How to run p5 sketches'
 layout: 'base'
+prevPage: '/bibliography/'
 ---
 # Appendix: How to run p5 sketches
 
diff --git a/src/assets/cssStyle/generic.css b/src/assets/cssStyle/generic.css
@@ -5,7 +5,7 @@ html{
 
 body {
   margin: 0 auto;
-  padding: 0 3rem;
+  padding: 0 3rem 3rem 3rem;
   width: 100%;
   box-sizing: border-box;
 }
@@ -224,4 +224,70 @@ pre:not([class*="language-"]) {
   padding: 1em 1em 1em 1.5em;
   font-size: 16px;
   line-height: 1.5;
+}
+
+/* Styling for chapter navigation buttons */
+.chapter-navigation {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  gap: 1rem;
+}
+
+.chapter-navigation a {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: #333;
+  padding: 0.5rem 0.8rem;
+  border-radius: 5px;
+  transition: background-color 0.2s, color 0.2s;
+  font-weight: 500;
+  width: auto;
+}
+
+.chapter-navigation a:hover {
+  background-color: #f4f6fa;
+  color: #0056b3;
+}
+
+.nav-arrow, .nav-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+}
+
+/* Container divs for positioning links */
+.prev-container {
+  grid-column: 1;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.home-container {
+  grid-column: 2;
+  display: flex;
+  justify-content: center;
+}
+
+.next-container {
+  grid-column: 3;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.prev-link .nav-arrow {
+  margin-right: 0.5rem;
+}
+
+.next-link .nav-arrow {
+  margin-left: 0.5rem;
+}
+
+.home-link .nav-icon {
+  margin-right: 0.5rem;
 }
diff --git a/src/assets/scripts/chap4_04.js b/src/assets/scripts/chap4_04.js
@@ -31,9 +31,13 @@ let perlinScript = function (p) {
       p.circle(this.pos.x, this.pos.y, this.r * 2);
     }
 
-    step(vel_mag = 3, chk_edges = true) {
+    step(noisyStepSize = false, vel_mag = 3, chk_edges = true, relativeMaxStepSize = 0.75) {
       this.updatePosHistory();
 
+      if(noisyStepSize){
+        vel_mag = p.noise(this.magOffset)*(this.r*relativeMaxStepSize);
+        this.magOffset += 0.01;
+    }   
       PerlinWalker.noisyVelocity(this.xOffset, this.yOffset, this.vel);
 
       this.vel.setMag(vel_mag);
@@ -46,8 +50,8 @@ let perlinScript = function (p) {
     }
 
     static noisyVelocity(xOffset, yOffset, vector) {
-      vector.set(p.map(p.noise(xOffset), 0, 1, -1, 1),
-        p.map(p.noise(yOffset), 0, 1, -1, 1)
+      vector.set((p.noise(xOffset) - 0.5)*2 ,
+        (p.noise(yOffset) - 0.5)*2
       );
     }
 
@@ -73,6 +77,8 @@ let perlinScript = function (p) {
   }
 
   let noiseWalker = new PerlinWalker(p.width / 2, p.height / 2, 12);
+  let container, maxStepSlider, relativeMaxStepSize, label;
+  let noisyStepSize = true;
 
   p.initializeSketch = function () {
     noiseWalker.pos.set(p.width / 2, p.height / 2);
@@ -87,13 +93,26 @@ let perlinScript = function (p) {
     let canvas = p.createCanvas(850, 550);
     canvas.parent('sec4');
 
+    container = p.select('#interactive-controls-sec4');
+
+    maxStepSlider = p.createSlider(0, 1, 0.75, 0);
+    maxStepSlider.parent(container);
+    label = p.createSpan('Max(NoisyStepSize): r*' + 0.75);
+    label.parent(container);
+
+    maxStepSlider.input(() => {
+      relativeMaxStepSize = maxStepSlider.value();
+      noisyStepSize = (relativeMaxStepSize > 0);
+      label.html('Max(NoisyStepSize): r*' + relativeMaxStepSize.toFixed(2));
+    });
+
     p.initializeSketch();
   }
 
   p.draw = function () {
     p.background(255);
     noiseWalker.display();
-    noiseWalker.step(3, true);
+    noiseWalker.step(noisyStepSize, 3, true, relativeMaxStepSize);
   }
 }
 
diff --git a/src/bibliography.md b/src/bibliography.md
@@ -3,6 +3,8 @@ tags: [main, bibliography, simulation]
 title: Bibliography
 layout: 'base'
 order: 8
+prevPage: '/conclusion/'
+nextPage: '/appendix/'
 ---
 # Bibliography
 
diff --git a/src/chapter0/index.md b/src/chapter0/index.md
@@ -4,6 +4,7 @@ title: Introduction
 layout: 'base'
 number: 0
 order: 1
+nextPage: '/chapter1/'
 ---
 
 # Chapter 0
diff --git a/src/chapter1/index.html b/src/chapter1/index.html
@@ -4,6 +4,8 @@
 layout: 'base'
 number: 1
 order: 2
+prevPage: '/chapter0/'
+nextPage: '/chapter2/'
 ---
 
 <h1>Chapter 1</h1>
diff --git a/src/chapter2/index.html b/src/chapter2/index.html
@@ -4,6 +4,8 @@
 layout: 'base'
 number: 2
 order: 3
+prevPage: '/chapter1/'
+nextPage: '/chapter3/'
 ---
 
 <h1>Chapter 2</h1>
diff --git a/src/chapter3/_section3_1.md b/src/chapter3/_section3_1.md
@@ -105,54 +105,55 @@ Applied parameters:
 
 * Direction, directly through $x, y$ coordinates of velocity,  
 
-  range = $(-3, 3)$ 
+  range = $(-4, 4)$ 
 * Velocity (both magnitude and direction)  
-
   range: 
-  - mag $\in (0,$  diameter $/2)$,   
+  - mag $\in (0,$  radius $\times 1.5)$,   
   - direction $\in (-1,1)$
 ```js
 /* Code for a 2D RW that is manupilated according to perlin noise.
 Walk is performed by picking a noise value separately for the x-coord and y-coord
-Hereafter noise value will be referred as n-value*/
+In this program noise value will be referred as n-value 
+*/
 
 class Walker {
-  /* Setting class fields - offests for each co-ordinate (starting point in time for the noise function)
-  x and y offests are always increased and z offest only when step() affecting_parameter is 'step'*/
-  xoff = 0;
-  yoff = 1000;      ////Note that the difference is arbitrary, but it is important,
-  zoff = 2000;      //in order to avoid co-orrelation between each direction (in a given time t)
+  // Setting class fields - offests for each co-ordinate 
+  // i.e. (starting point in time for the noise function)
+  // x and y offests are always increased and mag offest only when update() affecting_parameter is 'step'
+  xOffset = 0;
+  yOffset = 1000;        // Note that the difference is arbitrary, but it is important,
+  magOffset = 2000;      // in order to avoid co-orrelation between each direction (in a given time t)
   constructor(x,y,r) {
     this.x = x;
     this.y = y;
     this.r = r;
+    this.D = this.r * 2;
   }
 
   display() {
-    //Displays the walker at the current location with a circle of radius r
     stroke(0);
     fill(100);
-    circle(this.x, this.y,this.r);
+    circle(this.x, this.y,this.D);
   }
 
-  step(affecting_params='direction') {
+  update(affecting_params='direction') {
     //Switch statement to determine the which parameter is being affected. Default: direction
     //All of them are affected by Perlin noise
     switch(affecting_params){
       // Changing the direction in which the walker is moving
       case 'direction':
-        this.x += map(noise(this.xoff),0,1,-1,1)*3;     //map() scales n-value to (-1,1) from (0,1) - Enabling RW to move in all directions
-        this.y += map(noise(this.yoff),0,1,-1,1)*3;     //3 is the maginitude of the step. An arbitrary standard accross all RW methods
+        this.x += map(noise(this.xoff),0,1,-1,1)*4;     //map() scales n-value to (-1,1) from (0,1) - Enabling RW to move in all directions
+        this.y += map(noise(this.yoff),0,1,-1,1)*4;     //4 is the maginitude of the step. An arbitrary standard accross all RW methods
         break;
       // Directly changing the location of the walker
       case 'location':
-        this.x = noise(this.xoff)*width;                //noise(t)*k - scales n-value to (0,k) from (0,1)
-        this.y = noise(this.yoff)*height;               //Therefore here x-values are (0,width) and y-values are (0,height)
+        this.x = noise(this.xoff)*width;    //noise(t)*k - scales n-value to (0,k) from (0,1)
+        this.y = noise(this.yoff)*height;   //Therefore here x-values are (0,width) and y-values are (0,height)
         break;
       
       // Changing both step size and direction
       case 'step':
-        let vel_mag = noise(this.zoff)*(this.r/2);
+        let vel_mag = noise(this.zoff)*(this.r*1.5);
         this.x += map(noise(this.xoff),0,1,-1,1)*vel_mag;
         this.y += map(noise(this.yoff),0,1,-1,1)*vel_mag;
         this.zoff += 0.01;
@@ -168,19 +169,20 @@ let w;
 function setup() {
   createCanvas(windowWidth, windowHeight);
   background(255);
-  w = new Walker(width/2, height/2, 20);
+  w = new Walker(width/2, height/2, 8);
 }
 
 function draw() {
   // Be aware of which function you call first according to the step type you chose
   w.display();                             
-  w.step('direction');
+  w.update('direction');
 } 
 ```
+Note that the implementation [code for the simulation](https://github.com/beeezal/Honours-website-project/blob/main/src/assets/scripts/chap3_01.js) is syntatically different from the above code, but the ideas are the same. Main difference is that the order of calling `display()` and `update()` is taken care of by the program, and instead of a switch statement we use an object (with a function for each param).
 
 {% 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)
+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:
 
diff --git a/src/chapter3/index.html b/src/chapter3/index.html
@@ -4,6 +4,8 @@
 layout: 'base'
 number: 3
 order: 4
+prevPage: '/chapter2/'
+nextPage: '/chapter4/'
 ---
 
 <h1>Chapter 3</h1>
diff --git a/src/chapter4/_section4_4.md b/src/chapter4/_section4_4.md
@@ -80,6 +80,44 @@ So, below are the visual observations of each of these movers. This is meant to
 updateVelocity = `setAngle()`
 And update = `step()` where,
 
+```js
+  setAngle(sigma = PI/8, mu = this.vel.heading(), changeRate = 1, changeColor = false){ 
+    // Function to set the direction angle of the walker's velocity
+    // changeRate - rate at which we change the angle in terms of frames
+    // changeColor - Whether walker's color changes when the direction changes significantly (>2 SDs)
+
+    if (frameCount % changeRate === 0) {
+      // randomGaussian() returns a random sample from a N(0,1) 
+      // Therefore by performing scaling and translation of the distribution we have 
+      // the directionAngle distributed according to N(current direction,π/8) or N(μ,σ)
+      
+      this.directionAngle = randomGaussian() * sigma + mu;     //σ and μ were picked experimentally
+      // this.drectionAngle = randomGaussian(mu, sigma);		
+      
+      // Changing color if change in direction is more than 2 SDs
+      if ((changeColor) && abs(this.directionAngle - mu) >= 2*sigma) {
+      this.col = color(random(255), random(255), random(255));     // color is set by choosing random RGB values
+      }
+    }
+  }
+```
+
+and `step()` follows the general pattern implemented, with
+
+```js
+  step(vel_mag=3,chk_edges=false) {
+    this.updatePosHistory(1000);
+
+    this.setAngle(PI/8, this.vel.heading(), 1, false);
+    this.vel.setHeading(this.directionAngle);        
+    // v.setHeading(direction) is same as v = v.mag() * (cos(directionAngle), sin(directionAngle))                                       
+    this.vel.setMag(vel_mag);
+    this.pos.add(this.vel);
+
+    if (chk_edges){this.checkEdges();}
+  }
+```
+
 (The simulation show in chapter 2 is sufficient for the following observations. But an implementation following the above model can be found [here](https://github.com/beeezal/Honours-project-codes/blob/feat/trial-path-movers/Normal_Random_walker/sketch.js) )
 
 **Observations**
@@ -96,7 +134,11 @@ And update = `step()` where,
 
 updateVelocity = `static noisyVelocity()`
 
-with extended functionality to add noise to even step size, directly into `update` which is also written as `step()`.
+Extended functionality to add noise to even step size, directly into `step()` with parameters:
+- `noisyStepSize` : toggle for adding noise to step size, default = _true_
+- `relativeMaxStepSize` : decides the maximum of the range of noise added, default $=0.75$
+
+**NOTE**: setting the slider value to $0$ in the below simulation, sets `noisyStepSize` to _false_
 
 {% include "simulation-grid.html" %}
 
@@ -149,7 +191,7 @@ Then, one could say that there was no intention in the implementation of PerlinW
 
 But, one could draw equivalences between the algorithm for PerlinWalker and that of Wanderer, or even make them similar without introducing new design intentions, and there is still the problem of the uninformed viewer. Therefore, there must be more work done in regards to the definition of an autonomous agent, to clearly distinguish between each case mentioned here.
 
-Therefore I end this section by claiming that classification of wanderer is an edge case, and including that may have us include perlin noise as _autonomous_ well - is an important observation. yes as expected one should be able to go back from visuals to intended outcomes and check what is going on. All arbitrary variable choices in this proejct are in essence an outcome of this effect
+Therefore I end this section by claiming that classification of wanderer is an edge case, and including that may have us include perlin noise as _autonomous_ well - is an important observation. Yes, as expected one should be able to go back from visuals to intended outcomes and check what is going on. All arbitrary variable choices in this proejct are in essence an outcome of this effect
 
 ## Notes:
 
diff --git a/src/chapter4/index.html b/src/chapter4/index.html
diff --git a/src/chapter5/index.html b/src/chapter5/index.html
diff --git a/src/conclusion.md b/src/conclusion.md
