Classes

Classes provide a blueprint for creating objects, making it easier to define reusable and organized code. They support key principles of object-oriented programming, such as encapsulation, which bundles an object’s state (properties) and behavior (methods) into a single, cohesive unit.

Additionally, classes are widely used in library APIs, including p5.js and p5.quadrille.js—implementing just a single Quadrille class—to streamline functionality and improve code readability. In the example below, we define a SoundCell class to manage individual sounds and their visual representations, laying the foundation for the concepts explored further in the Inheritance chapter. This demonstrates how classes simplify the creation of objects with shared properties and methods while promoting clean and maintainable code.

(mouse press toggles the element sound; key press picks a random element sound)

// Initialize an array to store instances of SoundCell
let sounds = []; // Array to hold SoundCell instances
let pickedSound; // The currently picked SoundCell

// Define the SoundCell class
// This class encapsulates the properties and behaviors of a sound object,
// including playback control and a visual representation on the canvas.
class SoundCell {
  constructor(name, sound) {
    this.name = name; // The name of the sound (e.g., 'space', 'fire')
    this.sound = sound; // The associated sound file
  }

  // Retrieve the name of the sound
  getName() {
    return this.name;
  }

  // Play the associated sound
  play() {
    this.sound.play();
  }

  // Stop the associated sound
  stop() {
    this.sound.stop();
  }

  // Toggle playback: play if stopped, stop if playing
  toggle() {
    this.sound.isPlaying() ? this.sound.stop() : this.sound.play();
  }

  // Display a visual representation of the sound object on the canvas
  display(cellLength, outline, outlineWeight) {
    push();
    noFill();
    stroke(outline); // Set the outline color
    strokeWeight(outlineWeight); // Set the outline thickness
    ellipseMode(CORNER); // Position the circle from the top-left corner
    circle(0, 0, cellLength); // Draw a circle with the specified dimensions
    pop();
  }
}

// Preload sound files and initialize SoundCell instances
function preload() {
  // The elements array contains names of sound elements
  const elements = ['space', 'air', 'fire', 'water', 'earth'];
  function addSoundCell(name) {
    // Load the sound file
    const sound = loadSound('/sounds/' + name + '.wav');
    // Create and store a new SoundCell instance
    sounds.push(new SoundCell(name, sound));
  }
  // Iterate through the elements and process each one
  elements.forEach(addSoundCell);
}

// Setup the canvas and randomly select a SoundCell for interaction
function setup() {
  createCanvas(400, 400);
  // Randomly select a SoundCell instance for display and interaction
  pickedSound = random(sounds);
}

// Render the currently selected SoundCell and its name on the canvas
function draw() {
  background(0); // Clear the canvas with a black background
  pickedSound.display(width, 'red', 2); // Display the selected SoundCell
  fill(255); // Set text color to white
  noStroke();
  textAlign(CENTER, CENTER); // Center-align the text
  textSize(32); // Set text size
  // Randomly select a SoundCell instance for display and interaction
  text(pickedSound.getName(), width / 2, height / 2);
}

// Handle mouse press to toggle the selected SoundCell's playback
function mousePressed() {
  pickedSound.toggle(); // Toggle sound playback for the selected SoundCell
}

// Handle key press to stop the current sound and select a new SoundCell
function keyPressed() {
  pickedSound.stop(); // Stop the currently playing sound
  pickedSound = random(sounds); // Pick a new random SoundCell for interaction
}

Class Definition

Classes are the foundation of object-oriented design, providing a way to define reusable templates for objects. They encapsulate data (properties) and behavior (methods) in a structured format, supporting principles like encapsulation.

Below is a simplified class diagram for the SoundCell class, showing its properties and methods:

  classDiagram
    class SoundCell {
        +String name
        +p5.SoundFile sound
        +String getName()
        +play()
        +stop()
        +toggle()
        +display(cellLength: Number, outline: String, outlineWeight: Number)
    }

This diagram showcases the SoundCell class, detailing its properties (name and sound) and methods (getName, play, stop, toggle, and display).

Constructor and Object Instantiation

