SI14/myTools.js

/*
 myTools  KLL
 use extra js file here in root
 name: myTools.js
 idea is to develop it here ( master ) and download / upload to other projects.
 content: 
 
 functions to call:

 logo(x,y,radius,speed);
 
 mysong( true/false ); //________________ from anywhere to start stop song
 //______________________________________ here as example linked into the Button press action


//_________________________________ !!
<!-- 
 need 
    <script src="myTools.js"></script>  
 inside index.html
-->

*/

//________________________________________________________ FUNCTIONS MYSOUND


let song;

function preload() {
  song = loadSound('sound/loop5.mp3');
}

function mysong( go ) {
  if ( go && !song.isLooping() ) song.loop();
  if ( !go && song.isLooping() ) song.pause();
}


function mouseVolume() {//___ test a simple mouse slider for volume
   if ( song.isLooping() ) {
     fill(200);
     triangle(10,height-10, width-10,height-30,width-10,height-10);
     let amp = map(mouseX, 0, width,0,1);
     fill(200,0,0);
     rect( amp*width,height-30,5,20);
     //print(amp);
     masterVolume(amp);
   }
}



//________________________________________________________ FUNCTION LOGO
var ang = 0;

function logo(x, y, r, dang) {
  var d1 = 2 * r;
  var d2 = 2 * r / sqrt(2);
  ang += dang; //__________________ animation
  push();
  fill(255); //____________________ fill same all 3 shapes
  strokeWeight(4);
  stroke(200, 200, 0); //__________ here same as main background gives a nice effect
  ellipseMode(CENTER);
  rectMode(CENTER);
  translate(x + r, y + r); //______ CENTER thinking
  push();
  rotate(-ang); //__________________ animate first bigger rect
  rect(0, 0, d1, d1);
  pop();
  ellipse(0, 0, d1, d1);
  rotate(ang); //_________________ animate second smaller rect  
  rect(0, 0, d2, d2);
  textAlign(CENTER, CENTER);
  textSize(20);
  text("K L L", 0, 0);
  pop();
}

/*
 __________________________________ classes declared:
 
 class Button
 declare:
  var button;
  Button button(x, y, w, h, sel, textFalse, textTrue, id);
 methods:
  button.draw(); //_______________ from draw
  button.mousePressed(); //_______ local use global mymouseClicked
  boolean button.over(); //_______ local
  
*/

class Button { //____________________________________ begin class
  constructor(xi, yi, wi, hi, seli, atextisel,atextinosel, idi) {
    this.xb = xi;
    this.yb = yi;
    this.wb = wi;
    this.hb = hi;
    this.selb = seli;
    this.textbsel = atextisel;
    this.textbnosel = atextinosel;
    this.idb = idi;
  }

  draw() {
    this.mousePressed();
    strokeWeight(3);
    if (this.selb) fill(0, 200, 0);
    else fill(0, 0, 200);
    if (this.over()) stroke(200, 0, 200);
    else stroke(0, 200, 200);
    rect(this.xb, this.yb, this.wb, this.hb);

    noStroke();
    fill(200);
    textSize(30);
    if ( this.selb ) text(this.textbnosel, this.xb + 5, this.yb + this.hb - 8);
    else text(this.textbsel, this.xb + 5, this.yb + this.hb - 8);
  }

  over() {
    return (mouseX > this.xb & mouseX < this.xb + this.wb & mouseY > this.yb & mouseY < this.yb + this.hb);
  }

  mousePressed() {
    //    if (this.over() && mouseIsPressed) {
    if (this.over() && mymouseClicked) {
      mymouseClicked = false; // reset global
      this.selb = ! this.selb; // toggle;
      mysong( this.selb ); //__________________________ start stop sound
    }
  }

} //___________________________________________________ end class