constructor(x) {

    let whitekeys = ["C", "D", "E", "F", "G", "A", "B"];

    this.note = whitekeys[x % 7];

    this.octave = Math.floor(x / 7);

    fill("white");

    stroke("gray");

    rect(10 + 30 * x, 100, 30, 150, 3);

    fill("black");

    textFont(font);

    textAlign(CENTER);

    text(whitekeys[x % 7], 25 + 30 * x, 235);

  }

}

​

class BlackKey {

  constructor(x) {

    let blackkeys = ["C#", "D#", "F#", "G#", "A#"];

    this.note = blackkeys[x % 5];

    this.note = blackkeys[x];

    fill("black");

    rect(30 + 30 * x, 100, 20, 75, 3);

    fill("white");

    textFont(font);

    textAlign(CENTER);

    text(blackkeys[x % 5], 40 + 30 * x, 165);

  }

}

​

let screen = 0;

let StartScreenImage;

let font;

let WhiteKeys = [];

let BlackKeys = [];

let kittie = [];

​

function mouseClicked() {

  if (screen == 0) {

    screen = 1;

    print(screen);

  }

}

​

function preload() {

  StartScreenImage = loadImage("start_screen.png");

  font = loadFont("Montserrat-VariableFont_wght.ttf");

}

​

function setup() {

  createCanvas(650, 650);

}

​

function draw() {

  if (screen == 0) {

    image(StartScreenImage, 0, 0, 650, 650);

  }

​

  if (screen == 1) {

    background(252, 249, 245);

    fill("black");

    rect(0, 0, width, 100);

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

      WhiteKeys[i] = new WhiteKey(i);

    }

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

      if (i != 2 && i != 6 && i != 9 && i != 13 && i != 16 && i != 20) {

        BlackKeys[kittie] = new BlackKey(i);

        kittie = kittie + 1;

      }

    }

  }

}

​