build: add ch1 and ch5 content and scripts

- change the code taken from draft (or Honours-project-codes) to work in
  website
- change ch0 index file to fix some formats
- add linkify and break options to mardown-it library

Author: beeezal

.eleventy.js

@@ -10,7 +10,14 @@ export default function(eleventyConfig) {
   eleventyConfig.addLayoutAlias('base', 'layouts/base.html');
 
   // Add Markdown-it plugins
-  eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownItSup));
+  eleventyConfig.amendLibrary("md", (mdLib) => {
+    mdLib.set({
+      linkify: true, 
+      breaks: true
+    });
+
+    mdLib.use(markdownItSup);
+  });
 
   // Add MathJax plugin
   eleventyConfig.addPlugin(mathjaxPlugin);

src/assets/scripts/chap1_01.js

@@ -0,0 +1,51 @@
+let simpleMoverScript = function(p) {
+  let x_coord, y_coord, timeTaken, speed;
+  let timeSlider, timeLabel, resetLabel;
+
+  p.initializeSketch = function() {
+    x_coord = p.width/2;
+    y_coord = p.height/2;
+    timeTaken = timeSlider.value();
+    speed = 250/timeTaken;
+
+    p.fill(100);
+
+    p.redraw();
+  };
+
+  p.setup = function() {
+    p.noLoop();
+
+    let cnv = p.createCanvas(600, 400);
+    cnv.parent('sec1');
+
+    let container = document.getElementById('interactive-controls-sec1');
+
+    timeSlider = p.createSlider(60, 300, 90, 1);
+    timeSlider.parent(container);
+    timeLabel = p.createSpan('Time (frames): ' + timeSlider.value())
+    timeLabel.parent(container);
+
+    resetLabel = p.createSpan('Reset to see effect');
+    resetLabel.parent(container);
+    resetLabel.style('display', 'flex');
+
+    timeSlider.input(() =>{
+			timeLabel.html('Time (frames): ' + timeSlider.value());
+		})
+
+    p.initializeSketch();
+  };
+
+  p.draw = function() {
+    if (x_coord <= p.width/2 + 250) {
+      p.background(255);
+      x_coord += speed;
+      p.circle(x_coord, y_coord, 20);
+    } else {
+      p.initializeSketch();
+    }
+  };
+};
+
+let sec1Sketch = new p5(simpleMoverScript, 'sec1');

src/assets/scripts/test1.js src/assets/scripts/chap1_02.jssrc/assets/scripts/test1.js renamed to src/assets/scripts/chap1_02.js

