let isPlaying = false;

let isIntroduction = true;

let isInstructions = false;

let startButton, endButton;

let backgroundImage;

let customFont;

var bgImg;

var x1 = 0;

var x2;

var scrollSpeed = 2;

let sticks;

​

let noteSounds = {}; // Object to store sound files

let activeNote = null; // Keep track of the currently active note

​

let instructionText = "Hi, welcome to Iron Knock!\n\nThis game was designed to give you a tatse of Trinidad and Tobago's rich musical culture via their national instrument, the steelpan!\n\nClick the mouse to explore the notes, create your own music, and have fun!\n\nThis game was designed for relaxation and creativity, so there are no winners or losers and no fixed rules or objectives.\n\n Play at your own pace and have fun exploring the beautiful world of steel pan music.";

​

function preload() {

  // Load the background image and custom font

  backgroundImage = loadImage('pan.jpg');

  customFont = loadFont('BlackOps.ttf');

  bgImg = loadImage("crowd.jpg");

  introSound = loadSound('intro.mp3');

  sticks= loadImage('sticks.png');

​

  // Load sound files for each note and store them in the noteSounds object

  noteSounds.A = loadSound('Ao.mp3');

  noteSounds.D= loadSound('Do.mp3');

  noteSounds.G = loadSound('Go.mp3');

  noteSounds.C= loadSound('Co.mp3');

  noteSounds.F = loadSound('Fo.mp3');

  noteSounds["B♭"]= loadSound('bflato.mp3');

  noteSounds["E♭"] = loadSound('eflato.mp3');

  noteSounds["G#"]= loadSound('gsharpo.mp3');

  noteSounds["C#"] = loadSound('csharpo.mp3');

  noteSounds["F#"] = loadSound('fsharpo.mp3');

  noteSounds.B = loadSound('Bo.mp3');

  noteSounds.E = loadSound('Eo.mp3');

​

  // Load sound files for the middle row

  noteSounds.Am = loadSound('Am.mp3');

  noteSounds.Dm = loadSound('Dm.mp3');

  noteSounds.Gm = loadSound('Gm.mp3');

  noteSounds.Cm= loadSound('Cm.mp3');

  noteSounds.Fm = loadSound('Fm.mp3');

  noteSounds["B♭m"]= loadSound('bflat.mp3');

  noteSounds["E♭m"] = loadSound('Eflatm.mp3');

  noteSounds["G#m"]= loadSound('Gsharpm.mp3');

  noteSounds["C#m"] = loadSound('Csharpm.mp3');

  noteSounds["F#m"] = loadSound('Fsharpm.mp3');

  noteSounds.Bm = loadSound('Bm.mp3');

  noteSounds.Em = loadSound('Em.mp3');

​

  // Load sound files for the core row

  noteSounds.e = loadSound('Ei.mp3');

  noteSounds.d = loadSound('Di.mp3');

  noteSounds.c = loadSound('Ci.mp3');

  noteSounds["e♭"] = loadSound('eflati.mp3');

  noteSounds["c#"] = loadSound('csharpi.mp3');

​

}

//

function setup() {

  createCanvas(800, 600);

  x2 = width;

  smooth();

  sticks.resize(90, 0);

​

 // Create HTML elements for the buttons

  startButton = createButton('Lewwe Go!');

  startButton.style('background-color','red');

  startButton.style('font-size','25px');

  startButton.style('font-family', 'Black Ops One, sans-serif');

  //startButton.style('border-radius', '20px');

  startButton.position(width / 2-290 , height / 2 + 180);

  startButton.mousePressed(startPlaying);

​

  endButton = createButton('Party Done!');

  endButton.style('background-color','red');

  endButton.style('font-size','25px');

  endButton.style('font-family', 'Black Ops One, sans-serif');

  endButton.position(width / 2 -70, height - 50);

  endButton.hide(); // Initially hide the end button

  endButton.mousePressed(endPlaying);

  instructionButton = createButton('How to Play');

  instructionButton.style('background-color', 'red');

  instructionButton.style('font-family', 'Black Ops One, sans-serif');

  instructionButton.style('font-size', '25px');

  instructionButton.position(width / 2 + 120, height / 2 +180 );

  //instructionButton.hide(); // Initially hide the instruction button

  instructionButton.mousePressed(showInstructions);

​

  noLoop(); // Stop automatic looping to control animation manually

}

​

