Merging notion updates - Update newly added screenshots in Chapter 6

[Notion] Update docs 08.16.2023 - Update newly added screenshots in Chapter 6

content/06_libraries.html

@@ -290,7 +290,7 @@ Runner.run(engine);</pre>
 <div data-type="example">
   <h3 id="example-61-matterjs-default-render-and-runner">Example 6.1: Matter.js Default Render and Runner</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/GXRa48IQO" data-example-path="examples/06_libraries/6_1_default_matter_js"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/GXRa48IQO" data-example-path="examples/06_libraries/6_1_default_matter_js"><img src="examples/06_libraries/6_1_default_matter_js/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -364,7 +364,7 @@ function setup() {
 <div data-type="example">
   <h3 id="example-62-a-comfortable-and-cozy-p5js-sketch-that-needs-a-little-matterjs">Example 6.2: A Comfortable and Cozy p5.js Sketch That Needs a Little Matter.js</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/D26YvXr_S" data-example-path="examples/06_libraries/6_2_boxes_exercise"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/D26YvXr_S" data-example-path="examples/06_libraries/6_2_boxes_exercise"><img src="examples/06_libraries/6_2_boxes_exercise/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -699,7 +699,7 @@ Composite.add(engine.world, constraint);</pre>
 <div data-type="example">
   <h3 id="example-66-matterjs-pendulum">Example 6.6: Matter.js Pendulum</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/YT6u0GqtH" data-example-path="examples/06_libraries/6_6_matter_js_pendulum"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/YT6u0GqtH" data-example-path="examples/06_libraries/6_6_matter_js_pendulum"><img src="examples/06_libraries/6_6_matter_js_pendulum/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -757,7 +757,7 @@ Composite.add(engine.world, constraint);</pre>
   <h3 id="exercise-65">Exercise 6.5</h3>
   <p>Create a simulation of a bridge by using constraints to connect a sequence of circles (or rectangles) as shown below. Use the <code>isStatic</code> property to lock the endpoints in place. Experiment with different values to make the bridge more or less “springy.” The joints themselves have no physical geometry, so in order for your bridge not to have holes, spacing between the nodes will be important.</p>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/7U7yrrbNz" data-example-path="examples/06_libraries/exercise_6_5_bridge"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/7U7yrrbNz" data-example-path="examples/06_libraries/exercise_6_5_bridge"><img src="examples/06_libraries/exercise_6_5_bridge/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -786,7 +786,7 @@ Composite.add(engine.world, constraint);</pre>
 <div data-type="example">
   <h3 id="example-67-spinning-windmill">Example 6.7: Spinning Windmill</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/D96JFWc3-" data-example-path="examples/06_libraries/6_7_windmill"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/D96JFWc3-" data-example-path="examples/06_libraries/6_7_windmill"><img src="examples/06_libraries/6_7_windmill/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -870,7 +870,7 @@ Composite.add(engine.world, mouseConstraint);</pre>
 <div data-type="example">
   <h3 id="example-68-mouseconstraint-demonstration">Example 6.8: MouseConstraint Demonstration</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/mTRKgn44p" data-example-path="examples/06_libraries/6_8_mouse_constraint"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/mTRKgn44p" data-example-path="examples/06_libraries/6_8_mouse_constraint"><img src="examples/06_libraries/6_8_mouse_constraint/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -904,7 +904,7 @@ Composite.add(engine.world, mouseConstraint);</pre>
 <div data-type="example">
   <h3 id="example-69-attraction-with-matterjs">Example 6.9 Attraction with Matter.js</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/16sblEvax" data-example-path="examples/06_libraries/6_9_matter_js_attraction"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/16sblEvax" data-example-path="examples/06_libraries/6_9_matter_js_attraction"><img src="examples/06_libraries/6_9_matter_js_attraction/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
   <pre class="codesplit" data-code-language="javascript">class Attractor {
@@ -949,7 +949,7 @@ engine.gravity = Vector.create(0, 0);</pre>
   <h3 id="exercise-67">Exercise 6.7</h3>
   <p>Incorporate <code>Body.applyForce()</code> into a new <code>spin()</code> method for Example 6.7’s <code>Windmill</code> class to simulate a motor continuously rotating the windmill.</p>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/cN6zF325F" data-example-path="examples/06_libraries/exercise_6_7_windmill_motor"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/cN6zF325F" data-example-path="examples/06_libraries/exercise_6_7_windmill_motor"><img src="examples/06_libraries/exercise_6_7_windmill_motor/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -1007,7 +1007,7 @@ function mousePressed() {
 <div data-type="example">
   <h3 id="example-610-collision-events">Example 6.10: Collision Events</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/3cREe4udP" data-example-path="examples/06_libraries/6_10_collision_events"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/3cREe4udP" data-example-path="examples/06_libraries/6_10_collision_events"><img src="examples/06_libraries/6_10_collision_events/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -1286,7 +1286,7 @@ let spring = new VerletSpring2D(particle1, particle2, length, strength);</pre>
 <div data-type="example">
   <h3 id="example-611-simple-spring-with-toxiclibs">Example 6.11: Simple Spring with toxiclibs</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/CSzXIfoWH" data-example-path="examples/06_libraries/6_11_simple_spring_with_toxiclibs"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/CSzXIfoWH" data-example-path="examples/06_libraries/6_11_simple_spring_with_toxiclibs"><img src="examples/06_libraries/6_11_simple_spring_with_toxiclibs/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -1405,7 +1405,7 @@ for (let i = 0; i &#x3C; total - 1; i++) {
 <div data-type="example">
   <h3 id="example-612-soft-swinging-pendulum">Example 6.12: Soft Swinging Pendulum</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/cIygo3QeX" data-example-path="examples/06_libraries/6_12_soft_string"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/cIygo3QeX" data-example-path="examples/06_libraries/6_12_soft_string"><img src="examples/06_libraries/6_12_soft_string/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -1431,7 +1431,7 @@ for (let i = 0; i &#x3C; total - 1; i++) {
   <h3 id="exercise-610">Exercise 6.10</h3>
   <p>Create a hanging cloth simulation using particles and springs. You’ll need to connect each particle with its vertical and horizontal neighbors.</p>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/x3FXo0wNZ" data-example-path="examples/06_libraries/exercise_6_13_cloth_simulation"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/x3FXo0wNZ" data-example-path="examples/06_libraries/exercise_6_13_cloth_simulation"><img src="examples/06_libraries/exercise_6_13_cloth_simulation/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -1502,7 +1502,7 @@ function setup() {
 <div data-type="example">
   <h3 id="example-6x-soft-body-character">Example 6.x Soft Body Character</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/-1beeiwUK" data-example-path="examples/06_libraries/soft_body_character_copy"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/-1beeiwUK" data-example-path="examples/06_libraries/soft_body_character_copy"><img src="examples/06_libraries/soft_body_character_copy/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -1569,7 +1569,7 @@ function draw() {
     Design your own soft body character with additional vertices and connections. What other design elements can you add? What other forces and interactions can you incorporate?
   </h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/hQw1Ih97c" data-example-path="examples/06_libraries/soft_body_character_enhanced_copy"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/hQw1Ih97c" data-example-path="examples/06_libraries/exercise_6_11_soft_body_character_enhanced"><img src="examples/06_libraries/exercise_6_11_soft_body_character_enhanced/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -1656,7 +1656,7 @@ function draw() {
 <div data-type="example">
   <h3 id="example-613-cluster">Example 6.13: Cluster</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/_tbPaFqVX" data-example-path="examples/06_libraries/6_13_force_directed_graph"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/_tbPaFqVX" data-example-path="examples/06_libraries/6_13_force_directed_graph"><img src="examples/06_libraries/6_13_force_directed_graph/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -1687,7 +1687,7 @@ function draw() {
   <h3 id="exercise-612">Exercise 6.12</h3>
   <p>Expand the force-directed graph to have more than one <code>Cluster</code> object. Use a <code>VerletMinDistanceSpring2D</code> object to connect cluster to cluster. What kind of data might you visualize with this technique?</p>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/WexUSx7dN" data-example-path="examples/06_libraries/exercise_6_15_force_directed_graph"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/WexUSx7dN" data-example-path="examples/06_libraries/exercise_6_12_force_directed_graph"><img src="examples/06_libraries/exercise_6_12_force_directed_graph/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -1726,7 +1726,7 @@ let behavior = new AttractionBehavior(particle, distance, strength);</pre>
 <div data-type="example">
   <h3 id="example-614-attraction-and-repulsion-behaviors">Example 6.14: Attraction (and Repulsion) Behaviors</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/tjIs8XaXP" data-example-path="examples/06_libraries/6_14_attraction_behaviors"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/tjIs8XaXP" data-example-path="examples/06_libraries/6_14_attraction_behaviors"><img src="examples/06_libraries/6_14_attraction_behaviors/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>

content/examples/06_libraries/6_1_default_matter_js/sketch.js

@@ -7,6 +7,7 @@ const { Engine, Bodies, Composite, Body, Vector } = Matter;
 
 function setup() {
   const canvas = createCanvas(640, 240);
+ 
 
   // Make the Engine
   let engine = Engine.create();
@@ -39,4 +40,4 @@ function setup() {
   let runner = Matter.Runner.create();
   // run the engine
   Matter.Runner.run(runner, engine);
-}
+}

content/examples/06_libraries/6_7_windmill/sketch.js

@@ -30,3 +30,5 @@ function draw() {
     }
   }
 }