In classes, properties are defined inside the constructor method and assigned to the instance using the this keyword. Unlike object literals, classes do not use key-value pairs to define properties. Instead, properties are initialized when the class is instantiated:

class SoundCell {
  constructor(name, sound) {
    this.name = name; // The name of the sound (e.g., 'space', 'fire')
    this.sound = sound; // The associated sound file
  }
  // Other methods omitted for brevity
}

The SoundCell class uses a constructor method to initialize new instances of the class. The constructor(name, sound) method assigns the provided name and sound values to the new object’s properties.

The new operator is essential for creating instances of the class, ensuring the constructor is called.

For example, the preload function demonstrates this process:

function preload() {
  // Array of sound element names
  const elements = ['space', 'air', 'fire', 'water', 'earth'];
  function addSoundCell(name) {
    // Load a sound file for the given name
    const sound = loadSound('/sounds/' + name + '.wav');
    // Create a new SoundCell instance and add it to the sounds array
    sounds.push(new SoundCell(name, sound));
  }
  // Iterate through elements and call addSoundCell for each
  elements.forEach(addSoundCell);
}

This function creates reusable SoundCell instances for each element in the elements array, dynamically loading the corresponding sound file and storing the instances in the sounds array.

Methods

Methods in classes define an object’s state and behavior, similar to object literals. However, only shorthand syntax is valid for defining methods in classes—explicit key: value pairs or the function keyword are not allowed.

These methods are part of the class blueprint and accessed using dot notation on an instance of the class:

const mySound = new SoundCell('space', someSoundFile);
mySound.play(); // Plays the sound
console.log(mySound.getName()); // Outputs: 'space'

Drawing

The draw function is nearly identical to the one in object literals, with the only change being the renaming of the variable from spaceSound to pickedSound, which is now an instance of the SoundCell class.

It uses the same methods, display and getName, to dynamically render the visual and text representation of the object on the canvas, demonstrating how the logic from object literals carries over seamlessly to class-based objects.

Interaction

As in the object literals example, mouse and keyboard events are used to dynamically invoke object methods in response to user input.

In this example, the pickedSound object is an instance of the SoundCell class, enabling seamless interaction across multiple objects:

• Mouse Interaction: The toggle method toggles sound playback for the currently selected object, just as in the object literals example.
• Keyboard Interaction: While the keyPressed function still stops the current object’s sound using the stop method, it also selects a new random object from the sounds array. This demonstrates how classes simplify managing collections of objects with additional flexibility.

Further Exploration

• Create a Collection of Class Instances: Expand the SoundCell class by adding more objects with unique sounds or behaviors. Experiment with interactions between multiple SoundCell instances to create dynamic soundscapes.

• Add New Methods: Enhance the SoundCell class with methods like fadeOut() to gradually lower the sound’s volume, or reset() to restart the sound from the beginning.

• Use Getters and Setters: Refactor the name property to use getters and setters, allowing for input validation or additional formatting when retrieving or updating the property.

References

p5 API

• createCanvas — Creates a drawing canvas on which all the 2D and 3D visuals are rendered in p5.js.
• push — Saves the current drawing state (e.g., styles, transformations) to the stack.
• pop — Restores the most recently saved drawing state from the stack.
• noFill — Disables filling geometry shapes with color.
• fill — Sets the fill color for shapes drawn after this function is called.
• stroke — Sets the outline (stroke) color for shapes drawn after this function is called.
• strokeWeight — Sets the width of the stroke used for lines and shape outlines.
• ellipseMode — Changes the way the parameters of ellipse shapes are interpreted (e.g., center, corner).
• circle — Draws a circle at a specified location and diameter.
• textAlign — Sets how text is aligned horizontally and vertically within the canvas.
• textSize — Sets the size of the text font for subsequent text rendering.
• text — Draws text at a specified position on the canvas.
• loadSound — Loads an external sound file for playback in the sketch.

Further Reading

1. JavaScript Classes — Learn more about object-oriented programming in JavaScript.
2. p5.js Sound Library — Official documentation for the sound library.