​

let channels = [36, 37, 38, 39, 40, 41, 42, 43];

​

let notes = [60, 62, 64, 65, 67, 69, 71, 72];

​

let colors = [0, 30, 60, 90, 120, 240, 270, 300];

​

let x = 50;

​

let show = false;

​

let osc, env, button;

​

function preload() {

  // Ensure the .ttf or .otf font stored in the assets directory

  // is loaded before setup() and draw() are called

  font = loadFont("assets/MarvinVisionsBig-Bold.otf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB);

​

  // Set text characteristics

  textFont(font);

  textSize(fontsize);

  textAlign(CENTER, CENTER);

​

  // Create a button and place it beneath the canvas.

  button = createButton("START");

  button.size(100, 50);

  button.position(width / 2.15, height / 2);

  button.style("font-family", "MarvinVisionsBig-Bold");

  button.style("font-size", "25px");

  button.style("border-radius", "15px");

  button.style("background-color", "#FFFFFF");

  button.style("border", "none");

  button.mouseClicked(startExperience);

}

​

function draw() {

  background(0, 255);

  drawWords(width / 2);

​

  if (!show) return;

  textAlign(CENTER);

​

  push();

​

  translate(width / 2.65, height / 3);

  //scale(1, -1);

​

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

    fill(100, 0, 100);

​

    if (channel && channel == channels[i]) {

      fill(colors[i], 100, 100);

      osc.freq(midiToFreq(notes[i]));

​

      if (value < 127) {

        env.play();

      } else {

        fill(100, 0, 100);

      }

    }

​

    rect(i * 50, 50, 40, 200, 10);

  }

​

  pop();

  drawWords(width / 2);

}

​

function keyPressed() {

  env.play();

}

​

function drawWords(x) {

  // The text() function needs three parameters:

  // the text to draw, the horizontal position,

  // and the vertical position

  fill(255);

  text("MIDI XYLOPHONE", x, height / 1.5);

}

​

function startExperience() {

  if (button) {

    button.hide();

    show = true;

​

    env = new p5.Envelope();

​

    env.setADSR(0.01, 0.1, 1, 0.25);

​

    osc = new p5.Oscillator("triangle");

    osc.start();

    osc.amp(env);

  }

}

​