+
+

content/examples/06_libraries/6_9_matter_js_attraction/sketch.js

@@ -36,3 +36,6 @@ function draw() {
 
   attractor.show();
 }
+
+
+

content/examples/06_libraries/exercise_6_11_soft_body_character_enhanced/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/hapticdata/toxiclibsjs@0.3.2/build/toxiclibs.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <script src="sketch.js"></script>
+    <script src="particle.js"></script>
+    <script src="spring.js"></script>
+  </body>
+</html>

content/examples/06_libraries/exercise_6_11_soft_body_character_enhanced/particle.js

@@ -0,0 +1,16 @@
+class Particle extends VerletParticle2D {
+  constructor(x, y) {
+    super(x, y);
+    this.r = 2;
+    physics.addParticle(this);
+  }
+
+  show() {
+    fill(252, 238, 33);
+    strokeWeight(1);
+    circle(this.x, this.y, this.r * 12);
+
+    strokeWeight(this.r * 4);
+    point(this.x, this.y);
+  }
+}

content/examples/06_libraries/exercise_6_11_soft_body_character_enhanced/sketch.js

@@ -0,0 +1,141 @@
+// Coding Train / Daniel Shiffman
+
+const { VerletPhysics2D, VerletParticle2D, VerletSpring2D } = toxi.physics2d;
+
+const { GravityBehavior } = toxi.physics2d.behaviors;
+
+const { Vec2D, Rect } = toxi.geom;
+
+let physics;
+
+let particles = [];
+let eyes = [];
+let springs = [];
+
+let showSprings = false;
+
+function keyPressed() {
+  if (key == ' ') {
+    showSprings = !showSprings;
+  }
+}
+
+function setup() {
+  createCanvas(640, 240);
+
+  physics = new VerletPhysics2D();
+
+  let bounds = new Rect(0, 0, width, height);
+  physics.setWorldBounds(bounds);
+
+  particles.push(new Particle(200, 25));
+  particles.push(new Particle(250, 25));
+  particles.push(new Particle(300, 25));
+  particles.push(new Particle(350, 25));
+  particles.push(new Particle(400, 25));
+  particles.push(new Particle(350, 125));
+  particles.push(new Particle(400, 225));
+  particles.push(new Particle(350, 225));
+  particles.push(new Particle(300, 225));
+  particles.push(new Particle(250, 225));
+  particles.push(new Particle(200, 225));
+  particles.push(new Particle(250, 125));
+
+  eyes.push(new Particle(275, 75));
+  eyes.push(new Particle(325, 75));
+  eyes.push(new Particle(250, -25));
+  eyes.push(new Particle(350, -25));
+
+  for (let i = 0; i < particles.length; i++) {
+    for (let j = i + 1; j < particles.length; j++) {
+      if (i !== j) {
+        let a = particles[i];
+        let b = particles[j];
+        // let b = particles[(i + 1) % particles.length];
+        springs.push(new Spring(a, b));
+      }
+    }
+  }
+
+  for (let particle of particles) {
+    springs.push(new Spring(particle, eyes[0]));
+    springs.push(new Spring(particle, eyes[1]));
+  }
+
+  springs.push(new Spring(eyes[2], particles[1]));
+  springs.push(new Spring(eyes[3], particles[3]));
+
+  springs.push(new Spring(eyes[2], particles[3]));
+  springs.push(new Spring(eyes[3], particles[1]));
+
+  springs.push(new Spring(eyes[2], particles[0]));
+  springs.push(new Spring(eyes[3], particles[4]));
+
+  springs.push(new Spring(eyes[3], particles[2]));
+  springs.push(new Spring(eyes[2], particles[2]));
+
+  springs.push(new Spring(eyes[2], eyes[3]));
+
+  springs.push(new Spring(eyes[0], eyes[3]));
+  springs.push(new Spring(eyes[0], eyes[2]));
+  springs.push(new Spring(eyes[1], eyes[2]));
+  springs.push(new Spring(eyes[1], eyes[3]));
+}
+
+function draw() {
+  background(255);
+
+  physics.update();
+
+  stroke(112, 50, 126);
+  if (showSprings) stroke(112, 50, 126, 100);
+
+  strokeWeight(4);
+  line(particles[1].x, particles[1].y, eyes[2].x, eyes[2].y);
+  line(particles[3].x, particles[3].y, eyes[3].x, eyes[3].y);
+  strokeWeight(16);
+  point(eyes[2].x, eyes[2].y);
+  point(eyes[3].x, eyes[3].y);
+
+  fill(45, 197, 244);
+  if (showSprings) fill(45, 197, 244, 100);
+  strokeWeight(2);
+  beginShape();
+  for (let particle of particles) {
+    vertex(particle.x, particle.y);
+  }
+  endShape(CLOSE);
+
+  //   fill(127, 127);
+  //   stroke(0);
+  //   strokeWeight(2);
+  //   beginShape();
+  //   for (let particle of particles) {
+  //     vertex(particle.x, particle.y);
+  //   }
+  //   endShape(CLOSE);
+
+  // for (let particle of particles) {
+  //   particle.show();
+  // }
+
+  eyes[0].show();
+  eyes[1].show();
+
+  // for (let eye of eyes) {
+  //   eye.show();
+  // }
+
+  if (showSprings) {
+    for (let spring of springs) {
+      spring.show();
+    }
+  }
+
+  if (mouseIsPressed) {
+    particles[0].lock();
+    particles[0].x = mouseX;
+    particles[0].y = mouseY;
+    particles[0].unlock();
+  }
+}