@@ -1,10 +1,9 @@
-// A simple p5js script 'simple_script.js'
 let bouncingBallScript = function (p) {
 	class Mover {
 		constructor(x, y, m) {
 			this.pos = p.createVector(x, y);
 			this.vel = p.createVector(3, -2);
-			this.acc = p.createVector();    // Creates a vector of default values (0,0)
+			this.acc = p.createVector();
 			this.mass = m;
 			this.r = m * 0.875;
 			this.D = this.r * 2;
@@ -14,8 +13,6 @@ let bouncingBallScript = function (p) {
 			this.vel.add(this.acc);
 			this.pos.add(this.vel);
 			this.acc.mult(0);
-			// bounceEdges() is called after the reset, since the effect of friction
-			// applied in bounceEdges() is only used in the next frame 
 			this.bounceEdges();
 		}
 
@@ -24,8 +21,6 @@ let bouncingBallScript = function (p) {
 		}
 
 		applyForce(force) {
-			// Since we may not want to directly affect the vector that is passed to us 
-			// we have to create a copy apply second law to the copied vector
 			let f = p5.Vector.div(force, this.mass);
 			this.acc.add(f);
 		}
@@ -71,10 +66,10 @@ let bouncingBallScript = function (p) {
 		p.noLoop();
 
 		let cnv = p.createCanvas(500, 400);
-		cnv.parent('test1');
+		cnv.parent('sec2');
 
 		p.fill(100);
-		container = document.getElementById('interactive-controls');
+		container = document.getElementById('interactive-controls-sec2');
 
 		gravityMagSlider = p.createSlider(0, 1, 0.1, 0.05);
 		gravityMagSlider.parent(container);
@@ -102,4 +97,4 @@ let bouncingBallScript = function (p) {
 	}
 }
 
-let mySketch = new p5(bouncingBallScript, 'test1');
+let sec2Sketch = new p5(bouncingBallScript, 'sec2');

src/assets/scripts/chap2_04.js

@@ -82,7 +82,7 @@ let rWalkerScript = function(p) {
 
   p.mouseDragged = function() {
     rWalkers.addWalker(p.mouseX, p.mouseY, 15);
-    if (!isLooping()) p.redraw();
+    if (!p.isLooping()) p.redraw();
   };
 };
 

src/assets/scripts/chap5_01.js

@@ -0,0 +1,54 @@
+
+multiMouseSeekersScript = function (p) {
+  class Seekers {
+    constructor(maxCapacity = 40) {
+      this.seekers = [];
+      this.maxCapacity = maxCapacity;
+    }
+
+    addSeeker(x, y, r) {
+      this.seekers.push(new Seeker(p, x, y, r));
+    }
+
+    run(target) {
+      for (let i = this.seekers.length - 1; i >= 0; i--) {
+        this.seekers[i].display();
+        this.seekers[i].applyBehaviours(0.5, 0.5, target, false, this.seekers);
+        this.seekers[i].update(true);
+        if (this.seekers[i].isDead()) this.seekers.splice(i, 1);
+      }
+    }
+  }
+  let seekers = new Seekers();
+  let mouse = p.createVector();
+
+  p.initializeSketch = function() {
+    seekers.seekers = [];
+    for (let i = 0; i < seekers.maxCapacity; i++) {
+      seekers.addSeeker(
+        p.random(p.width * 0.25, p.width * 0.75),
+        p.random(p.height * 0.25, p.height * 0.75),
+        p.random([9,10,11])
+      );
+    }
+    mouse.set(p.mouseX, p.mouseY);
+    p.redraw();
+  };
+
+  p.setup = function() {
+    p.noLoop();
+
+    let cnv = p.createCanvas(700, 500);
+    cnv.parent('sec1');
+
+    p.initializeSketch();
+  };
+
+  p.draw = function() {
+    p.background(220);
+    seekers.run(mouse);
+    mouse.set(p.mouseX, p.mouseY);
+  };
+}
+
+let sec1Sketch = new p5(multiMouseSeekersScript, 'sec1');

src/assets/scripts/chap5_02.js

@@ -0,0 +1,97 @@
+let FlockerScript = function (p) {
+  class Flock {
+    constructor() {
+      this.flock = [];
+      this.maxCapacity = 50;
+      this.curIndex = this.maxCapacity - 1;
+    }
+
+    addMover(x, y, r) {
+      this.flock.push(new AutonMover(p, x, y, r));
+    }
+
+    applyBehaviours(mover = this.flock[0], sepW = sepWeight, cohereW = cohereWeight, alignW = alignWeight) {
+      let sepForce = p5.Vector.mult(mover.separate(this.flock), sepW);
+      let alignForce = p5.Vector.mult(mover.align(this.flock), alignW);
+      let cohereForce = p5.Vector.mult(mover.cohere(this.flock), cohereW);
+      mover.applyForce(p5.Vector.add(sepForce, p5.Vector.add(cohereForce, alignForce)));
+    }
+
+    run(chk_edges = true) {
+      for (; this.curIndex > 0; this.curIndex--) {
+        this.flock[this.curIndex].display();
+        this.applyBehaviours(this.flock[this.curIndex]);
+        this.flock[this.curIndex].update(chk_edges);
+        if (this.flock[this.curIndex].isDead()) {
+          this.flock.splice(this.curIndex, 1);
+        }
+      }
+      this.curIndex = this.maxCapacity - 1;
+    }
+  }
+
+  let flock= new Flock();
+  let sepSlider, alignSlider, cohereSlider;
+  let sepWeight = 1, alignWeight = 0.5, cohereWeight = 0.5;
+
+  p.initializeSketch = function () {
+    flock.flock = [];
+    for (let i = 0; i < flock.maxCapacity; i++) {
+      flock.addMover(
+        p.random(p.width * 0.3, p.width * 0.7),
+        p.random(p.height * 0.3, p.height * 0.7),
+        10
+      );
+    }
+
+    p.redraw();
+  };
+
+  p.setup = function () {
+    p.noLoop();
+
+    let cnv = p.createCanvas(850, 600);
+    cnv.parent('sec2');
+    let container = document.getElementById('interactive-controls-sec2');
+
+    sepSlider = p.createSlider(0.5, 2.5, 1, 0.25);
+    sepSlider.parent(container);
+    sepLabel = p.createSpan('Separation: ' + sepSlider.value())
+    sepLabel.parent(container);
+
+    alignSlider = p.createSlider(0.5, 2.5, 0.5, 0.25);
+    alignSlider.parent(container);
+    alignLabel = p.createSpan('Align:' + alignSlider.value());
+    alignLabel.parent(container);
+
+    cohereSlider = p.createSlider(0.5, 2.5, 0.5, 0.25);
+    cohereSlider.parent(container);
+    cohereLabel = p.createSpan('Cohere:' + cohereSlider.value());
+    cohereLabel.parent(container);
+
+    sepSlider.input(() => {
+      sepWeight = sepSlider.value();
+      sepLabel.html('Separation: ' + sepWeight);
+    });
+
+    alignSlider.input(() => {
+      alignWeight = alignSlider.value();
+      alignLabel.html('Align: ' + alignWeight);
+    });
+
+    cohereSlider.input(() => {
+      cohereWeight = cohereSlider.value();
+      cohereLabel.html('Cohere: ' + cohereWeight);
+    });
+
+    p.initializeSketch();
+  };
+
+  p.draw = function () {
+    p.background(220);
+    flock.run();
+  };
+
+};
+
+let sec2Sketch = new p5(FlockerScript, 'sec2');