function draw() {

  if (isIntroduction) {

    // Display the background image

    image(backgroundImage, 0, 0, width, height);

​

    // Apply custom font and stroke settings only to the introduction page

    push(); // Save the current drawing settings

    textFont(customFont);

    fill('white');

    strokeWeight(5);

    stroke('black');

    textSize(50);

    textAlign(CENTER, CENTER);

    text('Iron Knock', width / 2, height / 2 - 250);

    textSize(20);

    text('Press "lewwe go!" to start the game', width / 2, height / 2 - 200);

    playIntroductionSound();

    pop(); // Restore the previous drawing settings

  } else if (isInstructions) {

    // Display the instruction screen

    background(255); // Set a different background for instructions

​

    push(); // Save the current drawing settings

    textFont(customFont);

    fill('black');

    textSize(20);

    textAlign(LEFT); // Set the text alignment to LEFT for a paragraph

    text(instructionText, 20, 20, width - 40, height + 40); // Adjust the coordinates and dimensions as needed

    pop(); // Restore the previous drawing settings

    instructionButton.hide();

    startButton.show();

    instructionButton.mousePressed(startPlaying);

  } else if (isPlaying && steelPan) { // Check if steelPan is defined

    // Display the steel pan and set a different background when playing

    image(bgImg, x1, 0, width, height);

    image(bgImg, x2, 0, width, height);

    x1 -= scrollSpeed;

    x2 -= scrollSpeed;

    if (x1 < -width){

      x1 = width;

    }

    if (x2 < -width){

      x2 = width;

    }

    steelPan.draw();

    let imgX = mouseX;

    let imgY = mouseY;

​

  // Display the image at the mapped position

  image(sticks, imgX, imgY);

  }

}

function showInstructions() {

  isInstructions = true;

  isIntroduction = false;

  isPlaying = false;

  // Hide the start button and instruction button

  startButton.hide();

  instructionButton.show();

  endButton.hide();

  //playIntroductionSound();

  redraw(); // Redraw the canvas to show the instruction screen

}

function startPlaying() {

  isPlaying = true;

  isIntroduction = false; // Switch to the game screen

  isInstructions = false;

  loop(); // Start the animation loop

​

  // Hide the start button and show the end button

  startButton.hide();

  instructionButton.hide();

  endButton.show();

​

  // Initialize the game or reset it

  if (!steelPan) {

    steelPan = new SteelPan(12, 12, 5, 160, 100, 40);

  }

  stopIntroductionSound();

}

​

function endPlaying() {

  isPlaying = false;

  isIntroduction = true; // Switch back to the introduction screen

  isInstruction =false;

  noLoop(); // Stop the animation loop

​

  // Stop any currently playing sounds

  if (activeNote) {

    noteSounds[activeNote].stop();

    activeNote = null;

  }

​

  // Hide the end button

  endButton.hide();

​

​

  // Show the start button

  startButton.show();

  instructionButton.show(); 

  playIntroductionSound();

  // Redraw the introduction screen

  redraw();

}

function playIntroductionSound() {

  if (isIntroduction) {

    introSound.play();

  }

}

​

function stopIntroductionSound() {

  if (isPlaying) {

    introSound.stop();

  }

}

​

function mouseClicked() {

  if (isPlaying && steelPan) {

    for (let i = 0; i < steelPan.outerCount; i++) {

      let angleOuter = i * steelPan.angleIncrementOuter;

      let x = width / 2 + cos(angleOuter) * steelPan.outerRadius;

      let y = height / 2 + sin(angleOuter) * steelPan.outerRadius;

      let circleSize = 50;

​

      if (dist(mouseX, mouseY, x, y) < circleSize / 2) {

        let note = steelPan.outerLabels[i];

        if (activeNote) {

          noteSounds[activeNote].stop();

        }

        noteSounds[note].play();

        activeNote = note;

        break; // Exit the loop after playing the clicked note

      }

    }

    for (let i = 0; i < steelPan.middleCount; i++) {

      let angleMiddle = i * steelPan.angleIncrementMiddle;

      let x = width / 2 + cos(angleMiddle) * steelPan.middleRadius;

      let y = height / 2 + sin(angleMiddle) * steelPan.middleRadius;

      let circleSize = 50;

​

      if (dist(mouseX, mouseY, x, y) < circleSize / 2) {

        let note = steelPan.middleLabels[i];

        if (activeNote) {

          noteSounds[activeNote].stop();

        }

        noteSounds[note].play();

        activeNote = note;

        break; // Exit the loop after playing the clicked note

      }

    }

    for (let i = 0; i < steelPan.coreCount; i++) {

      let angleCore = i * steelPan.angleIncrementCore;

      let x = width / 2 + cos(angleCore) * steelPan.coreRadius;

      let y = height / 2 + sin(angleCore) * steelPan.coreRadius;

      let circleSize = 30;

​

      if (dist(mouseX, mouseY, x, y) < circleSize / 2) {

        let note = steelPan.coreLabels[i];

        if (activeNote) {

          noteSounds[activeNote].stop();

        }

        noteSounds[note].play();

        activeNote = note;

        break; // Exit the loop after playing the clicked note

      }

    }

  }

}

​

​