#154 porting basics objects

shiffman · shiffman · commit fc562ca66aee · 2015-03-04T10:55:49.000Z
diff --git a/content/examples_p5/Basics/Objects/CompositeObjects/CompositeObjects.js b/content/examples_p5/Basics/Objects/CompositeObjects/CompositeObjects.js
@@ -6,17 +6,16 @@
  * abstraction within a program.
  */
 
-EggRing er1, er2;
+var er1, er2;
 
-
-void setup() {
-  size(640, 360);
+function setup() {
+  createCanvas(640, 360);
   er1 = new EggRing(width*0.45, height*0.5, 0.1, 120);
   er2 = new EggRing(width*0.65, height*0.8, 0.05, 180);
 }
 
 
-void draw() {
+function draw() {
   background(0);
   er1.transmit();
   er2.transmit();
diff --git a/content/examples_p5/Basics/Objects/CompositeObjects/Egg.js b/content/examples_p5/Basics/Objects/CompositeObjects/Egg.js
@@ -1,36 +1,30 @@
-class Egg {
-  float x, y; // X-coordinate, y-coordinate
-  float tilt; // Left and right angle offset
-  float angle; // Used to define the tilt
-  float scalar; // Height of the egg
+// Constructor
+function Egg(xpos, ypos, t, s) {
+  this.x = xpos;
+  this.y = ypos;
+  this.tilt = t;
+  this.scalar = s / 100.0;
+  this.angle = 0;
 
-  // Constructor
-  Egg(float xpos, float ypos, float t, float s) {
-    x = xpos;
-    y = ypos;
-    tilt = t;
-    scalar = s / 100.0;
+  this.wobble = function() {
+    this.tilt = cos(this.angle) / 8;
+    this.angle += 0.1;
   }
 
-  void wobble() {
-    tilt = cos(angle) / 8;
-    angle += 0.1;
-  }
-
-  void display() {
+  this.display = function() {
     noStroke();
     fill(255);
-    pushMatrix();
-    translate(x, y);
-    rotate(tilt);
-    scale(scalar);
+    push();
+    translate(this.x, this.y);
+    rotate(this.tilt);
+    scale(this.scalar);
     beginShape();
     vertex(0, -100);
     bezierVertex(25, -100, 40, -65, 40, -40);
     bezierVertex(40, -15, 25, 0, 0, 0);
     bezierVertex(-25, 0, -40, -15, -40, -40);
     bezierVertex(-40, -65, -25, -100, 0, -100);
     endShape();
-    popMatrix();
+    pop();
   }
 }
diff --git a/content/examples_p5/Basics/Objects/CompositeObjects/EggRing.js b/content/examples_p5/Basics/Objects/CompositeObjects/EggRing.js
@@ -1,19 +1,16 @@
-class EggRing {
-  Egg ovoid;
-  Ring circle = new Ring();
 
-  EggRing(float x, float y, float t, float sp) {
-    ovoid = new Egg(x, y, t, sp);
-    circle.start(x, y - sp/2);
-  }
-
-  void transmit() {
-    ovoid.wobble();
-    ovoid.display();
-    circle.grow();
-    circle.display();
-    if (circle.on == false) {
-      circle.on = true;
+function EggRing(x,  y,  t,  sp) {
+  this.ovoid = new Egg(x, y, t, sp);
+  this.circle = new Ring();
+  this.circle.start(x, y - sp/2);
+  
+  this.transmit = function() {
+    this.ovoid.wobble();
+    this.ovoid.display();
+    this.circle.grow();
+    this.circle.display();
+    if (this.circle.on == false) {
+      this.circle.on = true;
     }
   }
 }
diff --git a/content/examples_p5/Basics/Objects/CompositeObjects/Ring.js b/content/examples_p5/Basics/Objects/CompositeObjects/Ring.js
@@ -1,31 +1,32 @@
-class Ring {
-  
-  float x, y; // X-coordinate, y-coordinate
-  float diameter; // Diameter of the ring
-  boolean on = false; // Turns the display on and off
-  
-  void start(float xpos, float ypos) {
-    x = xpos;
-    y = ypos;
-    on = true;
-    diameter = 1;
+function Ring() {
+
+  this.x = 0;
+  this.y = 0;
+  this.on = false;
+  this.diameter = 0;
+
+  this.start = function(xpos,  ypos) {
+    this.x = xpos;
+    this.y = ypos;
+    this.on = true;
+    this.diameter = 1;
   }
   
-  void grow() {
-    if (on == true) {
-      diameter += 0.5;
-      if (diameter > width*2) {
-        diameter = 0.0;
+  this.grow = function() {
+    if (this.on == true) {
+      this.diameter += 0.5;
+      if (this.diameter > width*2) {
+        this.diameter = 0.0;
       }
     }
   }
   
-  void display() {
-    if (on == true) {
+  this.display = function() {
+    if (this.on == true) {
       noFill();
       strokeWeight(4);
       stroke(155, 153);
-      ellipse(x, y, diameter, diameter);
+      ellipse(this.x, this.y, this.diameter, this.diameter);
     }
   }
 }
diff --git a/content/examples_p5/Basics/Objects/Inheritance/Inheritance.js b/content/examples_p5/Basics/Objects/Inheritance/Inheritance.js
@@ -7,66 +7,74 @@
  * inherits from is called a superclass. A subclass extends the superclass.
  */
 
-SpinSpots spots;
-SpinArm arm;
+var spots;
+var arm;
 
-void setup() {
-  size(640, 360);
+function setup() {
+  createCanvas(640, 360);
   arm = new SpinArm(width/2, height/2, 0.01);
   spots = new SpinSpots(width/2, height/2, -0.02, 90.0);
 }
 
-void draw() {
+function draw() {
   background(204);
   arm.update();
   arm.display();
   spots.update();
   spots.display();
 }
 
-class Spin {
-  float x, y, speed;
-  float angle = 0.0;
-  Spin(float xpos, float ypos, float s) {
-    x = xpos;
-    y = ypos;
-    speed = s;
-  }
-  void update() {
-    angle += speed;
+
+function Spin(xpos, ypos, s) {
+  this.x = xpos;
+  this.y = ypos;
+  this.speed = s;
+  this.angle = 0;
+  
+  this.update = function() {
+    this.angle += this.speed;
   }
 }
 
-class SpinArm extends Spin {
-  SpinArm(float x, float y, float s) {
-    super(x, y, s);
-  }
-  void display() {
+// Child class constructor
+function SpinArm(x, y, s) {
+  Spin.call(this, x, y, s);
+
+  // Override the display method
+  this.display = function(){
     strokeWeight(1);
     stroke(0);
-    pushMatrix();
-    translate(x, y);
-    angle += speed;
-    rotate(angle);
+    push();
+    translate(this.x, this.y);
+    this.angle += this.speed;
+    rotate(this.angle);
     line(0, 0, 165, 0);
-    popMatrix();
-  }
-}
+    pop();
+  };
+};
 
-class SpinSpots extends Spin {
-  float dim;
-  SpinSpots(float x, float y, float s, float d) {
-    super(x, y, s);
-    dim = d;
-  }
-  void display() {
+// Inherit from the parent class
+SpinArm.prototype = Object.create(Spin.prototype);
+this.constructor = SpinArm;
+
+// Child class constructor
+function SpinSpots(x, y, s, d) {
+  this.dim = d;
+  Spin.call(this, x, y, s);
+
+  // Override the display method
+  this.display = function(){
     noStroke();
-    pushMatrix();
-    translate(x, y);
-    angle += speed;
-    rotate(angle);
-    ellipse(-dim/2, 0, dim, dim);
-    ellipse(dim/2, 0, dim, dim);
-    popMatrix();
-  }
-}
+    push();
+    translate(this.x, this.y);
+    this.angle += this.speed;
+    rotate(this.angle);
+    ellipse(-this.dim/2, 0, this.dim, this.dim);
+    ellipse(this.dim/2, 0, this.dim, this.dim);
+    pop();
+  };
+};
+
+// Inherit from the parent class
+SpinSpots.prototype = Object.create(Spin.prototype);
+this.constructor = SpinSpots;
diff --git a/content/examples_p5/Basics/Objects/MultipleConstructors/MultipleConstructors.js b/content/examples_p5/Basics/Objects/MultipleConstructors/MultipleConstructors.js
@@ -7,10 +7,10 @@
  * one or a few.
  */
 
-Spot sp1, sp2;
+var sp1, sp2;
 
-void setup() {
-  size(640, 360);
+function setup() {
+  createCanvas(640, 360);
   background(204);
   noLoop();
   // Run the constructor without parameters
@@ -19,31 +19,22 @@ void setup() {
   sp2 = new Spot(width*0.5, height*0.5, 120);
 }
 
-void draw() {
+function draw() {
   sp1.display();
   sp2.display();
-}
+} 
 
-class Spot {
-  float x, y, radius;
-  
-  // First version of the Spot constructor;
-  // the fields are assigned default values
-  Spot() {
-    radius = 40;
-    x = width*0.25;
-    y = height*0.5;
-  }
+// First version of the Spot constructor;
+// the fields are assigned default values
+// Second version of the Spot constructor;
+// the fields are assigned with parameters
+function Spot(xpos, ypos, r) {
+  this.radius = r || 40;
+  this.x = xpos || width*0.25;
+  this.y = ypos || height*0.5;
   
-  // Second version of the Spot constructor;
-  // the fields are assigned with parameters
-  Spot(float xpos, float ypos, float r) {
-    x = xpos;
-    y = ypos;
-    radius = r;
-  }
-  void display() {
-    ellipse(x, y, radius*2, radius*2);
+  this.display = function() {
+    ellipse(this.x, this.y, this.radius*2, this.radius*2);
   }
   
 }
diff --git a/content/examples_p5/Basics/Objects/Objects/Objects.js b/content/examples_p5/Basics/Objects/Objects/Objects.js
