You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.4 KiB
JavaScript
138 lines
3.4 KiB
JavaScript
/*
|
|
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
|
|
|