let newWidth = 120; // Width of the image

let newHeight = 240; // Height of the image

let spacing = 40; // Distance between each staff line

​

let notes = ["E", "F", "G", "A", "B", "C", "D", "E2", "F2"]; // Note sequence

let noteHeights = {}; // Placeholder for mapping notes to y-positions

let noteWidths = {}; // Placeholder for mapping notes to x-positions

let currentNote = ""; // Current note being played

let noteTimer; // Timer for picking random notes

​

// Loading the music note image

function preload() {

  img = loadImage("music_note.png");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  rectMode(CENTER); // Set rectangle mode to center

​

  // Map each note to its corresponding heights

  noteHeights = {

    "E": height / 2 + 80,

    "F": height / 2 + 60,

    "G": height / 2 + 40,

    "A": height / 2 + 20,

    "B": height / 2,

    "C": height / 2 - 20,

    "D": height / 2 - 40,

    "E2": height / 2 - 60,

    "F2": height / 2 - 80,

  };

​

  // Map each note to its corresponding widths

  noteWidths = {

    "E": width / 2 - 100,

    "F": width / 2 - 80,

    "G": width / 2 - 60,

    "A": width / 2 - 40,

    "B": width / 2,

    "C": width / 2 + 40,

    "D": width / 2 + 60,

    "E2": width / 2 + 80,

    "F2": width / 2 + 100,

  };

​

  img.resize(newWidth, newHeight); // Resize the image 

  img.loadPixels();

​

  // Changing each pixel color for the music note image to change it from black to white

  for (let i = 0; i < img.pixels.length; i += 4) {

    img.pixels[i] = 255 - img.pixels[i]; // Red channel

    img.pixels[i + 1] = 255 - img.pixels[i + 1]; // Green channel

    img.pixels[i + 2] = 255 - img.pixels[i + 2]; // Blue channel

    // Alpha channel (img.pixels[i + 3]) is left unchanged

  }

  img.updatePixels();

​

  // Start the timer to pick a random note every 10 seconds

  noteTimer = setInterval(pickRandomNote, 3000);

}

​

// For window size responsiveness

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(0);

​

  fill(255);

  textSize(60);

  noStroke();

  textAlign(CENTER, CENTER);

  text("Title", width / 2, height / 3);

  textSize(30);

  text("START", width / 2, height / 2);

  textSize(20);

  text("Tutorial", width / 2 - 150, height / 2 + 100);

  text("Free Play", width / 2 + 150, height / 2 + 100);

​

  noFill();

  stroke(255);

  strokeWeight(2);

  rect(width / 2, height / 2, 250, 70, 50);

  rect(width / 2 - 150, height / 2 + 100, 200, 50, 50);

  rect(width / 2 + 150, height / 2 + 100, 200, 50, 50);

​

  // Draw musical staff lines with transparency

  stroke(255, 100);

  strokeWeight(1);

  for (let i = -2; i <= 2; i++) {

    line(0, height / 2 + i * spacing, width, height / 2 + i * spacing);

  }

​

  // Draw image with transparency

  tint(255, 100);

  image(img, width / 5 - newWidth, height / 2 - newHeight / 2);

  noTint();

​

  // Draw the current note with transparency

  if (currentNote) {

    let yPosition = noteHeights[currentNote]; // Get the y-position of the current note

    let xPosition = noteWidths[currentNote];

    noFill();

    stroke(255, 10);

    strokeWeight(5);

    ellipse(xPosition, yPosition, 45, 35); // Draw the note as an ellipse

  }

}

​

​

​

function mousePressed() {

  // Check if the mouse is over the 'START' button

  let startButtonX = width / 2;

  let startButtonY = height / 2;

  let startButtonWidth = 250;

  let startButtonHeight = 70;

  if (

    mouseX > startButtonX - startButtonWidth / 2 &&

    mouseX < startButtonX + startButtonWidth / 2 &&

    mouseY > startButtonY - startButtonHeight / 2 &&

    mouseY < startButtonY + startButtonHeight / 2

  ) {

    // Redirect to game.html

    window.location.href = "game.html";

  }

}

​

​

// Function to pick a random note

function pickRandomNote() {

  currentNote = random(notes);

}

​

​

​