//created by Mirette Dahab 

//November 5,2024

//Created as part of a timbre study for The Code of Music 

​

​

//Sampling the sounds

​

//Piano

let PianoSampler = new Tone.Sampler({

    "A4": "sounds/PianoA4.wav"

})

let pVibrato = new Tone.Vibrato({frequency: 3, depth:0.35});

PianoSampler.connect(pVibrato);

let pTremolo = new Tone.Tremolo({frequency: 15, depth:0.9});

pTremolo.start();

pVibrato.connect(pTremolo);

pTremolo.toDestination();

​

​

//Flute

let FluteSampler = new Tone.Sampler({

    "C4": "sounds/FluteC4.wav"

})

let fVibrato = new Tone.Vibrato({frequency: 3, depth:0.35});

FluteSampler.connect(fVibrato);

let fTremolo = new Tone.Tremolo({frequency: 15, depth:0.9});

fTremolo.start();

fVibrato.connect(fTremolo);

fTremolo.toDestination();

​

//Guitar

let GuitarSampler = new Tone.Sampler({

    "A4": "sounds/GuitarA4.wav"

})

let gVibrato = new Tone.Vibrato({frequency: 3, depth:0.35});

GuitarSampler.connect(gVibrato);

let gTremolo = new Tone.Tremolo({frequency: 15, depth:0.9});

gTremolo.start();

gVibrato.connect(gTremolo);

gTremolo.toDestination();

​

//Violin

let ViolinSampler = new Tone.Sampler({

    "A4": "sounds/ViolinA4.wav"

})

let vioVibrato = new Tone.Vibrato({frequency: 5, depth:0.35});

ViolinSampler.connect(vioVibrato);

let vioTremolo = new Tone.Tremolo({frequency: 15, depth:0.9});

vioTremolo.start();

vioVibrato.connect(vioTremolo);

vioTremolo.toDestination();

​

//trumpet

let TrumpetSampler = new Tone.Sampler({

    "B4": "sounds/trumpetB4.wav"

})

let tVibrato = new Tone.Vibrato({frequency: 3, depth:0.35});

TrumpetSampler.connect(tVibrato);

let tTremolo = new Tone.Tremolo({frequency: 15, depth:0.9});

tTremolo.start();

tVibrato.connect(tTremolo);

tTremolo.toDestination();

​

//initialising the sampler envelopes

PianoSampler.envelope = { attack: 0.2, decay: 0.2, sustain: 0.8, release: 1.0 };

FluteSampler.envelope = { attack: 0.2, decay: 0.3, sustain: 0.7, release: 0.9 };

GuitarSampler.envelope = { attack: 0.4, decay: 0.1, sustain: 0.5, release: 1.2 };

ViolinSampler.envelope = { attack: 0.5, decay: 0.2, sustain: 0.6, release: 1.1 };

TrumpetSampler.envelope = { attack: 0.3, decay: 0.2, sustain: 0.9, release: 0.8 };

​

​

let samplerArray = [PianoSampler, FluteSampler, GuitarSampler, ViolinSampler, TrumpetSampler];

​

//Wave Form

let analyzer = new Tone.Waveform(256);

​

//combining Samplers for Visualization

let masterGain = new Tone.Gain().toDestination();

samplerArray.forEach(sampler => sampler.connect(masterGain));

​

//connect masterGain to analyzer for waveform visualization

masterGain.connect(analyzer);

​

let loaded = false;

let sqArray = []; //2d array that stores square objects for the grid

​

let vibState = false;

let tremState = false;

​

let attackVal = 1;

let releaseVal = 1;

​

function preload(){

  cursivefont = loadFont('fonts/Pacifico-Regular.ttf');

  regularfont = loadFont('fonts/Atma-Regular.ttf');

}

​

function setup(){

  createCanvas(500,600);

  //ADD THE SOUND FILES

  sqArray = [ [new Square("A4", 1,1), new Square("A4", 1,2), new Square("A4", 1,3), new Square("A4", 1,4), new Square("A4", 1,5) ], [new Square("B4", 2,1), new Square("B4", 2,2), new Square("B4", 2,3), new Square("B4", 2,4), new Square("B4", 2,5) ], [new Square("C5", 3,1), new Square("C5", 3,2), new Square("C5", 3,3), new Square("C5", 3,4), new Square("C5", 3,5) ], [new Square("D5", 4,1), new Square("D5", 4,2), new Square("D5", 4,3), new Square("D5", 4,4), new Square("D5", 4,5) ] ];

}

​

