Object literals #

A JS object is a collection of unordered properties, mostly of the form property: value, each of which is accessed through the so called “dot syntax”: object.property. A property can be of any type, be it a number, a string, a function, an array, or even another object.

An object is defined (and created) from an “object literal”, using the code between { and }. Other means of object creation will be discussed later in other chapter.

Objects may be assigned to variables, in a similar manner as it’s done with arrays, numbers, functions or strings, e.g., let miObjeto = {}.

JS object accessors (also known as “computed properties”) allow a simpler syntax for some of the object getter and setter methods.

ww3schools references #

• objects.
• object properties.
• object methods.
• object accessors.

Cuadrado object #

As an example of object literals the code below partially implements an interactive cuadrado object that may form part of a graphics raster editor, or a video game such as as the tangram.

You may think of a cuadrado shape (as well as the other shapes) from its properties. For instance, the shape should have color, size and position, and some behaviors such as displaying it onto the canvas element.

Declaration #

The cuadrado object is going to be stored in the global cuadrado variable:

let cuadrado;

Properties #

The cuadrado object data properties are defined within the setup as follows:

cuadrado = {
  // 1. Data
  // position is defined in the cartesian plane
  // x and y should be between the (-100, 100) range
  position: [0, 0],
  // initial rotation in radians should be kepts as PI / 12 multiples
  rotation: 0,
  // cuadrado edge size should
  edge: 40,
  // color to fill the shape
  color: 'red',
}

Main methods #

Observations

1. Methods should use the this keyword to access object data properties.
2. The camelCase naming convention is the preferred convention used among JS developers to name object methods.

Randomizer #

What object can subsist without a randomizer?

cuadrado = {
  // ...
  // 2. Methods
  // Note that to refer the object properties methods
  // should use 'this'
  randomize: function () {
    this.position = [-100 + 200 * Math.random(), -100 + 200 * Math.random()];
    // implement the color and rotation parts of this function
    // remember the rotation should be kept as a PI / 12 multiple
  },
  //...
}

Other methods such as display and pick will be cover later on the introduction to p5 chapter.

Exercise
Implement object accessors (getters and setters) for the cuadrado object data properties.

Using and testing #

// cuadrado position property debug message
console.debug(cuadrado.position);
// call and executes the cuadrado randomize method:
cuadrado.randomize();
// cuadrado position property warn message
console.warn(cuadrado.position);
// cuadrado object log message
console.log(cuadrado);

Putting all the code together:

Exercise
Implement a regular polygon of a given number of sides with some methods to compute its perimeter and area.