ID2116 Week03:
Object,
Object Oriented Programming,
State Transition

Mid-Term Project: ”Algorithmic Agent”

https://www.notion.so/clementzheng/Assignment-1-Algorithmic-Agent-b354abc36c2e42f6898a7dfd41c4fcc3

Object Oriented Programming with p5.js

BBC ByteSize: Object Oriented Programming
https://www.bbc.co.uk/bitesize/guides/zc8pjty/revision/3

What is Object?

Object01: Light Bulb

Object01: Light Bulb as a JavaScript Object

https://editor.p5js.org/didny/sketches/o2xF4PK8f

let bulb = {
  //key: value
  state: "off",

  on: function() {
    this.state = "on";
  },
  off: function() {
    this.state = "off";
  }
}

print(bulb.state); //"off"
bulb.on(); 
print(bulb.state); //"on"

JavaScript Object Notation

JavaScripts Objects are defined by key-value pairs.
A value can be a text, a number, a function, an object, etc.

let fruit = {
  key : value, 
  name: "orange", //text
  weight: 100, //number
  weigh: function() { //function
            print( this.weight + "g")
         }   
}

JavaScript Object: Dot Notation

The properties and methods of a JavaScript object can be referred by ObjectName.key notation which is called dot notation.

let val = fruit.name;          // val === "orange"
console.log(val)               // print out "orange"

fruit.weigh();         //calling fruit's weigh() method    

// printout "100g"

JavaScript Object: this. keyword

In the declaration statement of a JavaScript object,
When referring to properties of the object itself, the this keyword must be used.

let bulb = {
  //key: value
  state: "off",

  on: function() {
    this.state = "on"; // update bulb.state to "on"
  },
  off: function() {
    this.state = "off"; // update bulb.state to "off"
  }
}

print(bulb.state); // "off"
print(this.state); // undefined

But why do we need to use Object?

Object Oriented Programming Principles (Booch)

Abstraction

Encapsulation

Modularity

Hierarchy

JavaScript Class
A template for creating objects:

Class is to generate an object (instance) from a template.
By defining a Class of an object you can instantiate(spawn) the objects without rewriting the properties.

Class Example: Bulb Class

https://editor.p5js.org/didny/sketches/ZpW_tMZ0

Object02: music player

Let's list the properties and methods of the music player.

How can you describe the relationship of methods to properties?

[Wk03 Exercise] Define a daily object as a JavaScript Object

• Analyze the everyday object you brought today and extract its properties and methods.
  Write them down as a JavaScript object as the following example.

    objectName = {
      property: "value",
      method: function() { "type what to do" }
    }
    

Example: A Paper

    paper = {
      size: A4
      owner: Yuta
      color: "white"
      draw: function(scribble) {"draw a scribble on the paper"}
      fold: function(time) { "fold the paper"}
      tear: function(num) { "tear the paper in to num of pieces"}
    }

Designing Behaviours of Objects

State Transition / Finite State Machine

STM01: A Game Character

State Transition Diagram of Mr.Mario

STM02: Light Bulb State Transition

STM03: p5*js Video Sequence Playback

https://editor.p5js.org/didny/sketches/aAzdj6k4

[Homework] Define and draw a state transition diagram for the Algorithm Agent

• Brainstorm ideas for your algorithmic agent. Make sure you review the assignment brief.

• Shortlist an idea.

• Plan out the states and transitions for your algorithmic agent idea.

• Draw a detailed state transition of your project idea.

• Submit to Slack a PDF that includes:

  • A project description of the algorithmic agent (no more than 200 words).
  • Any relevant illustrations.
  • The state transition diagram of the algorithmic agent.

Reference:

• Coding Train: JavaScript Object

  • https://www.youtube.com/watch?v=-e5h4IGKZRY&&t=295s&ab_channel=TheCodingTrain

• Object-Oriented Analysis and Design with Applications

  • https://books.google.com.sg/books/about/Object_Oriented_Analysis_and_Design_with.html?id=8Rg5wxGj818C&printsec=frontcover&source=kp_read_button&hl=en&redir_esc=y#v=onepage&q&f=false