Buttons and mousePressed

Processing Libraries
1

Hi, I did two kind of buttons, one is over the ET head, and link to other web page.
Then i find a way to add 4 other button on the rigth side. When i click from top to bottom in each one, each of them turn into white, one at a time. BUT when i get in the 4 ne the 3 goes black again. They seems to be linked some how. When click in betwen the 4 and 3 they react one to another.
And the white stroke supoused only to apear when the mouse is over the buttons, only in each one.
Also,a am trying to make the mouse change when over the buttons, like happen when its over the ET head.

Thanks guys

import processing.sound.*;
SoundFile soundfile;
PImage et;
float opacity = 0;
PImage img; 
PImage txt;
PImage trc;
boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

//botoes
int value1 = 0;
int value2 = 0;
int value3 = 0;
int value4 = 0;


void setup() {
  size(600, 600);


  // soundfile = new SoundFile(this, "fabFX.mp3");
  // soundfile.loop();

  //images
  trc = loadImage("Trance3.png");
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png");  // Load the image into the program
  et.resize(258, 458);
}

void draw() {
  background(0);  // total canva black

  // rect flahing/blinking
  int m = millis();
  fill(m % 200);              // velocity of flashs ** not working good ** maybe my computer..
  rect(25, 25, 555, 555, 30);
  //image(et, 130, 125 );
  // image(txt, 50, 40);


  //rgb
  tint(20, 17, 247, 100); // Alpha to 102 without changing the tint
  image(et, 140, 125 );
  tint(255, 0, 0, 80); // Tint to yellow, alpha to 153
  image(et, 120, 125 );


  //opacity
  if (opacity < 255) { // When less than the maximum,
    opacity += 0.5; // increase opacity
  }
  tint(255, opacity);
  image(et, 130, 125 );
  image(txt, 50, 40);
  image(trc, 85, 130);

  //buttons draws
  fill(value1);
  rect(500, 200, 50, 50, 30);
  fill(value2);
  rect(500, 300, 50, 50, 30);
  fill(value3);
  rect(500, 400, 50, 50, 30);
  fill(value4);
  rect(500, 500, 50, 50, 30);


  //ciercle flow with mouse
  noFill();
  stroke(255);
  ellipse(mouseX, mouseY-55, 200, 200);




  //button link to web page
  if (overButton == true) {
    int m4 = millis();
    fill(m4 % 150);
    circle(260, 230, 30);
    cursor(CROSS);
  } else {
    noStroke();
    noFill();
    cursor(HAND);
  }
}

//circle(260, 230, 30);

void mouseReleased() {

  loop();

  if (mouseX > 499 && mouseX < 550 && mouseY >199 && mouseY < 300) {
    if (value1 == 0)
      value1 = 255;
    else
      value1 = 0;
  }
  // ----
  else if (mouseX > 499 && mouseX < 550 && mouseY > 299 && mouseY < 400) {
    if (value2 == 0)
      value2 = 255;
    else
      value2 = 0;
  }
  // ---
  else if (value3 == 0 & (mouseX > 499 && mouseX < 550 && mouseY > 399 && mouseY < 450)) {
    value3 = 255;
  } else {
    value3 = 0;
  }
  if (value4 == 0 & (mouseX > 499 && mouseX < 550 && mouseY > 499 && mouseY < 550)) {
    value4 = 255;
  } else {
    value4 = 0;
  }
}

void mousePressed() {
  if (overButton) {
    link("https://www.youtube.com/playlist?list=PL087855B0290C2154");
    link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK3aWfOtz0-wEpL6fkvZiBB");
  }
}


void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}


