let pressed= [];

let notes = ['C', 'C#','D','Eb','E','F','F#','G','G#','A','Bb','B','C',];

let keys=['a','w','s','e','d','f','t','g','y','h','u','j','k',];

let octave;

let freeverb;

let distort;

let sampler;

let cat;

let eye;

let mouth;

​

​

let Fslider;

let Fslidertext;

let octave_text;

​

​

//this code was written by I-Hsuan Lin, Sep,2022

​

function preload(){

  cat =loadImage("cat.png");

  eye=loadImage("eyes.png");

}

​

function setup() {

createCanvas(500,500,WEBGL);

​

///cat mouth open

mouth= 255;

​

//gui

Fslider = createSlider(0.001,1,0.5,0.1);

Fslider.position(120, 90);

​

​

//text

Fslidertext= createGraphics(150,150);

Fslidertext.fill(0);

Fslidertext.textAlign(CENTER);

Fslidertext.text("Freeverb Roomsize",80,50);

​

octave_text=createGraphics(300,150) ;

octave_text.fill(0);

octave_text.textAlign(RIGHT);

octave_text.text("Press up & down key to change octave",300,150);

​

​

//default octave

octave=3;

​

​

// if your want to use exist samples to midi note, use this sampler function below

sampler= new Tone.Sampler({

urls: {

    "E4": "cat-meow01.wav", // the reference file

  // the source of this wav file: https://freesound.org/people/tuberatanka/sounds/110011/

  },

  release: 1,

}).toDestination();

​

​

//if you want to use oscillators to create meow sound, use this polysynth function below

synth = new Tone.PolySynth(Tone.MonoSynth).toDestination();

synth.set({

    "oscillator": {

        "type": "sawtooth",

    },

    "filter": {

        "Q": 6,

        "type": "bandpass",

        "rolloff": -12,

    },

    "envelope": {

        "attack": 0.1,

        "decay": 0.1,

        "sustain": 0.3,

        "release": 2,

    },

    "filterEnvelope": {

        "attack": 0.04,

        "attackCurve":"exponential",

        "decay": 0.5,

        "decayCurve": "exponential",

        "sustain": 0.3,

        "release": 0.6,

        "baseFrequency": 800,

        "octaves": 2,

    },

​

​

});

​

​

// audio effects

freeverb = new Tone.Freeverb(0.5,3000).toDestination();

distort = new Tone.Distortion(0.5).toDestination(); 

//chainning the audio effects

​

//sampler.chain(freeverb);

synth.chain(distort,freeverb);

​

​

​

​

}

​

​

function draw() {

rectMode(CENTER);

background(250);

​

​

​

​

//keywhite

keyboard_model(pressed[0],-width/13.0*12,5,-10,255,150,40);

keyboard_model(pressed[2],-width/13.0*11,5,-10,255,150,40);

keyboard_model(pressed[4],-width/13.0*10,5,-10,255,150,40);

keyboard_model(pressed[5],-width/13.0*9,5,-10,255,150,40);

keyboard_model(pressed[7],-width/13.0*8,5,-10,255,150,40);

keyboard_model(pressed[9],-width/13.0*7,5,-10,255,150,40);

keyboard_model(pressed[11],-width/13.0*6,5,-10,255,150,40);

keyboard_model(pressed[12],-width/13.0*5,5,-10,255,150,40);

​

///keyblack

keyboard_model(pressed[1],-width/13.0*11-15,-20,15,0,100,25);

keyboard_model(pressed[3],-width/13.0*10-10,-20,15,0,100,25);

keyboard_model(pressed[6],-width/13.0*8-15,-20,15,0,100,25);

keyboard_model(pressed[8],-width/13.0*7-15,-20,15,0,100,25);

keyboard_model(pressed[10],-width/13.0*6-15,-20,15,0,100,25);

​

// using slider values to change freeverb value

freeverb.roomSize.value= Fslider.value();

​

// hint texts

push();

texture(Fslidertext);

translate(-150,-180);

noStroke();

rect(0,0,150,150);

pop();

​

push();

texture(octave_text);

translate(-100,-60);

noStroke();

rect(0,0,300,150);

pop();

​

// not very important, I just want to put a cat on the top of the keyboard 

push();

texture(cat);

translate(0,-100,0);

noStroke();

rect(0,0,160,150);

pop();

​

// making cat's eyes blink

push();

texture(eye);

translate(0,-110,0);

if(frameCount% 107==1)

{scale(1.0,0.1);}

else{scale(1,1);}

noStroke();

rect(0,0,85,40);

pop();

​

// press the key and cat will sing

push();

fill(mouth);

noStroke();

translate(0,-150,0);

triangle(-10, 73, -1, 60, 8, 73);

pop();

}

​

​

function keyPressed(){

  for(let i=0;i<12;i++){ // controls assigning keys from c to b

if(key==keys[i]){

synth.triggerAttackRelease(notes[i]+octave.toString(), "8n"); 

//sampler.triggerAttackRelease(notes[i]+octave.toString(), "8n"); 

pressed[i]=1;

mouth=0;

}

}

if(key==keys[12]){ // controls the assigning keys for c from next octave 

let high_c=octave+1;

synth.triggerAttackRelease(notes[12]+(octave+1).toString(), "8n");

//sampler.triggerAttackRelease(notes[i]+octave.toString(), "8n");   

pressed[12]=1; 

mouth=0;

}

​

// control octave with up and down keys

if(keyCode== UP_ARROW){octave+=1; }

if(keyCode== DOWN_ARROW){octave-=1;}

}

​

​

function keyReleased(){

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

if(key==keys[i]){pressed[i]=0; mouth= 255;}

}

​

}

​

​

​

​

// creating the keyboard and keyboard pressing visual effect

function keyboard_model( _pressed,positionX,positionY,positionZ,keycolor,keylength,keywid){

push();

​

​

​

if(_pressed==1){

​

  translate(positionX+320.0,positionY+100,positionZ-20);

​

}

else{translate(positionX+320.0,positionY+100,positionZ);}

​

​

fill(keycolor);

box(keywid,keylength,30);

pop();

​

}