function draw(){

    background(217);

    fill(0);

    noStroke();

    rect(55,500,390,95);

    textFont(cursivefont);

    textSize(30);

    text("Mini Synth", width/2-80, 35)

    textFont(regularfont);

    //first column

    fill(12, 192, 223);

    rect(50,110,80,320);

    fill(0);

    textSize(16);

    text("Piano", 70, 89)

​

    //second column

    fill(255, 189, 89);

    rect(130,110,80,320);

    fill(0);

    textSize(16);

    text("Flute", 153, 89)

​

    //third column

    fill(255, 222, 89);

    rect(210,110,80,320);

    fill(0);

    textSize(16);

    text("Guitar", 231, 89)

​

    //fourth column

    fill(82, 113, 255);

    rect(290,110,80,320);

    fill(0);

    textSize(16);

    text("Violin", 313, 89)

​

    //fifth column

    fill(255, 87, 87);

    rect(370,110,80,320);

    fill(0);

    textSize(16);

    text("Trumpet", 383, 89);

    stroke(255);  

    //framing lines

    line(0,50,width, 50);  

    line(50,50,50,height);

    line(450,50,450,height); 

    //vertical lines

    line(130,50,130,430);  

    line(210,50,210,430);  

    line(290,50,290,430);

    line(370,50,370,430); 

​

    //horizontal lines

    line(50,110,450,110); 

    line(50,190,450,190); 

    line(50,270,450,270);

    line(50,350,450,350);

    line(50,430,450,430);

    line(50,495,450,495);

    //buttons

    fill(115, 115, 115);

    noStroke();

    ellipse(130, 455, 37); //vibrato

    ellipse(210, 455, 37); //tremolo

    ellipse(290, 455, 37); //filter

    ellipse(370, 455, 37); //oscillator

​

    fill(vibState ? 90 : 70);

    ellipse(130, 455, 25);

    fill(tremState ? 90 : 70);

    ellipse(210, 455, 25);

    textSize(12);

    fill(255);

​

    text(attackVal,287,460);

    text(releaseVal,367,460);

    //labels

    textSize(14);

    fill(0);

    text("Vibrato",110,485);

    text("Tremolo",188,485);

    text("Attack",270,485);

    text("Release",350,485);

​

  let waveform = analyzer.getValue();

​

  strokeWeight(2);

  noFill();

  stroke(0, 191, 99);

  beginShape();

  for (let i = 0; i < waveform.length; i++) {

    let x = map(i, 0, waveform.length, 57, width-55);

    let y = map(waveform[i], -1, 1, height, 500);

    vertex(x, y);

  }

  endShape();

  //toggling the Vibrato effect

  if(vibState){

    pVibrato.wet.value = 1;

    fVibrato.wet.value = 1;

    gVibrato.wet.value = 1;

    vioVibrato.wet.value = 1;

    tVibrato.wet.value = 1;

  }else{

    pVibrato.wet.value = 0;

    fVibrato.wet.value = 0;

    gVibrato.wet.value = 0;

    vioVibrato.wet.value = 0;

    tVibrato.wet.value = 0;

  }

    //toggling the Vibrato effect

  if(tremState){

    pTremolo.wet.value = 1;

    fTremolo.wet.value = 1;

    gTremolo.wet.value = 1;

    vioTremolo.wet.value = 1;

    tTremolo.wet.value = 1;

  }else{

    pTremolo.wet.value = 0;

    fTremolo.wet.value = 0;

    gTremolo.wet.value = 0;

    vioTremolo.wet.value = 0;

    tTremolo.wet.value = 0;

  }

  //INSTRUCTIONS POPUP

  fill(90);

  noStroke();

  ellipse(25,25,20);

  fill(255);

  text("i", 23,30);

  if(mouseX > 15 && mouseX< 35 && mouseY> 15 &&mouseY < 35){

    fill(190);

    rect(25,15,450,300,20);

    fill(0);

    textFont(cursivefont);

    textSize(28);

    text("Instructions", 180, 58);

    textFont(regularfont);

    textSize(16);

    text("-Press on any square in a specific column to play the sound", 50, 100);

    text(" of that instrument.", 50, 120);

    text("-Each row has a note from A4-D4 correspondingly.", 50, 150);

    text("-Click on Vibrato and Tremolo buttons to toggle the effects On/Off.", 50, 180);

    text("-Click on upper half of Attack and Release buttons to increase", 50, 210);

    text(" the attack and release of the sounds.", 50, 230);

        text("-Click on lower half of Attack and Release buttons to decrease", 50, 260);

    text(" the attack and release of the sounds.", 50, 280);

  }

}

​

class Square{

  constructor(pitch, row, column){

    this.pitch = pitch;

    this.column = column;

    this.row = row;

  }

}

​

​

function mouseClicked(){

  if(loaded){

    //IF THE GRID IS PRESSED

    if(mouseX> 50 && mouseX< width-50&& mouseY> 110 && mouseY< 430){

      let row, col;

      row = ceil((mouseY-110)/80);

      col = ceil((mouseX-50)/80);

      let pitch = sqArray[row-1][col-1].pitch;

      samplerArray[col-1].triggerAttack(pitch);

    }

  //IF THE VIBRATO IS CLICKED

  if(mouseX> 117.5 && mouseX< 142.5 && mouseY > 442.5 &&mouseY < 467.5){

    vibState = !vibState;

  }

  //IF THE TREMOLO IS CLICKED

  if(mouseX> 197.5 && mouseX< 222.5 && mouseY > 442.5 &&mouseY < 467.5)  {

    tremState = !tremState;  

   }

​

  //IF THE ATTACK IS CLICKED

  if(mouseX> 271.5 && mouseX< 308.5 && mouseY > 436.5 &&mouseY < 473.5) {

    if(mouseY<455 && attackVal <10){

      attackVal +=1;

    }else{

      if(mouseY>455 && attackVal>0){

        attackVal -=1;

      }

    }

    // Update sampler envelopes

    samplerArray.forEach(sampler => {

      sampler.attack = attackVal});

  }

  //IF THE RELEASE IS CLICKED

  if(mouseX> 351.5 && mouseX< 388.5 && mouseY > 436.5 && mouseY < 473.5){

    if(mouseY<455 && releaseVal <10){

      releaseVal +=1;

    }else{

      if(mouseY>455 && releaseVal>0){

        releaseVal -=1;

      }

    } 

    // Update sampler envelopes

    samplerArray.forEach(sampler => {

        sampler.release = releaseVal});

   }

  }

}

​

Tone.loaded().then(function(){

  loaded = true;

});