Inheritance

Inheritance is a key concept in object-oriented programming that allows one class to derive or “inherit” properties and methods from another class. This promotes abstraction, enabling developers to model complex systems by focusing on shared characteristics. Combined with polymorphism, inheritance lets you extend or override behavior in subclasses, making your code more flexible and reusable.

In the example below, the NoteCell class inherits from the SoundCell class—originally implemented in the Classes chapter—adding its own unique property (color) and overriding the play and display methods. This approach is further explored in the Celtic handpan demo, showcasing how subclasses can build upon and customize base class functionality while retaining shared behavior.

(mouse press plays the note sound; key press picks a random note sound)

code

let notes = [];
let pickedNote;

// Base class representing a generic sound object
class SoundCell {
  constructor(name, sound) {
    this.name = name; // Name of the sound object
    this.sound = sound; // Associated sound file
  }

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

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

  // Stop the sound file if it is playing
  stop() {
    this.sound.stop();
  }

  // Toggle sound 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
  display(cellLength, outline, outlineWeight) {
    push();
    noFill();
    stroke(outline);
    strokeWeight(outlineWeight);
    ellipseMode(CORNER);
    circle(0, 0, cellLength); // Draw a circle with the given dimensions
    pop();
  }
}

// Subclass representing a note with additional visual properties
class NoteCell extends SoundCell {
  constructor(note, sound, color) {
    super(note, sound); // Initialize base class properties
    this.color = color; // Color of the note
    this.alpha = 0; // Transparency level for visual effects
  }

  // Override the play method to include visual feedback
  play() {
    super.play(); // Call the parent class's play method
    this.alpha = 255; // Set alpha to maximum for the fade-out effect
  }

  // Override the display method to include color and fade-out effects
  display(cellLength, outline, outlineWeight) {
    push();
    if (this.sound.isPlaying()) {
      // Calculate alpha value based on the playback progress
      const currentTime = this.sound.currentTime();
      const duration = this.sound.duration();
      this.alpha = map(currentTime, 0, duration, 255, 0); // Fade out over time
    }
    const hue = color(this.color);
    hue.setAlpha(this.alpha); // Apply alpha transparency to the color
    noStroke();
    fill(hue);
    ellipseMode(CORNER);
    circle(0, 0, cellLength); // Draw the note with its color and alpha effect
    // Call the parent class's display method
    super.display(cellLength, outline, outlineWeight);
    pop();
  }
}

// Preload sound files and create NoteCell objects
function preload() {
  // Note names
  const names = ['A3', 'A4', 'B2', 'B3', 'B4', 
                 'CSharp4', 'D4', 'E4', 'FSharp3', 'FSharp4'];
  // Corresponding colors
  const colors = ['red', 'orange', 'yellow', 'lime', 'green',
                  'aqua', 'cyan', 'skyblue', 'blue', 'purple'];
  function addNoteCell(note, index) {
    // Load the sound file for the note
    const sound = loadSound('/sounds/' + note + '.wav');
    const cellColor = colors[index]; // Get the color by index
    // Create and add a NoteCell instance
    notes.push(new NoteCell(note, sound, cellColor));
  }
  // Iterate over the names array and create NoteCell objects
  names.forEach(addNoteCell);
}

// Setup the canvas and pick a random note to start with
function setup() {
  createCanvas(400, 400);
  pickedNote = random(notes); // Select a random NoteCell from the notes array
}

// Render the currently picked note on the canvas
function draw() {
  background(0); // Clear the canvas with a black background
  pickedNote.display(width, 'red', 2); // Display the picked note
}

// Handle mouse press to play the currently picked note
function mousePressed() {
  pickedNote.play(); // Play the sound associated with the picked note
}

// Handle key press to select a new random note
function keyPressed() {
  pickedNote = random(notes); // Pick a new random note
}

Class Definition

Inheritance in JavaScript is implemented using the extends keyword, which creates a parent-child relationship between two classes. In this example:

SoundCell: The base class, defining shared properties (name, sound) and methods (play, stop, toggle, and display).
NoteCell: The subclass, which extends SoundCell by adding the color property and overriding the play and display methods.

The following class diagram highlights the relationship between SoundCell and NoteCell:

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

    class NoteCell {
        +String color
        +Number alpha
        +play()
        +display(cellLength: Number, outline: String, outlineWeight: Number)
    }

    NoteCell --|> SoundCell

