# Buttons and mousePressed

**URL:** https://discourse.processing.org/t/buttons-and-mousepressed/40201
**Category:** Libraries
**Created:** [December 18, 2022, 8:02pm UTC](https://discourse.processing.org/t/buttons-and-mousepressed/40201 "2022-12-18T20:02:59Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)
#### Post date: [December 18, 2022, 8:02pm UTC](https://discourse.processing.org/t/buttons-and-mousepressed/40201/1 "2022-12-18T20:02:59Z")

</div>

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

```auto
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;
  }
}

```

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [December 18, 2022, 9:03pm UTC](https://discourse.processing.org/t/buttons-and-mousepressed/40201/2 "2022-12-18T21:03:04Z")

</div>

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

```auto
  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.");
  }

```

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 19, 2022, 5:58pm UTC](https://discourse.processing.org/t/buttons-and-mousepressed/40201/3 "2022-12-19T17:58:53Z")

</div>

continued

see [Buttons how to play and pause sound/music](https://discourse.processing.org/t/buttons-how-to-play-and-pause-sound-music/40205)

---

<div class="post-metadata">

### Author: ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)
#### Post date: [December 19, 2022, 6:07pm UTC](https://discourse.processing.org/t/buttons-and-mousepressed/40201/4 "2022-12-19T18:07:04Z")

</div>

@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

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 19, 2022, 8:47pm UTC](https://discourse.processing.org/t/buttons-and-mousepressed/40201/5 "2022-12-19T20:47:59Z")

</div>

see [Buttons play and pause](https://discourse.processing.org/t/buttons-play-and-pause/40215)

---

<div class="post-metadata">

### Author: ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)
#### Post date: [December 19, 2022, 11:29pm UTC](https://discourse.processing.org/t/buttons-and-mousepressed/40201/6 "2022-12-19T23:29:18Z")

</div>

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

```auto
//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;
  }
}

```