content/examples/06_libraries/exercise_6_11_soft_body_character_enhanced/spring.js

@@ -0,0 +1,13 @@
+class Spring extends VerletSpring2D {
+  constructor(a, b, strength) {
+    let length = dist(a.x, a.y, b.x, b.y);
+    super(a, b, length, 0.001);
+    physics.addSpring(this);
+  }
+
+  show() {
+    strokeWeight(1);
+    stroke(0, 127);
+    line(this.a.x, this.a.y, this.b.x, this.b.y);
+  }
+}

content/examples/06_libraries/exercise_6_11_soft_body_character_enhanced/style.css

@@ -0,0 +1,4 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}

content/examples/06_libraries/exercise_6_12_force_directed_graph/cluster.js

@@ -0,0 +1,79 @@
+// The Nature of Code
+
+// Force directed graph
+// Heavily based on: http://code.google.com/p/fidgen/
+
+class Cluster {
+  // We initialize a Cluster with a number of nodes, a diameter, and centerpoint
+  constructor(n, length) {
+    // A cluster is a grouping of nodes
+    this.particles = [];
+    this.length = length;
+
+    // Create the nodes
+    for (let i = 0; i < n; i++) {
+      // We can't put them right on top of each other
+      let x = width / 2 + random(-1, 1);
+      let y = height / 2 + random(-1, 1);
+      this.particles.push(new Particle(x, y, 4));
+    }
+
+    // Connect all the nodes with a Spring
+    for (let i = 0; i < this.particles.length - 1; i++) {
+      let particle_i = this.particles[i];
+      for (let j = i + 1; j < this.particles.length; j++) {
+        let particle_j = this.particles[j];
+        // A Spring needs two particles, a resting length, and a strength
+        physics.addSpring(
+          new VerletSpring2D(particle_i, particle_j, length, 0.01)
+        );
+      }
+    }
+  }
+
+  show() {
+    // Show all the nodes
+    for (let n of this.particles) {
+      n.show();
+    }
+  }
+
+
+  showConnections(other) {
+    if (!other) other = this;
+    stroke(0, 50);
+    strokeWeight(1);
+    for (let i = 0; i < this.particles.length; i++) {
+      let pi = this.particles[i];
+      for (let j = 0; j < other.particles.length; j++) {
+        let pj = other.particles[j];
+        line(pi.x, pi.y, pj.x, pj.y);
+      }
+    }
+  }
+
+  // This functons connects one cluster to another
+  // Each point of one cluster connects to each point of the other cluster
+  // The connection is a "VerletMinDistanceSpring"
+  // A VerletMinDistanceSpring is a spring which only enforces its rest length if the
+  // current distance is less than its rest length. This is handy if you just want to
+  // ensure objects are at least a certain distance from each other, but don't
+  // care if it's bigger than the enforced minimum.
+  connect(other) {
+    for (let i = 0; i < this.particles.length; i++) {
+      let pi = this.particles[i];
+      for (let j = 0; j < other.particles.length; j++) {
+        let pj = other.particles[j];
+        // Create the spring
+        physics.addSpring(
+          new VerletMinDistanceSpring2D(
+            pi,
+            pj,
+            (this.length + other.length) * 0.5,
+            0.05
+          )
+        );
+      }
+    }
+  }
+}

