Merge pull request #92 from nature-of-code/chapter3-rewrites

Changes to chapter 3 examples

Author: shiffman

chp03_oscillation/NOC_3_02_forces_angular_motion/attractor.js

@@ -2,37 +2,39 @@
 // Daniel Shiffman
 // http://natureofcode.com
 
-// An object for a draggable attractive body in our world
-
 class Attractor {
-
   constructor() {
     this.position = createVector(width / 2, height / 2);
     this.mass = 20;
     this.G = 1;
   }
 
-  calculateAttraction(m) {
+  attract(mover) {
     // Calculate direction of force
-    let force = p5.Vector.sub(this.position, m.position);
+    let force = p5.Vector.sub(this.position, mover.position);
     // Distance between objects
     let distance = force.mag();
     // Limiting the distance to eliminate "extreme" results for very close or very far objects
     distance = constrain(distance, 5, 25);
-    // Normalize vector (distance doesn't matter here, we just want this vector for direction)
-    force.normalize();
+
     // Calculate gravitional force magnitude
-    let strength = (this.G * this.mass * m.mass) / (distance * distance);
+    let strength = (this.G * this.mass * mover.mass) / (distance * distance);
     // Get force vector --> magnitude * direction
-    force.mult(strength);
+    force.setMag(strength);
     return force;
   }
 
+  // Method to display
   display() {
     ellipseMode(CENTER);
-    strokeWeight(2);
     stroke(0);
-    fill(127);
-    ellipse(this.position.x, this.position.y, this.mass * 2, this.mass * 2);
+    if (this.dragging) {
+      fill(50);
+    } else if (this.rollover) {
+      fill(100);
+    } else {
+      fill(175, 200);
+    }
+    ellipse(this.position.x, this.position.y, this.mass * 2);
   }
 }

chp03_oscillation/NOC_3_02_forces_angular_motion/mover.js

@@ -4,8 +4,9 @@
 
 class Mover {
 
-  constructor(m, x, y) {
-    this.mass = m;
+  constructor(x, y, mass) {
+    this.mass = mass;
+    this.radius = this.mass * 8;
     this.position = createVector(x, y);
     this.angle = 0;
     this.aVelocity = 0;
@@ -36,7 +37,8 @@ class Mover {
     push();
     translate(this.position.x, this.position.y);
     rotate(this.angle);
-    rect(0, 0, this.mass * 16, this.mass * 16);
+    ellipse(0, 0, this.radius * 2);
+    line(0, 0, this.radius, 0);
     pop();
   }
 }

chp03_oscillation/NOC_3_02_forces_angular_motion/sketch.js

@@ -9,7 +9,7 @@ function setup() {
   createCanvas(640, 360);
 
   for (let i = 0; i < 20; i++) {
-    movers.push(new Mover(random(0.1, 2), random(width), random(height)));
+    movers.push(new Mover(random(width), random(height), random(0.1, 2)));
   }
   attractor = new Attractor();
 }
@@ -20,7 +20,7 @@ function draw() {
   attractor.display();
 
   for (let i = 0; i < movers.length; i++) {
-    let force = attractor.calculateAttraction(movers[i]);
+    let force = attractor.attract(movers[i]);
     movers[i].applyForce(force);
 
     movers[i].update();

chp03_oscillation/NOC_3_10_PendulumExample/pendulum.js

@@ -10,11 +10,11 @@
 // This constructor could be improved to allow a greater variety of pendulums
 class Pendulum {
 
-  constructor(origin_, r_) {
+  constructor(x, y, r) {
     // Fill all variables
-    this.origin = origin_.copy();
+    this.origin = createVector(x, y);
     this.position = createVector();
-    this.r = r_;
+    this.r = r;
     this.angle = PI / 4;
 
     this.aVelocity = 0.0;
@@ -25,13 +25,6 @@ class Pendulum {
     this.dragging = false;
   }
 
-
-  go() {
-    this.update();
-    this.drag(); // for user interaction
-    this.display();
-  }
-
   // Function to update position
   update() {
     // As long as we aren't dragging the pendulum, let it swing!

chp03_oscillation/NOC_3_10_PendulumExample/sketch.js

@@ -18,24 +18,25 @@
 
 // For a more substantial explanation, visit:
 // http://www.myphysicslab.com/pendulum1.html
-let p;
+let pendulum;
 
 function setup() {
   createCanvas(640, 360);
   // Make a new Pendulum with an origin position and armlength
-  p = new Pendulum(createVector(width / 2, 0), 175);
-
+  pendulum = new Pendulum(width / 2, 0, 175);
 }
 
 function draw() {
   background(51);
-  p.go();
+  pendulum.update();
+  pendulum.drag(); // for user interaction
+  pendulum.display();
 }
 
 function mousePressed() {
-  p.clicked(mouseX, mouseY);
+  pendulum.clicked(mouseX, mouseY);
 }
 
 function mouseReleased() {
-  p.stopDragging();
+  pendulum.stopDragging();
 }

chp03_oscillation/NOC_3_10_PendulumExampleSimplified/pendulum.js

@@ -9,9 +9,9 @@
 // This constructor could be improved to allow a greater variety of pendulums
 class Pendulum {
 
-  constructor(origin, r) {
+  constructor(x, y, r) {
     // Fill all variables
-    this.origin = origin.copy();
+    this.origin = createVector(x, y);
     this.position = createVector();
     this.r = r;
     this.angle = PI / 4;
@@ -21,10 +21,6 @@ class Pendulum {
     this.damping = 0.995; // Arbitrary damping
     this.ballr = 48.0; // Arbitrary ball radius
   }
-  go() {
-    this.update();
-    this.display();
-  };
 
   // Function to update position
   update() {

chp03_oscillation/NOC_3_10_PendulumExampleSimplified/sketch.js

@@ -18,16 +18,18 @@
 
 // For a more substantial explanation, visit:
 // http://www.myphysicslab.com/pendulum1.html
-let p;
+let pendulum;
 
 function setup() {
   createCanvas(640, 360);
   // Make a new Pendulum with an origin position and armlength
-  p = new Pendulum(createVector(width / 2, 0), 175);
+  pendulum = new Pendulum(width / 2, 0, 175);
 
 }
 
 function draw() {
   background(51);
-  p.go();
+  pendulum.update();
+  pendulum.display();
+
 }

chp03_oscillation/NOC_3_11_spring/spring.js

@@ -7,15 +7,15 @@
 
 class Spring {
 
-  constructor(x, y, l) {
+  constructor(x, y, length) {
     this.anchor = createVector(x, y);
-    this.restLength = l;
+    this.restLength = length;
     this.k = 0.2;
   }
   // Calculate and apply spring force
-  connect(b) {
+  connect(bob) {
     // Vector pointing from anchor to bob location
-    let force = p5.Vector.sub(b.position, this.anchor);
+    let force = p5.Vector.sub(bob.position, this.anchor);
     // What is distance
     let d = force.mag();
     // Stretch is difference between current distance and rest length
@@ -25,7 +25,7 @@ class Spring {
     // F = k * stretch
     force.normalize();
     force.mult(-1 * this.k * stretch);
-    b.applyForce(force);
+    bob.applyForce(force);
   }
 
   // Constrain the distance between bob and anchor between min and max
@@ -74,8 +74,7 @@ class Spring {
     stroke(255);
     fill(127);
     strokeWeight(2);
-    rectMode(CENTER);
-    rect(this.anchor.x, this.anchor.y, 10, 10);
+    ellipse(this.anchor.x, this.anchor.y, 10);
   }
 
   displayLine(b) {