let info = 'Sound Hang by KLL';

​

// rev: play also with keyboard: [1][2][3][4][5][6][7][8][9] [a][s][d][f]

​

let dX = 400;

let dY = 650; // play here to fit to my mobile screen ratio

// and add later 20 more to canvas for info text line

let cX =dX/2;

let cY =dY/2;

let innerDx =dX/4;

let innerDy =dY/4

let outerDx =dX;

let outerDy =dY;

let mpad = 0;

​

var diagm = false;//true;

var diagp = false;//true;

​

let vol = 0.8; // master amp

​

function preload() {

//  blip = loadSound('assets/blip.mp3'); //__ blip.play();

//  blip.playMode('sustain');

//  blop = loadSound('assets/blop.mp3'); //__ blop.play();

//  blop.playMode('sustain');

  hp1 = loadSound('assets/1.mp3'); //__ 

  hp1.playMode('sustain');

  hp1.setVolume(vol);

  hp2 = loadSound('assets/2.mp3'); //__ 

  hp2.playMode('sustain');

  hp2.setVolume(vol);

  hp3 = loadSound('assets/3.mp3'); //__ 

  hp3.playMode('sustain');

  hp3.setVolume(vol);

  hp4 = loadSound('assets/4.mp3'); //__ 

  hp4.playMode('sustain');

  hp4.setVolume(vol);

  hp5 = loadSound('assets/5.mp3'); //__ 

  hp5.playMode('sustain');

  hp5.setVolume(vol);

  hp6 = loadSound('assets/6.mp3'); //__ 

  hp6.playMode('sustain');

  hp6.setVolume(vol);

  hp7 = loadSound('assets/7.mp3'); //__ 

  hp7.playMode('sustain');

  hp7.setVolume(vol);

  hp8 = loadSound('assets/8.mp3'); //__ 

  hp8.playMode('sustain');

  hp8.setVolume(vol);

  hp9 = loadSound('assets/9.mp3'); //__ 

  hp9.playMode('sustain');

  hp9.setVolume(vol);

// drums, files too loud and trigger some noise reduction on my PC???

  d10 = loadSound('assets/Doumbek-Tek.mp3'); //__ 

  d10.playMode('sustain');

  d10.setVolume(vol/4);

  d11 = loadSound('assets/Hand-Drum.mp3'); //__ 

  d11.playMode('sustain');

  d11.setVolume(vol/4);

  d12 = loadSound('assets/Hi-Bongo.mp3'); //__ 

  d12.playMode('sustain');

  d12.setVolume(vol/2);

  d13 = loadSound('assets/Low-Bongo.mp3'); //__ 

  d13.playMode('sustain');

  d13.setVolume(vol/2);

​

}

​

function setup() {

  createCanvas(dX,dY+20); //for tablet flat view ( fullscreen not work with android chrome?? )

  console.log(infolink);

  if (document.mozFullScreenElement === null) { // error fix for firefox

    print('on firefox browser ');

  } else {

    //print('not firefox browser ');

    fullscreen(true);

  }  

  // need kiosk app installed on MOBILE? 

}

​

function draw_pads() {

  background(200,200,0);

  fill('lightgreen');

  strokeWeight(8);

  stroke('blue');

  ellipse(cX,cY,outerDx,outerDy);

  for ( let i = 0.785398/2;i<=6.6758843;i+=0.785398) {  

    let eX =  cX*sin(i);

    let eY = -cY*cos(i);

    line(cX,cY,cX+eX,cY+eY); 

  }

  fill('cyan');

  ellipse(cX,cY,innerDx,innerDy); // make it a circle??

//  ellipse(cX,cY,innerDx,innerDx);

// _ start with pads numbers,  later show notes ??

  noStroke();

  fill('black');

  textSize(40);

  let cXt = cX-10;

  let cYt = cY+15;

  text('1',cXt,cYt); //____________ 1

  text(2,cXt,cYt+cY/1.5); //_______ 2     

  text(3,cXt-cX/2,cYt+cY/2.5); //__ 3     

  text(4,cXt+cX/2,cYt+cY/2.5); //__ 4    

  text(5,cXt-cX/1.5,cYt); //_______ 5     

  text(6,cXt+cX/1.5,cYt); //_______ 6    

  text(7,cXt-cX/2,cYt-cY/2.5); //__ 7     

  text(8,cXt+cX/2,cYt-cY/2.5); //__ 8    

  text(9,cXt,cYt-cY/1.5); //_______ 9

​

// _ percussion pads

  text('10',40,40); //_____________ 10 d10    

  text('11',dX-80,40); //__________ 11 d11     

  text('12',40,dY-20); //__________ 12 d12    

  text('13',dX-80,dY-20); //_______ 13 d13

​

// _ info line 

  fill('orange');

  rect(0,dY,dX,20);

  fill('blue');

  textSize(20);

  text(info,10,dY+18);

}

​

let mangle=0.0;

​

