let majorChords = {

  "C": ["C", "E", "G"],

  "G": ["B", "D", "G"],

  "D": ["A", "D", "F#"],

  "A": ["A", "C#", "E"],

};

​

let chordNames = Object.keys(majorChords); // Array of chord names

let currentIndex = 0; 

​

// Definition of colors

let Colors = {

  "C": [255, 89, 191],

  "C#": [168, 17, 110],

  "D": [255, 104, 113],

  "E": [149, 107, 235],

  "F#": [120, 137, 125],

  "G": [223, 172, 144],

  "A": [136, 151, 235],

  "B": [237, 217, 139],

};

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(242, 233, 245, 80); // Transparent background for a trailing effect

​

  let currentSet = majorChords[chordNames[currentIndex]];

​

  if (currentSet) {

    // Draw a dynamic flowing line for each note in the chord

    for (let i = 0; i < currentSet.length; i++) {

      let note = currentSet[i];

      stroke(Colors[note] ); // Use the assigned color

      strokeWeight(random(1,3));

      noFill();

​

      // Create flowing lines using Perlin noise

      beginShape();

      for (let x = 0; x < width; x += 10) {

        // Perlin noise for dynamic Y-coordinates

        let y = noise(x * 0.02, i * 0.23, frameCount * 0.01) * height; 

        vertex(x, y);

      }

      endShape();

    }

  }

}

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    currentIndex = (currentIndex + 1) % chordNames.length;

  } else if (keyCode === DOWN_ARROW) {

    currentIndex = (currentIndex - 1 + chordNames.length) % chordNames.length;

  }

}

​