Constructor and Object Instantiation

The SoundCell class includes a constructor that initializes the name and sound properties. This ensures that each instance of SoundCell or its subclasses has these properties defined.

class SoundCell {
  constructor(name, sound) {
    this.name = name; // Set the name of the sound
    this.sound = sound; // Associate the sound file with this object
  }
  // Other methods omitted for brevity
}

The NoteCell subclass extends this functionality by introducing a color property and an alpha property for visual feedback. Its constructor uses super to call the SoundCell constructor, ensuring that the shared properties (name and sound) are properly initialized before adding its unique color property.

class NoteCell extends SoundCell {
  constructor(note, sound, color) {
    super(note, sound); // Call parent constructor to initialize name and sound
    this.color = color; // Assign the color property for this NoteCell
    this.alpha = 0; // Initialize alpha property for fade-out effect
  }
  // Other methods omitted for brevity
}

The preload function demonstrates how NoteCell objects are instantiated. It uses the forEach method to iterate over the names array, dynamically loading sound files and associating each with a color from the colors array. The forEach method provides both the current element (note) and its index (index) as arguments to the callback function addNoteCell. This index is then used to retrieve the corresponding color from the colors array. These NoteCell instances are stored in the global notes array.

ℹ️

The index parameter in addNoteCell is automatically provided by the forEach method, which invokes the callback function once for each element in the array. This allows the program to map each note name in the names array to its corresponding color in the colors array by using their shared index position.

function preload() {
  // Array of note names
  const names = ['A3', 'A4', 'B2', 'B3', 'B4',
                 'CSharp4', 'D4', 'E4', 'FSharp3', 'FSharp4'];
  // Array of corresponding colors                 
  const colors = ['red', 'orange', 'yellow', 'lime', 'green',
                  'aqua', 'cyan', 'skyblue', 'blue', 'purple'];
  function addNoteCell(note, index) {
    // Load the sound file for this note
    const sound = loadSound('/sounds/' + note + '.wav');
    // Get the corresponding color by index
    const cellColor = colors[index];
    // Create and store a NoteCell instance
    notes.push(new NoteCell(note, sound, cellColor));
  }
  names.forEach(addNoteCell); // Iterate through names and call addNoteCell
}

This approach demonstrates how inheritance enables the creation of multiple NoteCell instances that share common functionality from the SoundCell class while adding unique features like color.

Method Overriding and Polymorphism

The NoteCell class demonstrates method overriding, allowing it to redefine behavior from the parent class:

The play method is extended to include visual feedback by updating the alpha property.
The display method is customized to incorporate the color and alpha properties, creating a fade-out effect as the sound plays.

These overrides enable polymorphism, allowing all SoundCell objects (including NoteCell instances) to be treated uniformly while invoking subclass-specific behavior at runtime.

Drawing

The draw function leverages the display method to visually represent the pickedNote instance on the canvas.
As with classes, it calls pickedNote.display, which dynamically updates the canvas based on the current state of the pickedNote object.

Here, the overridden display method in NoteCell adds color and transparency effects to the visual representation, creating a dynamic and interactive experience.

Interaction

Interaction remains similar to the implementation in classes, with mouse and keyboard events driving user input:

Mouse Interaction: Clicking the mouse triggers the play method, which starts the sound and sets the visual feedback (alpha).
Keyboard Interaction: Pressing any key selects a new random note from the notes array, allowing seamless interaction across multiple NoteCell instances.

This showcases polymorphism by invoking methods dynamically on the current pickedNote object, regardless of whether it’s a SoundCell or a NoteCell.

Further Exploration

Add a Toggle to Display Name: Add a feature to toggle the visibility of the name display, similar to how it’s implemented in the object literals and classes posts. This helps practice interacting with inherited methods and managing visibility of the name display dynamically.
Implement Additional Subclasses: Create new subclasses that inherit from SoundCell or NoteCell, each with unique properties and behaviors (e.g., VolumeCell to adjust volume dynamically).
Explore Method Overloading: Extend the play method in NoteCell to optionally take parameters (e.g., play(loop = false)), showcasing method overloading and runtime flexibility.
Experiment with Visual Effects: Modify the display method in NoteCell to include animations or visual feedback based on the sound amplitude or playback speed.

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.
map — Re-maps a number from one range to another, often used to scale values for visual or interactive elements.
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.
loadSound — Loads an external sound file for playback in the sketch.