function detect_pads() {

  // first need a mouse/ellipse collision detect, hm.. not find one online??

  let m = createVector(mouseX-cX,mouseY-cY); //___ where is mouse as vector from center...

  mangle = m.heading();

  //if ( diagm ) print('m',mangle);

  if ( diagm ) stroke('red');

  if ( diagm ) strokeWeight(10);

  if ( diagm ) point(cX+m.x,cY+m.y);

  // make point / vector on the ellipse 

  //______________________________________________ there is a BUG in the angle

  let aoff = PI/2; 

  let eX =  sin(mangle+aoff) / 2;

  let eY =  -cos(mangle+aoff) / 2;

  let innerX = innerDx *eX;

  let innerY = innerDy *eY;

  let innerm = createVector(innerX,innerY); //____ ellipse point as vector from center...

  //if ( diagm ) print('innerm',innerm.heading());

  if ( diagm ) stroke('black');

  if ( diagm ) point(cX+innerX,cY+innerY);

  // make point / vector on the ellipse

  let outerX = outerDx *eX;

  let outerY = outerDy *eY;

  let outerm = createVector(outerX,outerY); //____ ellipse point as vector from center...

  //if ( diagm ) print('outerm',outerm.heading());

  if ( diagm ) stroke('black');

  if ( diagm ) point(cX+outerX,cY+outerY);

  mpad=-1; //__reset

  if ( m.mag() < innerm.mag() ) {

    mpad = 1;

  } else {

    // -0.392 / 0.392 / 1.178 / 1.963 / 2.748 / -0.392 / now look for mouse

    if ( mangle > -0.59 && mangle < 0.59 ) mpad = 6;

    if ( mangle >  0.59 && mangle < 1.32 ) mpad = 4;

    if ( mangle >  1.32 && mangle < 1.82 ) mpad = 2;

    if ( mangle >  1.82 && mangle < 2.54 ) mpad = 3;

    if ( mangle < -0.59 && mangle >-1.32 ) mpad = 8;

    if ( mangle < -1.32 && mangle >-1.82 ) mpad = 9;

    if ( mangle < -1.82 && mangle >-2.54 ) mpad = 7;

    if ( mangle < -2.54 || mangle > 2.54 ) mpad = 5;    

  }

  if ( m.mag() > outerm.mag() ) {

    if ( mangle >   0    && mangle < 1.570 ) mpad = 13;

    if ( mangle >  1.570 && mangle < 3.141 ) mpad = 12;

    if ( mangle <   0    && mangle >-1.570 ) mpad = 11;

    if ( mangle < -1.570 && mangle >-3.141 ) mpad = 10;

  }

​

}

​

//function touchStarted() { //_________________ made for use browser on tablet

  // BUG play old / last tap / sound

function touchEnded() { 

// works insofor for that error ( position now correct )

// but is just wrong as it plays only when release touch???

// same if you play desktop, it means mouse released....

  sound_out();

  return false; //___________ prevent default

}

​

function sound_out() {

  info = 'x '+nf(mouseX,0,0)+' y '+nf(mouseY,0,0)+' pad '+mpad; // copy to screen bottom

  if ( diagm ) info += ' m '+nf(mangle,0,2)  //nf(degrees(mangle),0,1)  

  if ( mpad == 1 ) hp1.play();

  if ( mpad == 2 ) hp2.play();

  if ( mpad == 3 ) hp3.play();

  if ( mpad == 4 ) hp4.play();

  if ( mpad == 5 ) hp5.play();

  if ( mpad == 6 ) hp6.play();

  if ( mpad == 7 ) hp7.play();

  if ( mpad == 8 ) hp8.play();

  if ( mpad == 9 ) hp9.play();

  if ( mpad == 10 ) d10.play();  

  if ( mpad == 11 ) d11.play();  

  if ( mpad == 12 ) d12.play();  

  if ( mpad == 13 ) d13.play();  

}

​

function draw() {

  draw_pads();

  detect_pads();

}

​

​

function keyPressed() { // works only if CANVAS active ( mouse click on it )

  if ( diagp ) console.log("key: "+key+" keyCode: "+keyCode);

  if ( key == 'm' ) {

    diagm = ! diagm;

    console.log('diagm ',diagm);

  }

  if ( key == '1' ) hp1.play();  

  if ( key == '2' ) hp2.play();  

  if ( key == '3' ) hp3.play();  

  if ( key == '4' ) hp4.play();  

  if ( key == '5' ) hp5.play();  

  if ( key == '6' ) hp6.play();  

  if ( key == '7' ) hp7.play();  

  if ( key == '8' ) hp8.play();  

  if ( key == '9' ) hp9.play();  

​

  if ( key == 'a' ) d10.play();  

  if ( key == 's' ) d11.play();  

  if ( key == 'd' ) d12.play();  

  if ( key == 'f' ) d13.play();

  info = 'key: '+key; // print (all) pressed key

/*

  //__________________________________ also we could just overwrite the pad 

  if ( key == '1' ) mpad = 1;  

  if ( key == '2' ) mpad = 2;  

  if ( key == '3' ) mpad = 3;  

  if ( key == '4' ) mpad = 4;  

  if ( key == '5' ) mpad = 5;  

  if ( key == '6' ) mpad = 6;  

  if ( key == '7' ) mpad = 7;  

  if ( key == '8' ) mpad = 8;  

  if ( key == '9' ) mpad = 9;  

​

  if ( key == 'a' ) mpad = 10;  

  if ( key == 's' ) mpad = 11;  

  if ( key == 'd' ) mpad = 12;  

  if ( key == 'f' ) mpad = 13;

  sound_out(); //_____________________ and play it like on mouse click

  //__________________________________ but not feels that responsive... pls. try

  */

  return false; // prevent any default behaviour

}

​

document.oncontextmenu = function() { // disable browser right mouse click

  return false;

}

​