Resources

• JS Prototype in Plain Detailed Language
• Learning JavaScript Design Patterns

p5 Quick Tips

• Color
• Mapping Values
• Seeding Random & Noise
• Distance
• See the example

Object Oriented Programming

"Object-oriented programming is a programming paradigm that uses abstraction to create models based on the real world. It uses several techniques from previously established paradigms, including modularity, polymorphism, and encapsulation. Today, many popular programming languages (such as Java, JavaScript, C#, C++, Python, PHP, Ruby and Objective-C) support object-oriented programming (OOP)."

• Intro to Object-Oriented Javascript

• Abstraction is reducing certain details to reveal only the important parts of an object. Ball - size, position, type, color
• We looked at simple objects already: var obj = {};
• We created a singleton with our original Ball object
• in order to create another object of the same type we would have to copy and paste all of the code

Design Patterns

"A pattern is a reusable solution that can be applied to commonly occurring problems in software design - in our case - in writing JavaScript web applications. Another way of looking at patterns are as templates for how we solve problems - ones which can be used in quite a few different situations.

So, why is it important to understand patterns and be familiar with them? Design patterns have three main benefits:

1. Patterns are proven solutions: They provide solid approaches to solving issues in software development using proven techniques that reflect the experience and insights the developers that helped define them bring to the pattern.

2. Patterns can be easily reused: A pattern usually reflects an out of the box solution that can be adapted to suit our own needs. This feature makes them quite robust.

3. Patterns can be expressive: When we look at a pattern there’s generally a set structure and vocabulary to the solution presented that can help express rather large solutions quite elegantly."

• Learning JavaScript Design Patterns

Bad JS Form

• Polluting the global namespace by defining a large number of variables in the global context
• Modifying the Object class prototype
• Using JavaScript as inline HTML creates cluttered pages and inflexible code

“Class”

• A Class is the template for building actual instances of objects - It defined the characteristics of that object
• ”Think of a class as the cookie cutter; the objects are the cookies themselves.” - Dan Shiffman
• Unlike Java, Python and C++, JavaScript does not have classes.
• It uses functions as classes.

Defining a Class

• Defining a class is as simple as defining a function, this serves as the constructor.

• Use a capital Letter, It is good practice to use to distinguish a class definition.

  function Ball() { }

• To set initial properties of an object, use this.property within the constructor.

• Every instance of Ball will have these properties when it is created.

---

function Ball(){
    this.xPos = 0;
    this.yPos = 0;
    this.xSpeed = 5;
    this.ySpeed = 5; 
}

---

Pass arguments

• You can also pass in arguments to set initial properties of an object within the constructor.
• Arguments which are not provide become undefined
• If we don't pass the type argument into the next example it uses a conditional to see if type is undefined then this.type the value of "generic ball"

---

var ballOneArgs = new Ball("basketball");
var ballTwoNoArgs = new Ball();

function Ball( type ){
    this.xPos = 0;
    this.yPos = 0;
    this.xSpeed = 5;
    this.ySpeed = 5; 
    this.type = type || "ball"; 
}

print(ballOneArgs.type); // prints "basketball" to the console
print(ballTwoNoArgs.type); // prints "ball" to the console

---

Creating an instance

• Creating a new object using the constructor
• Use the new keyword
• To create a new instance of an object obj we use the statement new obj
• It is assigned to a variable to access later
• this then points to the object

---

var ballOne = new Ball(“basketball”);
var ballTwo = new Ball(“soccer”);
print( ballOne.typ
print( ballTwo.xPos );

---

Scope

• Checkout the Scope Cheatsheet from the MDN
• Global scope vs function scope
• Scope of variable == region of program in which it’s defined.
• Global variable has global scope (accessed anywhere).
• Local variables exist within functions or classes, only defined within there.

---

var a = 1; // global variable attached to window
function gimmeA(){
    var a = 10; // local or function scope variable
    print(a);
}
gimmeA(); // will return 10
print(a); // will return 1;

---

Prototype

• All objects in JavaScript are descended from Object;

---

typeof ballOne; 

---

• All objects inherit methods and properties from Object.prototype,
• For example, other constructors' prototypes override the constructor property and provide their own toString() methods.

---

ballOne.toString()

---

Adding a property to a previously defined object

• This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object.
• The following code adds a color property to all objects of type ball, and then assigns a value to the color property of the object ballOne.

---

Ball.prototype.color = null;
ballOne.color = color(100, 255, 255)

---

Adding methods with Prototype

• As we saw in our Objects example in the homework last week, properties of an object can be functions
• To add Methods functions to your class definition, use the prototype object.
• In this case, you are creating a new property of the Ball prototype called display, and setting it equal to a function you define.

---

Ball.prototype.display = function() {
    stroke(100);
    fill(0);
    ellipse(this.xPos, this.yPos, this.size, this.size);
}

---

Update and set properties of the object from within the function.

Ball.prototype.move = function() {
    this.xPos += this.xSpeed;
    this.yPos += this.ySpeed;
}

Methods can also take arguments.

Ball.prototype.setXSpeed = function(newSpeed) {
    this.xspeed = newSpeed;
    print(this.xspeed);
};

Calling methods and accessing properties

• To call the methods of an object, you use the dot operator again.
• Methods, just like functions, are followed by parentheses and any arguments passed in.

---

ballOne.display();
ballOne.move();
ballOne.setXSpeed(10);

---

Arrays

• Ordered list-like object
• Access elements in an array by their index

---

var a = [ 1, 2, 3 ]
var b = a[1];

---

Mutator methods

• These methods modify the array:
• push() method adds a new element to an array (at the end)
• pop() method removes the last element from an array
• unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:
• shift() method removes the first element of an array, and "shifts" all other elements one place down
• splice() method can be used to add new items to an array
• reverse() reverses the array

Accessor Methods

• These methods do not modify the array and return some representation of the array.
• slice() method slices out a piece of an array but doesn’t modify the array
• concat() joins two arrays then and returns a new array

Inheritance

• All objects in JavaScript inherit from at least one other object.
• Example: A Javascript number inherits from Number.prototype.toString()

---

var num = 5100
num.toString()
num.valueOf()

---

• Subclass - Inheritance gives us a way to create a class as a specialized version of another class.
• Child - this subclass is called the child, while the class we inherit from is the parent like a parent / child relationship in after effects
• You do this by assigning an instance of the parent class to the child class, and then specializing it.

Call parent constructor.

function Superball(x, y, gray) {
    Ball.call(this, “SuperBall’);  // pass this, and any arguments for Ball constructor in order
    this.color = color( random( 100, 255 ), random( 100, 255 ), random( 100, 255 ) );
}

Specify inheritance

Use ball as the template and inherit all the properties and methods from Ball

Superball.prototype = Object.create(Ball.prototype);

Reset constructor

Now that you have told SuperBall to use Ball as the template, you have to tell it NOT to use the Ball constructor, to use it's own instead.

SuperBall.prototype.constructor = SuperBall;

Add or overwrite methods or properties.

Superball.prototype.move = function() {
    this.xPos -= this.xSpeed;
};

Superball.prototype.display = function(){
    stroke(20);
    fill(this.color);
    ellipse(this.xPos, this.yPos, this.size, this.size);
}

Sources

• NYU Creative Javascript Week 02
• Intro to Object Oriented JavaScript
• Design Patterns Book