content/examples/06_libraries/exercise_6_12_force_directed_graph/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/hapticdata/toxiclibsjs@0.3.2/build/toxiclibs.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+    <script language="javascript" type="text/javascript" src="sketch.js"></script>
+  	<script language="javascript" type="text/javascript" src="particle.js"></script>
+  	<script language="javascript" type="text/javascript" src="cluster.js"></script>
+	</body>
+</html>

content/examples/06_libraries/exercise_6_12_force_directed_graph/particle.js

@@ -0,0 +1,12 @@
+class Particle extends VerletParticle2D {
+  constructor(x, y, r) {
+    super(x, y);
+    this.r = r;
+  }
+
+  show() {
+    fill(127);
+    stroke(0);
+    circle(this.x, this.y, this.r * 2);
+  }
+}

content/examples/06_libraries/exercise_6_12_force_directed_graph/sketch.js

@@ -0,0 +1,91 @@
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+
+let {
+  VerletPhysics2D,
+  VerletParticle2D,
+  VerletSpring2D,
+  VerletMinDistanceSpring2D,
+} = toxi.physics2d;
+
+// Reference to physics world
+let physics;
+
+// A list of cluster objects
+let clusters;
+
+// Boolean that indicates whether we draw connections or not
+let showPhysics = true;
+let showParticles = true;
+
+function setup() {
+  createCanvas(640, 240);
+
+  // Initialize the physics
+  physics = new VerletPhysics2D();
+
+  // Spawn a new random graph
+  newGraph();
+}
+
+// Spawn a new random graph
+function newGraph() {
+  // Clear physics
+  physics.clear();
+
+  // Create new ArrayList (clears old one)
+  clusters = [];
+
+  // Create 8 random clusters
+  for (let i = 0; i < 8; i++) {
+    clusters.push(new Cluster(random(3, 8), random(20, 100)));
+  }
+
+  //	All clusters connect to all clusters
+  for (let i = 0; i < clusters.length; i++) {
+    for (let j = i + 1; j < clusters.length; j++) {
+      clusters[i].connect(clusters[j]);
+    }
+  }
+}
+
+function draw() {
+  // Update the physics world
+  physics.update();
+
+  background(255);
+
+  // Display all points
+  if (showParticles) {
+    for (let cluster of clusters) {
+      cluster.show();
+    }
+  }
+
+  // If we want to see the physics
+  if (showPhysics) {
+    for (let i = 0; i < clusters.length; i++) {
+      // Cluster internal connections
+      clusters[i].showConnections();
+
+      // Cluster connections to other clusters
+      for (let j = i + 1; j < clusters.length; j++) {
+        clusters[i].showConnections(clusters[j]);
+      }
+    }
+  }
+}
+
+// Key press commands
+function keyPressed() {
+  if (key == "c") {
+    showPhysics = !showPhysics;
+    if (!showPhysics) showParticles = true;
+  } else if (key == "p") {
+    showParticles = !showParticles;
+    if (!showParticles) showPhysics = true;
+  } else if (key == "n") {
+    newGraph();
+  }
+}

content/examples/06_libraries/exercise_6_12_force_directed_graph/style.css

@@ -0,0 +1,4 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}

content/examples/06_libraries/exercise_6_13_cloth_simulation/sketch.js

@@ -93,3 +93,5 @@ class Spring extends VerletSpring2D {
     line(this.a.x, this.a.y, this.b.x, this.b.y);
   }
 }
+
+