// as array of class

​

let x = 20, y = x, w = 150, h = w, offset = 8, grid = 3, many = grid * grid;

let shownum = true; //false;

let mytiles = []; // array of "OneRect", long "many"

// https://discourse.processing.org/t/project-help-adding-sound/9368

// https://discourse.processing.org/t/p5-project-questions/9520/3

let mysel = -1; // 0 .. 9 global selector by tile (click / keyboard )

let playfile = [

  'RollingSuitcase.mp3', // now add the play file list

  'Airportambiance.mp3',

  'SeatbeltSound.mp3',

  'SeatbeltClick.mp3',

  'AirplaneTakeOff.mp3',

  'Eating.mp3',

  'Water.mp3',

  'AirplaneToilet.mp3',

  'AirplaneLanding.mp3'

];

​

let mysongs = [];

​

function preload() {

  soundFormats('mp3');

  for (let i = 0; i < many; i++) mysongs[i] = loadSound(playfile[i]);

}

​

function setup() {

  createCanvas(500, 500);

  noStroke();

  make_myRects();

}

​

function draw() {

  background(0, 200, 200);

  textSize(15);

  if (shownum) text(nf(frameRate(), 2, 1) + " fps, mysel:" + mysel, 5, 13);

  draw_myRects();

}

​

function make_myRects() {

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

    let posx = x + (i % grid) * (w + offset);

    let posy = y + (floor(i / grid)) * (h + offset);

    let cR = random(127, 255);

    let cG = random(127, 255);

    let cB = random(127, 255);

    mytiles.push(new OneRect(posx, posy, cR, cG, cB, i));

  }

}

​

function draw_myRects() {

  for (let i = 0; i < many; i++) mytiles[i].draw();

}

​

class OneRect {

  constructor(posx, posy, cR, cG, cB, id) {

    this.posx = posx;

    this.posy = posy;

    this.cR = cR;

    this.cG = cG;

    this.cB = cB;

    this.id = id;

  }

​

  over() {

    if (mouseX > this.posx & mouseX < this.posx + w & mouseY > this.posy & mouseY < this.posy + h) return true;

    return false;

  }

​

  mouseselect() {

    if (this.over() && mouseIsPressed) {

      mysel = this.id; // 0 ..8 

      if (shownum) print("select " + (mysel + 1)); // but show 1 .. 9

      play_onesong();

    }

  } // end class

​

  draw() {

    strokeWeight(8);

    fill(this.cR, this.cG, this.cB);

    if (this.over()) stroke(200, 0, 0);

    else if (this.id == mysel) stroke(0, 200, 0);

    else noStroke();

    rect(this.posx, this.posy, w, h); // w,h, from GLOBAL or draw any other shape/text on that position

    fill(200, 0, 0);

    strokeWeight(3);

    textSize(25);

    if (shownum) text((this.id + 1), this.posx + 25, this.posy + h / 2);

    this.mouseselect();

  }

}

​

function play_onesong() {

      for (let i = 0; i < many; i++) mysongs[i].stop();

      mysongs[mysel].play(); // start only this one

}

​

function keyPressed() {

  if (shownum) print("key " + key + " keyCode " + keyCode);

  if (key == '1') mysel = 0;

  if (key == '2') mysel = 1;

  if (key == '3') mysel = 2;

  if (key == '4') mysel = 3;

  if (key == '5') mysel = 4;

  if (key == '6') mysel = 5;

  if (key == '7') mysel = 6;

  if (key == '8') mysel = 7;

  if (key == '9') mysel = 8;

  play_onesong();

}

​

​

/*

​

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

​

function preload() {

  soundFormats('mp3');

  rollingsuitcase = loadSound('RollingSuitcase.mp3');

  airportambiance = loadSound('Airportambiance.mp3');

  seatbeltsound = loadSound('SeatbeltSound.mp3');

  seatbeltclick = loadSound('SeatbeltClick.mp3');

  airplanetakeoff = loadSound('AirplaneTakeOff.mp3');

  eating = loadSound('Eating.mp3');

  water = loadSound('Water.mp3');

  toiletflush = loadSound('AirplaneToilet.mp3');

  airplaneland = loadSound('AirplaneLanding.mp3');

}

​

function setup() {

  createCanvas(500, 500);

  colorMode(HSB);

}

​

function draw() {

  background(0);

    strokeWeight(1);

    stroke(255);

    i = 0;

    for (var x = 50; x < width; x = x + 180)

    for (var y = 50; y < 500; y = y + 180) {

    ellipse(x, y, 25, 25);

    text(numbers[ i ], x, y);

    i++;

    }

}

 function mousePressed() {

  // Check if mouse is inside the circle

  let d = dist(mouseX, mouseY, 50, 50);

  if (d < 10) {

    // Play corresponding sound

  rollingsuitcase.play();

  }  

}

​

*/