Computer Science: Classes - VinMeld/2D-Raycasting GitHub Wiki

A class is a template for creating objects in object-oriented programming. It defines properties and methods (functions) that are common to all objects (instances) under the same class. Although they are typically written in a separate file to maintain organization and readability, it is not required and may be incorporated into the main file. As an example of a class, we can use cars. Although every car performs similar functions, they all have different variables, such as their size or their maximum speed.

Below is a simple program to help explain and demonstrate how a class functions. A class acts as a blueprint from which individual objects, in this case, the cars, are created. Inside a class, we can create attributes to differentiate the cars, and we can also create functions that run the cars’ tasks.

class Car {
  constructor(x, y, sizeX, sizeY, maxSpeed) { // A constructor defines attributes of the object
    // Because the variables differ based on what was set for each car in the code block below,
    // we use a temporary variable so that the value isn't constant across all cars.
    // You can otherwise initialize these variables as desired. For example, you can set
    // this.sizeX = 200 to make all cars have a horizontal length of 200 pixels.
    // In this case, you would not need the variable tempX.
    this.x = x;
    this.y = y;
    this.sizeX = sizeX;
    this.sizeY = sizeY;
    this.maxSpeed = maxSpeed;
  }
  
  display() { // This function is called from the code block below
    fill(255, 100, 100);
    // Car (rectangle) is drawn according to the attributes
    // defined for the corresponding car in the code block below
    rect(this.x, this.y, this.sizeX, this.sizeY);
  }
}

In the main file, we can define the attributes for each car and run their functions. For example, we set the maximum speed of the first car to 200 km/h, and the second car to 100 km/h.

// Declaring variables
let car = [];

function setup() { // Runs program once
  createCanvas(600, 600);
  
  // Attributes order (defined in Car class): x coordinate, y coordinate, x length, y length, maximum speed
  car.push(new Car(100, 100, 100, 50, 200)); // Sets the attributes of the first car
  car.push(new Car(300, 300, 200, 100, 100)); // Sets the attributes of the second car

  for (let i = 0; i < car.length; i++) { // Runs the following code for each car in the array
    // Displays the max speed above the corresponding car
    fill(0);
    text("Max speed: " + car[i].maxSpeed + "km/h", car[i].x, car[i].y);
    // Displays the car on the canvas
    car[i].display();
  }
}

The following image displays the cars with the attributes set in the main file created above. A grid has also been added to display the coordinates of every 100 pixels vertically and horizontally. In comparing the image with the code, you can see that the attributes set for the cars correspond with what is displayed. Note the similarities between the two "cars," in which both are rectangles and have the same fill colour, but both also have different coordinates, sizes, and maximum speeds set.

This example program can be found in our repository.