createCanvas(650, 650);

}

​

let activeButton = null; // Track the active button

​

function mouseClicked() {

  if (

    mouseX >= 10 &&

    mouseX <= width / 2 - 7 &&

    mouseY >= height - 70 &&

    mouseY <= height - 20

  ) {

    activeButton = "advanced";

  } else if (

    mouseX >= width / 2 + 7 &&

    mouseX <= width - 10 &&

    mouseY >= height - 70 &&

    mouseY <= height - 20

  ) {

    activeButton = "beginner";

  }

}

​

let numberofbuttons = 2;

​

let songs_advanced = [

  "D-B-A-G-D-D-D-D-B-A-G-E E-C2-B-A-F#-D2-D2-C2-A-B D-B-A-G-D-D-B-A-G-E E-E-C2-B-A-D2-D2-D2-D2-E2-D2-C2-A-G D2-B-B-B-B-B-B-B-D2-G-A-B C2-C2-C2-C2-C2-B-B-B-B-B-A-A-B-A-D2 B-B-B-B-B-B-B-D2-G-A-B C2-C2-C2-C2-C2-B-B-B-B-D2-D2-C2-A-G",

  "D-A-C-D-D-D-E-F-F-F-G-E-E-D-C-C-D A-C-D-D-D-E-F-F-F-G-E-E-D-C-D A-C-D-D-D-F-G-G-G-A-A#-A#-A-G-A-D D-E-F-F-G-A-D D-F-E-E-F-D-E",

  "D-D-D-D-E-B-D-D-G-A-B-B-B-A-A-G-G B-B-C2-B-B-A-B-A-G-D-D-D-E-B-D-D G-A-B-B-B-A-A-G-G-B-B-C2-B-B-A-B-A-G B-A-G-B-D2-E2-D2-D2-B-A-G-B-B-B-C2-B-B-A-B-A-G",

];

​

let songs_beginner = [

  "O-X-Z-]-O-O-O-O-X-Z-]-P P-C-X-Z-=-V-V-C-Z-X O-X-Z-]-O-O-X-Z-]-P P-P-C-X-Z-V-V-V-V-B-V-C-X-Z V-X-X-X-X-X-X-X-V-]-Z-X C-C-C-C-C-X-X-X-X-Z-Z-X-Z-V X-X-X-X-X-X-X-V-]-Z-X C-C-C-C-C-X-X-X-X-V-V-C-Z-]",

  "O-Y-O-O-O-P-[-[-[-]-P-P-O-I-I-O Y-I-O-O-O-P-[-[-[-]-P-P-O-I-O Y-I-O-O-O-[-]-]-]-Z-S-S-Z-}-Z-O O-P-[-[-]-Z-O-O-[-P-P-[-O-P",

  "O-O-O-O-P-U-O-O-]-Z-X-X-X-Z-Z-]-] X-X-C-X-X-Z-X-Z-]-O-O-O-P-U-O-O ]-Z-X-X-X-Z-Z-]-]-X-X-C-X-X-Z-X-Z-] X-Z-]-X-V-B-V-V-X-Z-]-X-X-X-C-X-X-Z-X-Z]",

];

​

let songs_names = ["Jingle Bells", "He's A Pirate", "Let It Be"];

​

let advanced = 0; // check if the button is clicked

let beginner = 0;

​

function draw() {

  creatingbutton();

  if (activeButton === "advanced") {

    displaySong(songs_advanced, songs_names, advanced);

  } else if (activeButton === "beginner") {

    displaySong(songs_beginner, songs_names, beginner);

  }

}

​

function displaySong(songs, names, index) {

  push();

  fill("black");

  rect(0, 0, width, 300, 5);

  fill("white");

  textAlign(CENTER);

  strokeWeight(5);

  textWrap(WORD);

  textSize(30);

  text(names[index - 1], width / 2, 50);

  textSize(20);

  text(songs[index - 1], 20, 100, width - 30, 250);

  pop();

}

​

function creatingbutton() {

  // Code for creating buttons which would fit the page depending on the number of buttons

​

  // Can be used for future ideas

​

  let buttonwidth = (width - 10 * (numberofbuttons + 1)) / numberofbuttons;

  for (let i = 0; i < numberofbuttons; i++) {

    noStroke();

    fill(252, 207, 172);

    rect(i * buttonwidth + 10 * (i + 1), height - 70, buttonwidth, 50, 3);

  }

​

  // creating a button in the bottom of the page

  push();

  textAlign(CENTER);

  stroke("black");

  textSize(14);

  text("LEARN A NEW SONG (ADVANCED)", buttonwidth / 2 + 10, height - 41);

  text(

    "LEARN A NEW SONG (BEGINNER)",

    buttonwidth / 2 + buttonwidth + 10,

    height - 41

  );

  pop();

}

​