void checkButtons() {
  if (mouseX > 200 && mouseX-40 < 300 && mouseY+35 > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}
2

Suggestion: Do away with mouseReleased() and copy/paste the following into mousePressed()

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 200)&(mouseY <= 230)) {
    if (value1 == 255) {
      value1 = 0;
    } else {
      value1 = 255;
    }
    println("btn1 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 300)&(mouseY <= 330)) {
    if (value2 == 255) {
      value2 = 0;
    } else {
      value2 = 255;
    }
    println("btn2 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 400)&(mouseY <= 430)) {
    if (value3 == 255) {
      value3 = 0;
    } else {
      value3 = 255;
    }
    println("btn3 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 500)&(mouseY <= 530)) {
    if (value4 == 255) {
      value4 = 0;
    } else {
      value4 = 255;
    }
    println("btn4 hit.");
  }
1 Like
3

continued

see Buttons how to play and pause sound/music

1 Like
4

@Chrisir , I am having a big problem here, the sound form any sketch wont come out. All the other system in my computer works well. Wn10
The processin 4, i unistall, install againg, i think* i install all the librarys.
P5js work, everywhere the sound work, only in Processing skecth, eaven the native exemples do not.
going crazy for days… lol

1 Like
5

see Buttons play and pause

1 Like
6

Thank to all of you guys…
Project done.
This part is sorted…

//import processing.sound.*;
let song;
let song1;
let song2;
let song3;
var et;
var opacity = 0;
var img;
var txt;
var trc;
var overButton = false;

var myboolean = (backwards = false);
let timeLapse = 400;
let timeTrack;
let m;
//botoes
let value1 = 0;
let value2 = 0;
let value3 = 0;
let value4 = 0;
var link;
//let print;

function setup() {
  createCanvas(600, 600);
  song = loadSound("fabFX.mp3");
  song1 = loadSound("12 Premiere.mp3");
  song2 = loadSound("Data2.mp3");
  song3 = loadSound("lucid.wav");

  //images
  trc = loadImage("Trance3.png");
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png"); // Load the image into the program
  et.resize(258, 458);
}

function draw() {
  background(0); // total canva black

  // rect flahing/blinking
  let m = millis();
  fill(m % 200); // velocity of flashs ** not working good ** maybe my computer..
  rect(25, 25, 555, 555, 30);

  //rgb
  tint(20, 17, 247, 100); // Alpha to 102 without changing the tint
  image(et, 140, 125);
  tint(255, 0, 0, 80); // Tint to yellow, alpha to 153
  image(et, 120, 125);

  //opacity
  if (opacity < 255) {
    // When less than the maximum,
    opacity += 0.5; // increase opacity
  }
  tint(255, opacity);
  image(et, 130, 125);
  image(txt, 50, 40);
  image(trc, 85, 130);

  //buttons draws
  fill(value1);
  rect(500, 200, 50, 50, 20);
  fill(value2);
  rect(500, 300, 50, 50, 20);
  fill(value3);
  rect(500, 400, 50, 50, 20);
  fill(value4);
  rect(500, 500, 50, 50, 20);

  //ciercle flow with mouse
  noFill();
  stroke(255);
  ellipse(mouseX, mouseY - 55, 200, 200);

  //button link to web page
  if (overButton == true) {
    let m4 = millis();
    fill(m4 % 150);
    circle(290, 250, 30);
    cursor(CROSS);
  } else {
    noStroke();
    noFill();
    cursor(HAND);
  }
}

//circle(260, 230, 30);

function mouseReleased() {
  loop();

  if (mouseX >= 500 && mouseX <= 550 && (mouseY >= 200) & (mouseY <= 230)) {
    //song.play();

    if (song.isPlaying()) {
      // .isPlaying() returns a boolean
      song.stop();
    } else {
      song.play();
    }

    if (value1 == 255) {
      value1 = 0;
    } else {
      value1 = 255;
    }
    //print("btn1 hit.");
  }

  if (mouseX >= 500 && mouseX <= 550 && (mouseY >= 300) & (mouseY <= 330)) {
    //song1.play();

    if (song1.isPlaying()) {
      // .isPlaying() returns a boolean
      song1.stop();
    } else {
      song1.play();
    }

    if (value2 == 255) {
      value2 = 0;
    } else {
      value2 = 255;
    }

    // print("btn2 hit.");
  }

  if (mouseX >= 500 && mouseX <= 550 && (mouseY >= 400) & (mouseY <= 430)) {
    song2.play();

    if (value3 == 255) {
      value3 = 0;
    } else {
      value3 = 255;
    }
    //print("btn3 hit.");
  }

  if (mouseX >= 500 && mouseX <= 550 && (mouseY >= 500) & (mouseY <= 530)) {
    song3.play();

    if (value4 == 255) {
      value4 = 0;
    } else {
      value4 = 255;
    }
    //print("btn4 hit.");
  }
}
function mousePressed() {
  if (overButton) {
    // link("https://www.youtube.com/playlist?list=PL087855B0290C2154");
    //link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK3aWfOtz0-wEpL6fkvZiBB");

    window.location.replace(
      "https://www.youtube.com/playlist?list=PL087855B0290C2154"
    );
    location.href = "https://www.youtube.com/playlist?list=PL087855B0290C2154";
  }
}

function mouseMoved() {
  checkButtons();
}

function mouseDragged() {
  checkButtons();
}

function checkButtons() {
  if (mouseX > 200 && mouseX - 40 < 300 && mouseY + 35 > 200 && mouseY < 300) {
    overButton = true;
  } else {
    overButton = false;
  }
}