Tunji545 · January 20, 2021 07:18 · Nov 15, 2017 · Nov 15, 2017
diff --git a/readme.md b/readme.md
@@ -1,3 +1,3 @@
-P5.js example demonstrating ES6 classes, inheritance and method chaining
+P5.js example demonstrating [ES6 classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), inheritance and [method chaining](https://schier.co/blog/2013/11/14/method-chaining-in-javascript.html)
 
 ![](https://i.imgur.com/st8esCM.gif)
diff --git a/bouncing-circles-es6-classes.js b/bouncing-circles-es6-classes.js
@@ -0,0 +1,78 @@
+// ----------------------------
+// Parent class (or superclass)
+// ----------------------------
+class Circle {
+  constructor(x = 50, y = 50, r = 100, col = '#f00') {
+    this.x = x;
+    this.y = y;
+    this.r = r;
+    this.col = col;
+    this.vx = random(-5,5);
+    this.vy = random(-5,5);
+  }
+
+  move() {
+    this.x += this.vx;
+    this.y += this.vy;
+    return this;
+  }
+
+  draw() {
+    fill(this.col);
+    ellipse(this.x,this.y,this.r);
+    return this; // allows method chaining
+  }
+}
+
+// ----------------------------
+// Child class (or subclass)
+// ----------------------------
+class BouncingCircle extends Circle {
+  constructor(x = 50, y = 50, r = 50, col = '#0f0') {
+    super(x, y, r, col);
+  }
+
+  move() {
+    this.x += this.vx;
+    this.y += this.vy;
+
+    // reverse direction ('bounce')
+    if(!this.onScreen()) {
+      this.vx *= -1;
+      this.vy *= -1;
+    }
+    return this; // allows method chaining
+  }
+
+  onScreen() {
+    if(this.x - (this.r / 2) < 0 || this.x + (this.r / 2) > width || this.y - (this.r / 2) < 0 || this.y + (this.r / 2) > height) { return false; }
+    return true;
+  };
+}
+
+// -------------------------------
+// Code to use the above 'classes'
+// -------------------------------
+let circles = [];
+
+function setup() {
+  createCanvas(400,400);
+  background(0);
+}
+
+function draw() {
+  background(0);
+  for(let i = 0; i < circles.length; i++) {
+    circles[i].move().draw(); // method chaining
+  }
+}
+
+function mousePressed() {
+  // clicking on the left half of the screen creates bouncing circles
+  if(mouseX > width / 2) {
+    circles.push( new BouncingCircle(mouseX, mouseY) );
+  }
+  else {
+    circles.push( new Circle(mouseX, mouseY) );
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<title>p5.js playground</title>
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/addons/p5.dom.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/addons/p5.sound.min.js"></script>
+	<script src="script.js"></script>
+
+	<style>
+		body {
+			margin:0;
+			padding:0;
+			overflow: hidden;
+		}
+		canvas {
+			margin:auto;
+		}
+	</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -0,0 +1,3 @@
+P5.js example demonstrating ES6 classes, inheritance and method chaining
+
+![](https://i.imgur.com/st8esCM.gif)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		P5.js example demonstrating ES6 classes, inheritance and method chaining

		![](https://i.imgur.com/st8esCM.gif)
No results found