How to make a button have sound

Processing Libraries
1

Hi, I’m working on a video game project where I have to incorporate sound, so far I have both of the buttons but cannot figure out how to make each buttons have 3 sets of sounds when clicked on. so far this is all I have. Can someone help me code each button to have 3 sounds.

int rectX, rectY;      // Position of square button
int circleX, circleY;  // Position of circle button
int rectSize = 90;     // Diameter of rect
int circleSize = 93;   // Diameter of circle
color rectColor, circleColor, baseColor;
color rectHighlight, circleHighlight;
color currentColor;
boolean rectOver = false;
boolean circleOver = false;

void setup() {
  size(640, 360);
  rectColor = color(1220);
  rectHighlight = color(#08FA72);
  circleColor = color(1220);
  circleHighlight = color(#FA08DE);
  baseColor = color(100);
  currentColor = baseColor;
  circleX = width/2+circleSize/2+10;
  circleY = height/2;
  rectX = width/2-rectSize-10;
  rectY = height/2-rectSize/2;
  ellipseMode(CENTER);
}

void draw() {
  update(mouseX, mouseY);
  background(currentColor);
  
  if (rectOver) {
    fill(rectHighlight);
  } else {
    fill(rectColor);
  }
  stroke(255);
  rect(rectX, rectY, rectSize, rectSize);
  
  if (circleOver) {
    fill(circleHighlight);
  } else {
    fill(circleColor);
  }
  stroke(0);
  ellipse(circleX, circleY, circleSize, circleSize);
}

void update(int x, int y) {
  if ( overCircle(circleX, circleY, circleSize) ) {
    circleOver = true;
    rectOver = false;
  } else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
    rectOver = true;
    circleOver = false;
  } else {
    circleOver = rectOver = false;
  }
}

void mousePressed() {
  if (circleOver) {
    currentColor = #FA8917;
  }
  if (rectOver) {
    currentColor = rectColor;
  }
}

boolean overRect(int x, int y, int width, int height)  {
  if (mouseX >= x && mouseX <= x+width && 
      mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}

boolean overCircle(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}
1 Like
2

3 sounds - do you mean one sound randomly from a set of 3 possible sounds

or do you mean like the 1st time I click, sound 1, the 2nd time, sound time, the 3rd time 3, the 4th time 1 again…?

Chrisir

3

here is a basic sketch - NOT TESTED

search “!!!” to see the cool bits

it loads 6 files you have to provide into 2 arrays

it plays only the 1st file from each array - to do…

you could use an index for each array: int indexList1 and indexList2 and then say
when button is clicked

    fileList1[indexList1].play();  // !!!!!!!!!!!!!!!!!!!!!!!!!!!
     
    indexList1++; 
    if(indexList1>2)
       indexList1 = 0;

Chrisir


// !!!!!!!!!!!!!!!!!!!!!!!!!!!
import processing.sound.*;
SoundFile[] fileList1 = new SoundFile[3];
SoundFile[] fileList2 = new SoundFile[3];
// !!!!!!!!!!!!!!!!!!!!!!!!!!!

int rectX, rectY; // Position of square button
int circleX, circleY; // Position of circle button
int rectSize = 90; // Diameter of rect
int circleSize = 93; // Diameter of circle
color rectColor, circleColor, baseColor;
color rectHighlight, circleHighlight;
color currentColor;
boolean rectOver = false;
boolean circleOver = false;

void setup() {
  size(640, 360);
  rectColor = color(1220);
  rectHighlight = color(#08FA72);
  circleColor = color(1220);
  circleHighlight = color(#FA08DE);
  baseColor = color(100);
  currentColor = baseColor;
  circleX = width/2+circleSize/2+10;
  circleY = height/2;
  rectX = width/2-rectSize-10;
  rectY = height/2-rectSize/2;
  ellipseMode(CENTER);

  // Load a soundfile from the /data folder of the sketch // !!!!!!!!!!!!!!!!!!!!!!!!!!!
  fileList1[0] = new SoundFile(this, "sample0.mp3");
  fileList1[1] = new SoundFile(this, "sample1.mp3");
  fileList1[2] = new SoundFile(this, "sample2.mp3");

  fileList2[0] = new SoundFile(this, "sample3.mp3");
  fileList2[1] = new SoundFile(this, "sample4.mp3");
  fileList2[2] = new SoundFile(this, "sample5.mp3");
}

void draw() {
  update(mouseX, mouseY);
  background(currentColor);

  if (rectOver) {
    fill(rectHighlight);
  } else {
    fill(rectColor);
  }
  stroke(255);
  rect(rectX, rectY, rectSize, rectSize);

  if (circleOver) {
    fill(circleHighlight);
  } else {
    fill(circleColor);
  }
  stroke(0);
  ellipse(circleX, circleY, circleSize, circleSize);
}

void update(int x, int y) {
  if ( overCircle(circleX, circleY, circleSize) ) {
    circleOver = true;
    rectOver = false;
  } else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
    rectOver = true;
    circleOver = false;
  } else {
    circleOver = rectOver = false;
  }
}

void mousePressed() {
  if (circleOver) {
    currentColor = #FA8917;
    fileList1[0].play();  // !!!!!!!!!!!!!!!!!!!!!!!!!!!
  }
  if (rectOver) {
    currentColor = rectColor;
    fileList2[0].play();    // !!!!!!!!!!!!!!!!!!!!!!!!!!!
  }
}

boolean overRect(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width &&
    mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}

boolean overCircle(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}
1 Like
4

The second option, when I click the button the first time the first file plays then the second and so on and same for the other button.I saw your code will try it out later! Thankyou for helping!

1 Like
5

see my post above which suggests this.

see

    fileList1[indexList1].play();  // !!!!!!!!!!!!!!!!!!!!!!!!!!!
     
    indexList1++; 
    if(indexList1>2)
       indexList1 = 0;